Archief - xHTML/CSS: menu

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
X

Xcessive-

Legacy Member
Welk is de beste manier om een menu zoals deze te maken:
http://users.fulladsl.be/spb14909/menu.gif
Het moet ook xhtml valid zijn.

Als je het met een list doet dan zit je met het probleem van die lijn. Kan je het dan beter gewoon doen en dan die lijn er tussen plaatsen door | te gebuiken en hieraan dan een padding-left en -right geven?
Z

Zero Grav

Legacy Member
Wat het probleem met die lijn is zie ik niet meteen in.

Je maakt gewoon een ul, styled die zoals gewoonlijk bij een menu om alles langs elkaar te krijgen en doet dan het volgende:

<ul>
<li style="border-right: 1px solid #000;">first</li>
<li style="border-right: 1px solid #000;">second</li>
<li style="border-right: 0;" id="last">last</li>
</ul>

Natuurlijk wel nog wat padding enzo toevoegen maar you get the picture.
m

maatje

Legacy Member
Zero Gray, uwe is niet valid, er moet volledig scheiding zijn tussen opmaak en structuur

ik zou zelf

<ul>
<li>one</li>
<li>|</li>
<li>two</li>
</ul>

ul li
{
float:left;
list-style-image:none;
list-style-type:none;
}

ul
{
display:inline;
}
X

Xavez

Legacy Member
:rofl: da's ook weer het laatste nieuw :). Als er geen scheiding is van opmaak en structuur is hij niet valid tegenwoordig.

Jouw oplossing is nog méér horrific, een | is helemaal betekenisloos. Met andere woorden, dat tussen je tags zetten druist horizontaal, verticaal en diagonaal tegen alle regels van de semantiek in. In case you haven't noticed: die scheidingsbar is óók opmaak. Ze is volledig betekenisloos. Als je er dan toch zo hard op drukt om opmaak/structuur te scheiden:

HTML: 
<ul>
   <li id="one"><a href="#">One</a></li>
   <li><a href="#">Two</a></li>
   <li id="three"><a href="#">Three</a></li>
</ul>

ul {list-style: none; padding: 0; margin: 0;}
li {display: inline; border-right: 1px solid #000; padding: 0 10px;}
#one {padding-left: 0 !important}
#three {border-right: 0 !important}
K

KoenDK

Legacy Member
eigenlijk klopt die oplossing toch niet :confused:
dan krijg je bij uw laatste <li> nog een border-right

en dat wil hij niet denk ik :$
X

Xavez

Legacy Member
Ik heb hem zonet getest, as far as I can see zie ik rechts toch geen border en is dit perfect wat hij moet hebben? :).
Z

Zero Grav

Legacy Member
maatje zei:
...
Klik om te vergroten...

Hence dat we hier op een forum (waarbij het simpeler is vlug alles samen te gooien) zitten en dat ik veronderstelde dat hij dat zelf wel door zou hebben.:oink:
X

Xavez

Legacy Member
Die gebruikt hij reeds :).
Xcessive: IE6 doet idd soms raar bij die nopreload-rollovers. Ik ben zelf nog niet helemaal uit de juiste oorzaak...
K

KoenDK

Legacy Member
Xavez zei:
Ik heb hem zonet getest, as far as I can see zie ik rechts toch geen border en is dit perfect wat hij moet hebben? :).
Klik om te vergroten...

ik ben effe totaal niet mee
als <li> de eigenschap border-right krijgt (dat streepje dus)
dan zal zijn rechtse menu ding toch ook die eigenschap krijgen :confused:


*edit : ik krijg geen flikkeringen in IE6
*edit2 : ik had nooit gedacht dat iemand met zo een vraag (threadstart) tot zulk een resultaat zou komen de dag nadien :)
R

Razorwolf

Legacy Member
Xavez zei:
:rofl: da's ook weer het laatste nieuw :). Als er geen scheiding is van opmaak en structuur is hij niet valid tegenwoordig.

Jouw oplossing is nog méér horrific, een | is helemaal betekenisloos. Met andere woorden, dat tussen je tags zetten druist horizontaal, verticaal en diagonaal tegen alle regels van de semantiek in. In case you haven't noticed: die scheidingsbar is óók opmaak. Ze is volledig betekenisloos. Als je er dan toch zo hard op drukt om opmaak/structuur te scheiden:

HTML: 
<ul>
   <li id="one"><a href="#">One</a></li>
   <li><a href="#">Two</a></li>
   <li id="three"><a href="#">Three</a></li>
</ul>

ul {list-style: none; padding: 0; margin: 0;}
li {display: inline; border-right: 1px solid #000; padding: 0 10px;}
#one {padding-left: 0 !important}
#three {border-right: 0 !important}
Klik om te vergroten...

One two three is ook niet echt semantisch hé... en !important hiervoor gebruiken is al helemaal van de pot gerukt.

HTML: 
<ul>
   <li><a href="#">Menu-item</a></li>
   <li><a href="#">Menu-item</a></li>
   <li class="last"><a href="#">Menu-item</a></li>
</ul>

.last { border: none }
X

Xavez

Legacy Member
Sigh dit kan soms toch een zeikforum zijn hoor. Had je nu echt niet door dat die One Two Three louter ter aanduiding is? :). Aan die list-items kan je beter een ID toekennen, gezien elk list-item toch uniek is. Ik gaf enkel en alleen de aanduiding "one" overeenstemmend met de link "one" omdat logischerwijze de id van die link ook minstens gedeeltelijk de naam van die link zelf zou worden. Een class aan het ding gaan toekennen is overigens nog absurder. Classes dienen voor algemene kenmerken. En die !important is evenmin van de pot gerukt als het W(3)C-deksel. sommige browsers hebben de neiging om nogal eens quirky te doen. Bovendien heb ik geen idee of de TS zijn CSS wel juist gaat ordenen, dus speel ik in elk geval op safe. Overigens: jij vergeet de padding-left van het eerste element nu weg te halen. En dat lijkt me minstens zo belangrijk. Muggenneuken in your face (sorry maar die kon ik echt niet laten liggen hoor).
R

Razorwolf

Legacy Member
Xavez zei:
Sigh dit kan soms toch een zeikforum zijn hoor. Had je nu echt niet door dat die One Two Three louter ter aanduiding is? :). Een class aan het ding gaan toekennen is overigens nog absurder. Classes dienen voor algemene kenmerken. En die !important is evenmin van de pot gerukt als het WC-deksel. Bovendien vergeet jij de padding-left van het eerste element nu weg te halen. Muggenneuken in your face (sorry maar die kon ik echt niet laten liggen hoor).
Klik om te vergroten...
Ooit al eens aan gedacht dat er meerdere list items op een site kunnen voorkomen? En als je een beetje logisch werkt zet je enkel een padding-right op je list item, geen padding-left. Classes dienen helemaal niet voor algemene kenmerken, classes zorgen voor een extra selector, indien nodig. Voor algemene kenmerken gebruik je gewoon het html-element zelf. Help zeg...

als je raad geeft, doe het dan goed.
X

Xavez

Legacy Member
Razorwolf zei:
Ooit al eens aan gedacht dat er meerdere list items op een site kunnen voorkomen? En als je een beetje logisch werkt zet je enkel een padding-right op je list item, geen padding-left. Classes dienen helemaal niet voor algemene kenmerken, classes zorgen voor een extra selector, indien nodig. Voor algemene kenmerken gebruik je gewoon het html-element zelf. Help zeg...

als je raad geeft, doe het dan goed.
Klik om te vergroten...
Ooit al eens gedacht dat er maar één navigatiemenu met dezelfde opmaak op een site voorkomt? Je hebt overigens padding-left en padding-right nodig, maar zo ver ben je duidelijk nog niet. Je kan eventueel ook nog een padding-right en een margin-left gebruiken, of omgekeerd, zo je het wil, maar dan moet je wel ook de border-reset veranderen naar het eerste element én het laatste element. En dat maakt bovendien de code alleen maar onnodig langer.

Classes dienen wel voor algemene kenmerken, toepasbaar op verschillende elementen. Dus niet gewoon voor een "extra selector". Een class kan je bijvoorbeeld de naam "roodbruin" geven. Je geeft die class dan background roodbruin mee en je kan die dan gaan toepassen op divisions, paragraphs, headers, spans... Het ding gewoon als selector gebruiken is uiteraard mogelijk - maar als je dan toch zo'n semantische purist bent, doe je het beter meteen tegoei.

Help zeg, als je wilt discussiëren, zorg dan dat je zelf de stof onder de knie hebt en minstens het probleem en de aangeboden oplossing in deze thread tweemaal leest.
R

Razorwolf

Legacy Member
Xavez zei:
Ooit al eens gedacht dat er maar één navigatiemenu met dezelfde opmaak op een site voorkomt? Je hebt overigens padding-left en padding-right nodig, maar zo ver ben je duidelijk nog niet. Je kan eventueel ook nog een padding-right en een margin-left gebruiken, of omgekeerd, zo je het wil, maar dan moet je wel ook de border-reset veranderen naar het eerste element én het laatste element. En dat maakt bovendien de code alleen maar onnodig langer.

Classes dienen wel voor algemene kenmerken, toepasbaar op verschillende elementen. Dus niet gewoon voor een "extra selector". Een class kan je bijvoorbeeld de naam "roodbruin" geven. Je geeft die class dan background roodbruin mee en je kan die dan gaan toepassen op divisions, paragraphs, headers, spans... Het ding gewoon als selector gebruiken is uiteraard mogelijk - maar als je dan toch zo'n semantische purist bent, doe je het beter meteen tegoei.

Help zeg, als je wilt discussiëren, zorg dan dat je zelf de stof onder de knie hebt en minstens het probleem en de aangeboden oplossing in deze thread tweemaal leest.
Klik om te vergroten...

Er bestaan genoeg sites die een footermenu met gelijkaardige opmaak hebben... een id gebruiken heeft alleen zin als je zeker weet dat iets maar één keer gaat voorkomen (e.g. #header, #content).

Als je met classes als roodbruin werkt ben je nodeloze code aan het schrijven. Zet roodbruin dan bijvorbeeld op emphasis en gebruik het om nadruk te leggen. <span class="roodbruin">iets</span> is vieze code. Evenals !important gebruiken waar het niet nodig is.

Als je padding-left en padding-right gebruikt lijnt je tekstmenu niet meer uit op je tekst - tenzij je tekst of contentgedeelte ook padding heeft natuurlijk. Dit hangt dus eigenlijk van de site af.

als je raad geeft, doe het dan goed.
X

Xavez

Legacy Member
Ik maak hier verder geen woorden aan vuil Razorwolf. Doe jij het maar op jouw manier, ik zal die van mij wel hanteren :). Maar hier komen zeggen dat ik slechte code schrijf en vuile voorbeelden geef gaat er mij écht wel over (te meer omdat dat gewoon niet het geval is).
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan