|
| [CSS] Styling Fra : Martin |
Dato : 11-01-06 11:44 |
|
Jeg har et lille problem med
< http://scandesigns.dk/webshop/test.html>
"menuen" med:
* Forside
* Kurv
* Vilkår
* Hjælp
* Log ind
oppe i toppen, sidder jo lidt forkert i IE :( - men perfekt i Firefox.
Hvad gør jeg forkert?
PS: Resten af tingene skal i ikke tage jer af
| |
Jørgen Farum Jensen (11-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 11-01-06 12:15 |
| | |
Martin (11-01-2006)
| Kommentar Fra : Martin |
Dato : 11-01-06 12:38 |
|
Jørgen Farum Jensen wrote:
> Martin wrote:
>
>> Jeg har et lille problem med
>> < http://scandesigns.dk/webshop/test.html>
>>
>> "menuen" med:
>> * Forside
>> * Kurv
>> * Vilkår
>> * Hjælp
>> * Log ind
>>
>>
>> oppe i toppen, sidder jo lidt forkert i IE :( - men perfekt i Firefox.
>> Hvad gør jeg forkert?
>>
>> PS: Resten af tingene skal i ikke tage jer af
>
>
> Du skal nok rette din HTML-kode før du begynder at søge
> efter fejl i dit stylesheet.
> http://validator.w3.org/check?verbose=1&uri=http://scandesigns.dk/webshop/test.html
>
Det var så faktisk mit næste spørgsmål.
Jeg kan ikke gennemskue, hvad fejlen er ved punkt #1-3
og heller ej ved punkterne #4-14
| |
Michael Haase (11-01-2006)
| Kommentar Fra : Michael Haase |
Dato : 11-01-06 13:02 |
|
Martin skrev dette den 11-01-2006 12:37:
> Jørgen Farum Jensen wrote:
>
>>
>>
>> Du skal nok rette din HTML-kode før du begynder at søge
>> efter fejl i dit stylesheet.
>> http://validator.w3.org/check?verbose=1&uri=http://scandesigns.dk/webshop/test.html
>>
>
>
> Det var så faktisk mit næste spørgsmål.
>
> Jeg kan ikke gennemskue, hvad fejlen er ved punkt #1-3
Du kan ikke have <input> direkte i en <form>. Du skal komme dem i et af
de blok-elementer som validatoren beder om.
> og heller ej ved punkterne #4-14
Du kan ikke have have en <ul> direkte i en <ul>. Du kan evt. bruge
<ul>
<li>et-eller-andet
<ul></ul>
</li>
</ul>
--
Michael Haase
| |
Martin (11-01-2006)
| Kommentar Fra : Martin |
Dato : 11-01-06 14:08 |
|
Michael Haase wrote:
> Martin skrev dette den 11-01-2006 12:37:
>
>> Jørgen Farum Jensen wrote:
>>
>>>
>>>
>>> Du skal nok rette din HTML-kode før du begynder at søge
>>> efter fejl i dit stylesheet.
>>> http://validator.w3.org/check?verbose=1&uri=http://scandesigns.dk/webshop/test.html
>>>
>>
>>
>>
>> Det var så faktisk mit næste spørgsmål.
>>
>> Jeg kan ikke gennemskue, hvad fejlen er ved punkt #1-3
>
>
> Du kan ikke have <input> direkte i en <form>. Du skal komme dem i et af
> de blok-elementer som validatoren beder om.
>
>> og heller ej ved punkterne #4-14
>
>
> Du kan ikke have have en <ul> direkte i en <ul>. Du kan evt. bruge
> <ul>
> <li>et-eller-andet
> <ul></ul>
> </li>
> </ul>
>
Så nu validere den 100% uden errors på både html'en og i CSS.
Skal vi så lige hoppe tilbage til det oprindelige spørgsmål :)
Jeg har et lille problem med
< http://scandesigns.dk/webshop/test.html>
"menuen" med:
* Forside
* Kurv
* Vilkår
* Hjælp
* Log ind
oppe i toppen, sidder jo lidt forkert i IE :( - men perfekt i Firefox.
Hvad gør jeg forkert?
PS: Resten af tingene skal i ikke tage jer af
| |
Jørgen Farum Jensen (11-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 11-01-06 14:34 |
|
Martin wrote:
> Jeg kan ikke gennemskue, hvad fejlen er ved punkt #1-3
> og heller ej ved punkterne #4-14
Nu har du i hvert fald fundet og rette fejlene, for
siden validerer.
Men den er jo ikke blevet meget pænere af det. Faktisk
er det noget værre rod at se på.
Jeg tor du vil slippe noget nemmere om ved det hvis du
undlod at blande float-egenskaben ind i billedet for så
vidt angår layout.
I virkeligheden er det jo et meget simpelt 2-spaltet
layout med fikseret bredde, du er ude efter.
Det laver du altså nemmest med
#page {
width:45em;
margin: 0 auto;
}
og inde i #page-elementet en venstre og højre spalte:
#leftcol {
position:absolute;
width:200px;
left:0;
top:100px; /* Eller hvad der nu passer */
}
#rightcol {
margin:0 0 0 200px;
padding:0 1em;
}
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
| |
Martin (11-01-2006)
| Kommentar Fra : Martin |
Dato : 11-01-06 14:53 |
|
Jørgen Farum Jensen wrote:
> Martin wrote:
>
>
>> Jeg kan ikke gennemskue, hvad fejlen er ved punkt #1-3
>> og heller ej ved punkterne #4-14
>
>
> Nu har du i hvert fald fundet og rette fejlene, for
> siden validerer.
Nemlig
>
> Men den er jo ikke blevet meget pænere af det. Faktisk
> er det noget værre rod at se på.
Alt under dankort billederne, skal der ikke kigges på :)
Og farver heller ikk for den sags skyld :)
>
> Jeg tor du vil slippe noget nemmere om ved det hvis du
> undlod at blande float-egenskaben ind i billedet for så
> vidt angår layout.
>
> I virkeligheden er det jo et meget simpelt 2-spaltet
> layout med fikseret bredde, du er ude efter.
2 spalter - og 7 rækker ja.
>
> Det laver du altså nemmest med
> #page {
> width:45em;
> margin: 0 auto;
> }
> og inde i #page-elementet en venstre og højre spalte:
>
> #leftcol {
> position:absolute;
> width:200px;
> left:0;
> top:100px; /* Eller hvad der nu passer */
> }
> #rightcol {
> margin:0 0 0 200px;
> padding:0 1em;
> }
>
Hvordan vil du så sætte de 2 baggrundsbilleder ind?
Style top menuen?
Style venstre menu
| |
Jørgen Farum Jensen (11-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 11-01-06 15:18 |
|
Martin wrote:
>> #leftcol {
>> position:absolute;
>> width:200px;
>> left:0;
>> top:100px; /* Eller hvad der nu passer */
>> }
>> #rightcol {
>> margin:0 0 0 200px;
>> padding:0 1em;
>> }
>>
>
> Hvordan vil du så sætte de 2 baggrundsbilleder ind?
> Style top menuen?
> Style venstre menu
For eksempel:
#leftcol {
....
background-image: bgleft.png;
background-position:left top;
background-repeat:no-repeat;
}
#rightcol {
....
background-image: bgright.png;
background-position:left top;
background-repeat:no-repeat;
}
I dit tilfælde tror jeg nu nok, jeg ville lave nogle
div'er i hhv. venstre og højre kolonner, der tilsammen
danner de tre "rækker", som du ønsker i det visuelle
udtryk.
Men det er bare forslag, jeg skal jo ikke bestemme,
hvordan du skal lave det...
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
| |
Martin (11-01-2006)
| Kommentar Fra : Martin |
Dato : 11-01-06 16:56 |
|
Jørgen Farum Jensen wrote:
<klip>
>
> I dit tilfælde tror jeg nu nok, jeg ville lave nogle
> div'er i hhv. venstre og højre kolonner, der tilsammen
> danner de tre "rækker", som du ønsker i det visuelle
> udtryk.
>
> Men det er bare forslag, jeg skal jo ikke bestemme,
> hvordan du skal lave det...
Nu tror jeg at jeg er vågnet op, og kan se idéen med "galskaben" :)
Nu har jeg ihvertfald tegnet det hele op, og det ser bare alletiders ud.
1000 tak for hjælpen, selvom jeg er besværlig ;)
| |
Jørgen Farum Jensen (11-01-2006)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 11-01-06 17:33 |
|
Martin wrote:
> Nu tror jeg at jeg er vågnet op, og kan se idéen med "galskaben" :)
> Nu har jeg ihvertfald tegnet det hele op, og det ser bare alletiders ud.
> 1000 tak for hjælpen, selvom jeg er besværlig ;)
Ellers kan dette link måske hjælpe dig på vej:
http://www.webdesign101.dk/x/layout/webshop.html
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
| |
Knud Gert Ellentoft (11-01-2006)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 11-01-06 16:48 |
|
Martin skrev:
>oppe i toppen, sidder jo lidt forkert i IE :( - men perfekt i Firefox.
>Hvad gør jeg forkert?
Udover , hvad du har fået af andre svar, så bør du ikke have
<?xml version="1.0" encoding="iso-8859-1"?> med ved din doctype.
Det gør at IE desværre går i quirk mode og derfor ikke i alle
tilfælde fortolker css efter standarden og der derfor kan være
forskel i visningen imellem IE og andre browsere.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
Knud Gert Ellentoft (11-01-2006)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 11-01-06 16:52 |
|
Knud Gert Ellentoft skrev:
>Udover , hvad du har fået af andre svar, så bør du ikke have
><?xml version="1.0" encoding="iso-8859-1"?> med ved din doctype.
Og iøvrigt brug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
som doctype.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
Martin (11-01-2006)
| Kommentar Fra : Martin |
Dato : 11-01-06 16:59 |
|
Knud Gert Ellentoft wrote:
> Knud Gert Ellentoft skrev:
>
>
>>Udover , hvad du har fået af andre svar, så bør du ikke have
>><?xml version="1.0" encoding="iso-8859-1"?> med ved din doctype.
>
>
> Og iøvrigt brug
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> som doctype.
Hmm - jeg tog ellers den der stod inde på w3.org - men nu tager jeg din,
da du ved en masse :)
| |
Martin (11-01-2006)
| Kommentar Fra : Martin |
Dato : 11-01-06 16:58 |
|
Knud Gert Ellentoft wrote:
> Martin skrev:
>
>
>>oppe i toppen, sidder jo lidt forkert i IE :( - men perfekt i Firefox.
>>Hvad gør jeg forkert?
>
>
> Udover , hvad du har fået af andre svar, så bør du ikke have
> <?xml version="1.0" encoding="iso-8859-1"?> med ved din doctype.
>
> Det gør at IE desværre går i quirk mode og derfor ikke i alle
> tilfælde fortolker css efter standarden og der derfor kan være
> forskel i visningen imellem IE og andre browsere.
Aha - det vidste jeg så ikke.
Er det så bare nok at den står som <meta> altså
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
| |
Knud Gert Ellentoft (11-01-2006)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 11-01-06 19:57 |
|
Martin skrev:
>Er det så bare nok at den står som <meta> altså
><meta http-equiv="Content-Type"
> content="text/html; charset=ISO-8859-1" />
Ja.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
| |
|
|