---

Hej igen :)

Jeg blev enig med mig selv om, at det efterhånden var tid til at
tage migselv i nakken og kaste mig ud i nogle af de xhtml/css
projekter som jeg har mindre god forståelse for. Det var på tide
at tage en bid mere.

Som sagt så gjort - jeg kastede mig ud I at lave, først, en
vandret liste hvorefter den skulle laves til menu, og næste
skridt er at lære hvordan jeg lave dropdown effekt herpå.
Dog kan jeg godt lide at have en fase færdig, før jeg kaster mig
ud i den næste og jeg har fået et problem som afholder mig fra at
afslutte min menu-formnings fase.

Adressen til siden er:
http://www.phoepsdiary.com/htmlspanden/template01.html

Udformet i Firefox 3.5.3, 100% valid XHTML/CCS (ingen advarsler
eller fejl) men har dog stadig kun et Firefox kvalificeret
stylesheet. Pt. er hover-stadiet placeret godt 1px for højt i EI,
men planen er at tilføje et IE stylesheet senere hen. Dette er
dog ikke problemet...

Problemet er at jeg gerne vil have hover-baggrunden (den blå
boks) til at line op med venstre kant af selve navlist-div'en.
Jeg har byttet rundt og eksperimenteret på kryds og på tværs med
mine paddings, margins osv, men synes ikke rigtig jeg kan knække
nøden. Resten mener jeg at jeg har forholdsvis styr på.

Hvis I kan se hvad det er der skaber dette mellemrum på 2-3px er
i mere end velkomne til at give mig et par på kassen, for
frøkenen her fatter kegle lige nu :)

På forhånd tak!

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah skrev:

> Hvis I kan se hvad det er der skaber dette mellemrum på 2-3px er
> i mere end velkomne til at give mig et par på kassen, for
> frøkenen her fatter kegle lige nu :)

Dét kan misforstås!!! Eller det bare
mig der er en gammel gris?

Til sagen: Installer Web developer Toolbar i Firefox,
og brug frenhæv blokelementer for få syn for sagen.

Et skud fra hoften: Bredde og højde på en navbar skal
bestemmes alene af formateringen af a-elemntet.
ul, li skal have margin:0;padding:0;
li skal /kun/ have display:inline egenskaben påtrykt.
Resten skal klares af a-elementet, der have egenskaben
display:block og left-floates.

Tutorial her:
http://webdesign101.dk/www/cssmenu/dropdownmenu/


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> Dét kan misforstås!!! Eller det bare
> mig der er en gammel gris?

Hehe, det var ikke meningen det skulle kunne misforståes men ja, det
kunne ligne mig at få rablet noget af som kan betyde mere end bare én
ting :)

> Til sagen: Installer Web developer Toolbar i Firefox,
> og brug frenhæv blokelementer for få syn for sagen.
>
> Et skud fra hoften: Bredde og højde på en navbar skal
> bestemmes alene af formateringen af a-elemntet.
> ul, li skal have margin:0;padding:0;
> li skal /kun/ have display:inline egenskaben påtrykt.
> Resten skal klares af a-elementet, der have egenskaben
> display:block og left-floates.
>
> Tutorial her:
> http://webdesign101.dk/www/cssmenu/dropdownmenu/

Jeg er i fuld gang med at lede efter Web developer Toolbar, eller...
jeg er når jeg har skrevet færdig :) Bare for at dobbeltchecke ku du
fortælle mig hvem eller hvad der udbyder den?

Mht. dine råd ang. formatering af listen så vil jeg gerne sige mange
tak! Din forklaring gik rent ind (tror jeg) og det gjorde mig i stand
til at se en ny logik i konstruktionen.
Når du siger at højde og bredde bør bestemmes af a formateringen
alene, kan jeg kun give dig ret. Jeg forsøgte også dette men der var
nok så mange ting jeg følte behov for at teste på én gang, at grunden
til det mislykkeds har været manglende overblik ^^

Jeg vil starte forfra og bruge den angivede formatering. Hvis det
giver problemer må jeg jo vende tilbage :)

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah skrev:

> Jeg er i fuld gang med at lede efter Web developer Toolbar, eller...
> jeg er når jeg har skrevet færdig :) Bare for at dobbeltchecke ku du
> fortælle mig hvem eller hvad der udbyder den?

Den kan downloades på Mozillas hjemmeside:
https://addons.mozilla.org/en-US/firefox/addon/60

--
Philip - http://chartbase.dk | http://www.hitsurf.dk

---

Jahirah skrev:

> Jeg er i fuld gang med at lede efter Web
> developer Toolbar, eller...

Jeg har skrevet lidt om det på

http://html-faq.dk/3001.asp

hvor der også er et link.

--
Allan Vebel
http://vebel.dk - http://html-faq.dk
http://webdesigngruppen.dk

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:

> Et skud fra hoften: Bredde og højde på en navbar skal
> bestemmes alene af formateringen af a-elemntet.
> ul, li skal have margin:0;padding:0;
> li skal /kun/ have display:inline egenskaben påtrykt.
> Resten skal klares af a-elementet, der have egenskaben
> display:block og left-floates.

--------------8<--------------------------------

Indtil videre er jeg kommet hertil;

#navlist { padding:4px 0 7px 0; background:url(img01/01-navlist.png)
no-repeat; font:12px "Trebuchet MS", Arial, Verdana, sans-serif; }

#navlist ul { padding:0; margin:0; list-style-type:none; }
#navlist li { padding:0; margin:0; display:inline; }
#navlist li a { padding-left:16px; display:block; display: block;
float:left; text-decoration:none; }
#navlist li a:visited { .. }
#navlist li a:hover { .. }

...hvilket må siges at være en del mere "rent" end det andet rod. Nu
er jeg så stødt på et (meget fundementalt og trick-agtigt) spørgsmål.

Ovenover har jeg en '#navlist li a' og en '#navlist li a:visited'
osv.. Men er '#navlink li a:link' det samme som '#navlist li a'? Og i
så fald behøver jeg vel kun én af dem right?

Meget begynder agtigt spørgsmål men ja... det er sådanne basis ting
jeg mangler at få sat fast desværre.

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah wrote in dk.edb.internet.webdesign.html:

> Indtil videre er jeg kommet hertil;
>
> #navlist { padding:4px 0 7px 0; background:url(img01/01-navlist.png)
> no-repeat; font:12px "Trebuchet MS", Arial, Verdana, sans-serif; }
>
> #navlist ul { padding:0; margin:0; list-style-type:none; }
> #navlist li { padding:0; margin:0; display:inline; }
> #navlist li a { padding-left:16px; display:block; display: block;
> float:left; text-decoration:none; }
> #navlist li a:visited { .. }
> #navlist li a:hover { .. }
>
> ...hvilket må siges at være en del mere "rent" end det andet rod. Nu
> er jeg så stødt på et (meget fundementalt og trick-agtigt) spørgsmål.
>
> Ovenover har jeg en '#navlist li a' og en '#navlist li a:visited'
> osv.. Men er '#navlink li a:link' det samme som '#navlist li a'? Og i
> så fald behøver jeg vel kun én af dem right?
>
> Meget begynder agtigt spørgsmål men ja... det er sådanne basis ting
> jeg mangler at få sat fast desværre.

-----------8<------------------------------

Nu jeg er ved det så har jeg lidt svært ved at få punkt tegnene
centreret - hvad mangler jeg? :)

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah skrev:
> Jahirah wrote in dk.edb.internet.webdesign.html:
>
>> Indtil videre er jeg kommet hertil;
>>
>> #navlist { padding:4px 0 7px 0; background:url(img01/01-navlist.png)
>> no-repeat; font:12px "Trebuchet MS", Arial, Verdana, sans-serif; }
>>
>> #navlist ul { padding:0; margin:0; list-style-type:none; }
>> #navlist li { padding:0; margin:0; display:inline; }
>> #navlist li a { padding-left:16px; display:block; display: block;
>> float:left; text-decoration:none; }
>> #navlist li a:visited { .. }
>> #navlist li a:hover { .. }
>>
>> ...hvilket må siges at være en del mere "rent" end det andet rod. Nu
>> er jeg så stødt på et (meget fundementalt og trick-agtigt) spørgsmål.
>>
>> Ovenover har jeg en '#navlist li a' og en '#navlist li a:visited'
>> osv.. Men er '#navlink li a:link' det samme som '#navlist li a'? Og i
>> så fald behøver jeg vel kun én af dem right?
>>
>> Meget begynder agtigt spørgsmål men ja... det er sådanne basis ting
>> jeg mangler at få sat fast desværre.
>
> -----------8<------------------------------
>
> Nu jeg er ved det så har jeg lidt svært ved at få punkt tegnene
> centreret - hvad mangler jeg? :)
>
Hvilke tegn, hvordan centreret?

Hvis det er de små pile, så således:
background-image:url(img01/01-navlist.png
background-position:right center;
background-repeat:no-repeat;

Det skal være a-markørens baggrund.

MVH

JFJ

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:

> Hvilke tegn, hvordan centreret?
>
> Hvis det er de små pile, så således:
> background-image:url(img01/01-navlist.png
> background-position:right center;
> background-repeat:no-repeat;
>
> Det skal være a-markørens baggrund.

-------------------8<----------------------------------

Det er ok, jeg fandt ud af at det var hele konstruktionen der var galt på
den. Det var a-markøren der var problemer med. Jeg havde sat display:block
på og kunne derfor se (i forhold til den stiplede block) at de stod højre
centreret - af en eller andet årsag.

Problemet viste sig at ligge i bunden af xhtmlen så jeg rensede ud og
prøvede igen. Nu lader det endelig til at gå den rigtige vej. Gruer for mit
dropdown projekt godt nok lol.

Tak for hjælpen :)

//Jahirah


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah skrev:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
>> Hvilke tegn, hvordan centreret?
>>
>> Hvis det er de små pile, så således:
>> background-image:url(img01/01-navlist.png
>> background-position:right center;
>> background-repeat:no-repeat;
>>
>> Det skal være a-markørens baggrund.
>
> -------------------8<----------------------------------
>
> Det er ok, jeg fandt ud af at det var hele konstruktionen der var galt på
> den. Det var a-markøren der var problemer med. Jeg havde sat display:block
> på og kunne derfor se (i forhold til den stiplede block) at de stod højre
> centreret - af en eller andet årsag.
>
> Problemet viste sig at ligge i bunden af xhtmlen så jeg rensede ud og
> prøvede igen. Nu lader det endelig til at gå den rigtige vej. Gruer for mit
> dropdown projekt godt nok lol.

Dere ikke noget at grue for. Eksemplet
http://webdesign101.dk/www/cssmenu/dropdownmenu/eks12a.html
er nærmest selvforklarende, selvom principperne
er lidt anderledes end i mine tidligere svar.
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Jahirah formulerede spørgsmålet:
> Hej igen :)
>
> Jeg blev enig med mig selv om, at det efterhånden var tid til at
> tage migselv i nakken og kaste mig ud i nogle af de xhtml/css
> projekter som jeg har mindre god forståelse for. Det var på tide
> at tage en bid mere.
>
> Som sagt så gjort - jeg kastede mig ud I at lave, først, en
> vandret liste hvorefter den skulle laves til menu, og næste
> skridt er at lære hvordan jeg lave dropdown effekt herpå.
> Dog kan jeg godt lide at have en fase færdig, før jeg kaster mig
> ud i den næste og jeg har fået et problem som afholder mig fra at
> afslutte min menu-formnings fase.
>
> Adressen til siden er:
> http://www.phoepsdiary.com/htmlspanden/template01.html
>
> Udformet i Firefox 3.5.3, 100% valid XHTML/CCS (ingen advarsler
> eller fejl) men har dog stadig kun et Firefox kvalificeret
> stylesheet. Pt. er hover-stadiet placeret godt 1px for højt i EI,
> men planen er at tilføje et IE stylesheet senere hen. Dette er
> dog ikke problemet...
>
> Problemet er at jeg gerne vil have hover-baggrunden (den blå
> boks) til at line op med venstre kant af selve navlist-div'en.
> Jeg har byttet rundt og eksperimenteret på kryds og på tværs med
> mine paddings, margins osv, men synes ikke rigtig jeg kan knække
> nøden. Resten mener jeg at jeg har forholdsvis styr på.
>
> Hvis I kan se hvad det er der skaber dette mellemrum på 2-3px er
> i mere end velkomne til at give mig et par på kassen, for
> frøkenen her fatter kegle lige nu :)
>
> På forhånd tak!
>
> //Jahirah

Det er padding-left, der er for stor på dine li'er.
Den skal være lige så stor som du vil have at dine a'er skal starte
inde fra venstre kant (lige så stor som border i billedet
img01/01-bannerimg.png).
Faktisk ville jeg nok sætte den padding i #navlist i stedet, sætte
padding til 0 i li'erne, og skabe afstand med margin-right for li'erne.
Måske en padding-right i a'erne, for at få dropdown-pilen lidt væk fra
kanten (kan også gøres med margin-right på img for pilen).

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk