[CSS] Menu horizontaal spreiden

[Verwijderd]

Een grafisch overzichtje van wat ik al een tijdje probeer te bereiken:

+--------------------------------------------------------------------+
|ITEM 1       OBJECT 2       DIT 3       NOGEENTJEERBIJ 4       ITEM5|
+--------------------------------------------------------------------+

Het eerste en het laatste item moeten tegen de zijkanten staan, en de spacing tussen elk item moet gelijk zijn.

Een tabel-loze oplossing is (uiteraard) het mooiste, maar zelfs zonder deze restrictie lukt het mij maar niet. Hopelijk surft hier een genie rond , of wellicht is dit niet mogelijk met HTML+CSS ?

FYI: het geheel heeft een vooraf gegeven width (bijvoorbeeld 500px).

[ Voor 5% gewijzigd door Verwijderd op 24-08-2006 12:47 ]

[kaassouffle]

http://www.udm4.com/
Beetje omslachtig, maar je kan er wat van leren..

Verder is er ook wel gewoon wat te vinden als je googled op bijv 'css+menu+horizontal':
http://www.seoconsultants.com/css/menus/horizontal/
http://alistapart.com/articles/horizdropdowns
http://www.sovavsiti.cz/css/horizontal_menu.html

[Verwijderd]

kaassouffle schreef op donderdag 24 augustus 2006 @ 13:05:
Verder is er ook wel gewoon wat te vinden als je googled op bijv 'css+menu+horizontal':

Een regulier horizontaal menu is piece of cake, maar:

Verwijderd schreef op donderdag 24 augustus 2006 @ 12:46:
Het eerste en het laatste item moeten tegen de zijkanten staan, en de spacing tussen elk item moet gelijk zijn.

Ofwel: niet alles links, rechts of gecentreerd maar de eerste links, en de tweede rechts. De middelsten eventueel gecentreerd, als een gelijke afstand ondoenlijk is (maar min of meer gelijke spacings tussen elk item).

[sariel]

met css doen?
geef de eerste het id menueerste mee, de laatste menulaatste, en laat ze respectievelijk links en rechts uitlijnen, terwijl je de rest centreert?

[Crayne]

sariel schreef op donderdag 24 augustus 2006 @ 15:21:
met css doen?
geef de eerste het id menueerste mee, de laatste menulaatste, en laat ze respectievelijk links en rechts uitlijnen, terwijl je de rest centreert?

Geen probleem, maar dan is de ruimte tussen ALLE elementen niet gelijk.

* Crayne heeft het daarstraks even geprobeerd en kreeg dit ook nog wel voor elkaar...

[kaassouffle]

alle knoppen/vlakken even groot en de TEKST op de knoppen (in vlakken) positie meegeven. De buitenste dus links dan wel rechts uitlijnen.. rest gecentreerd

Dan lijken ze dus goed te staan.. maar is eigenlijk alleen de labels.. bla bla..

[disjfa]

kaassouffle schreef op donderdag 24 augustus 2006 @ 17:17:
alle knoppen/vlakken even groot en de TEKST op de knoppen (in vlakken) positie meegeven. De buitenste dus links dan wel rechts uitlijnen.. rest gecentreerd

Dat betekend dat de buitenste meer ruimte rechts, dan wel links, naast zich hebben dan de andere menu items tenzei je er 3 hebt.

Ik geloof ook niet echt dat dit gemakkelijk op te lossen is tenzei je precies weet wat waar moet komen te staan.

[Verwijderd]

Wat ik zou doen is iets als het volgende:

1. maak knoppen (plaatjes) van je menu items, en meet van elke knop de breedte
vb. knop 1 80 pix, knop 2 50 pix, knop 3 60 pix, etc.
2. Bepaal het aantal knoppen en dan weet je hoeveel spaties er moeten zijn (1 minder dan knoppen)
3. Bepaal de schermbreedte van de browsende gast (daar zijn wel scriptjes voor)
4. Gebruik nu de formule:
Spatiebreedte= (Schermbreedte- (Som van knopbreedtes))/aantal_spaties
5. Nu zou je met deze uitkomsten een spacerimage met de juiste breedte kunnen invoegen tussen elke knop, dus:
KNOP1 [spacer] KNOP2 [spacer] etc.
Voordeel is nu dat de hele menubalk precies de schermbreedte zou moeten vullen, ongeacht hoe breed de gebruiker hem ook heeft.
Je zou nog een check moeten inbouwen ingeval de spacer minder dan 0 wordt... overigens, als de gebruiker een te smal scherm open heeft.

Je zou in plaats van knopplaatjes ook met mouseover geanimeerde knoppen kunnen ontwerpen.

Zoiets zou toch moeten werken lijkt me.

Suc6,
JSBach

[Verwijderd]

Ik zit al een poosje met een soortgelijk probleem. Nu heb ik het opgelost met heel veel divjes met een vaste plaats en grootte, verre van ideaal dus. Als iemand wel een oplossing heeft...

[Verwijderd]

del

[ Voor 99% gewijzigd door Verwijderd op 25-08-2006 11:04 ]

[tec]

Het is denk ik niet exact wat je bedoeld maar misschien dat je er met een beetje prutsen wat van kunt maken.

Maak een ul met daarin li's uiteraard..

width van ul op 100%

li's een width relatief aan hoeveel er zijn (denk dat je dit even moet javascripten) dus als het er 3 zijn: 33%. float:left, display:block. Eerste li een class en de laatste li een class zodat je ze text-align left en right kunt geven. En op de rest van de li's een text-align center.. doet het hier aardig, denk dat je wel wat moet tweaken nog.. maar hey we zitten hier op tweakers.net.

code:

ul {
   width:100%;
}

li {
   float:left;
   display:block;
   width:20%;
   text-align:center
}

li.first {
   text-align:left;
}

li.last {
   text-align:right;
}

code:

<ul>
    <li class="first"><a href="">lorem</a></li>
    <li><a href="">ipsum</a></li>
    <li><a href="">dolor</a></li>
    <li><a href="">ipsum</a></li>
    <li class="last"><a href="">dolor</a></li>
</ul>

[--MeAngry--]

tec schreef op vrijdag 25 augustus 2006 @ 08:55:
[...]

Ook dit werkt niet precies goed, omdat korte items veel ruimte links en rechts hebben en lange teksten weinig ruimte.
Het enige wat ik kan bedenken is met behulp van wat javascript wel te doen:

• Maak een DIV met float: left; Op deze manier heeft deze altijd de breedte van de elementen erin.
• Zet je menuitems erin in een element met display: inline; zodat ze achter elkaar komen te staan. (Of doe het met display: block; en float.)
• Vervolgens haal je met javascript de breedte van de DIV op, deze vergelijk je met de breedte die je uiteindelijk wilt hebben, 500px in dit geval.
• Vervolgens geef je alle items een padding of margin links en rechts van (500 - breedte) / (aantal items) / 2. (Delen door 2 omdat je links en rechts padding/margin wil om de afstand overal gelijk te houden.

Zo heb je perfect evenveel ruimte overal tussen.

[ Voor 33% gewijzigd door --MeAngry-- op 25-08-2006 12:48 ]

[Verwijderd]

Op mijn homepage heb ik het menu zoals jij het volgens mij bedoelt. Dan moet je maar even in de code kijken, als je wilt weten hoe ik dat gedaan heb. Die homepage was trouwens wel m'n eerste CSS-probeersel, dus het kan zijn dat er overbodige dingen in staan en ik was destijds in de veronderstelling dat je een XHTML-doctype moest gebruiken als je de lay-out via CSS ging opbouwen.

[ Voor 19% gewijzigd door Verwijderd op 25-08-2006 19:26 ]

[MBV]

Is het menu dynamisch? Zoniet, dan kan je toch gewoon elk <ul> tag zijn eigen id geven, en absoluut positioneren?
Als hij wel dynamisch is, kan je zoiets doen:

HTML:

<tr>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
</tr>

vervolgens geef je met CSS aan dat de spacers de beschikbare ruimte moeten opvullen. Ik weet het niet zeker, maar met width:25% kon je wel eens een heel eind komen.

Zou ook met ul/li moeten werken, maar daar hoe je dat aan CSS uit moet leggen...

offtopic:
waarom is HTML/CSS zo bagger om op te maken. Met Qt Designer, of QT met de hand heb ik dit in 2 min in elkaar zitten... zoals zoveel dingen

[ Voor 20% gewijzigd door MBV op 25-08-2006 22:59 ]

[Setragasj]

MBV schreef op vrijdag 25 augustus 2006 @ 22:57:
Is het menu dynamisch? Zoniet, dan kan je toch gewoon elk <ul> tag zijn eigen id geven, en absoluut positioneren?
Als hij wel dynamisch is, kan je zoiets doen:

HTML:

<tr>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
</tr>

vervolgens geef je met CSS aan dat de spacers de beschikbare ruimte moeten opvullen. Ik weet het niet zeker, maar met width:25% kon je wel eens een heel eind komen.

Zou ook met ul/li moeten werken, maar daar hoe je dat aan CSS uit moet leggen...

offtopic:
waarom is HTML/CSS zo bagger om op te maken. Met Qt Designer, of QT met de hand heb ik dit in 2 min in elkaar zitten... zoals zoveel dingen

Zo krijg je dus 9 kolommen waarvan er 4 25% zijn?
Je bent wel op weg, maar aangezien meneer TS het liever niet met tabellen wilt doen..

Alsnog:

Cascading Stylesheet:

.menuitem {
  width:20%;
  text-align:center;
}

HTML:

<table width="300">
<tr>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
</tr>
</table>

Als het dynamisch is kun je aan de hand van het aantal menuitem die procenten per tabel berekenen en die naast de class, ook een style="<?phporwhatever print($percent); ?>"

Uh... Zoiets ofzo. het is al laat

-EDIT---

Uiteraard moet je de eerste kolom links en de laatste kolom rechts uitlijnen as you wish

[ Voor 3% gewijzigd door Setragasj op 25-08-2006 23:12 ]

[DerKleinePunkt]

MBV schreef op vrijdag 25 augustus 2006 @ 22:57:
Is het menu dynamisch? Zoniet, dan kan je toch gewoon elk <ul> tag zijn eigen id geven, en absoluut positioneren?
Als hij wel dynamisch is, kan je zoiets doen:

HTML:

<tr>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
  <td class="spacer"></td>
  <td>titel</td>
</tr>

vervolgens geef je met CSS aan dat de spacers de beschikbare ruimte moeten opvullen. Ik weet het niet zeker, maar met width:25% kon je wel eens een heel eind komen.

Zou ook met ul/li moeten werken, maar daar hoe je dat aan CSS uit moet leggen...

offtopic:
waarom is HTML/CSS zo bagger om op te maken. Met Qt Designer, of QT met de hand heb ik dit in 2 min in elkaar zitten... zoals zoveel dingen

Waarom is het zo bagger, omdat je nu volgens de regels moet werken en mensen dit nooit willen
Uit eigen ervaring, de eerste paar keer gaat Kultuur Uit Twente, maar daarna wil je niet anders.

Maar ontopic, MBV heeft een goed punt wanneer je menu niet dynamisch is kun je het met paddings oplossen. Een tweede oplossing welke ik vaak gebruik zijn image maps. Werkt perfect bij niet dynamische menu's.

[MBV]

Setragasj schreef op vrijdag 25 augustus 2006 @ 23:09:
[...]

Zo krijg je dus 9 kolommen waarvan er 4 25% zijn?
Je bent wel op weg, maar aangezien meneer TS het liever niet met tabellen wilt doen..

Alsnog:

Cascading Stylesheet:

.menuitem {
  width:20%;
  text-align:center;
}

HTML:

<table width="300">
<tr>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
  <td class="menuitem">titel</td>
</tr>
</table>

Als het dynamisch is kun je aan de hand van het aantal menuitem die procenten per tabel berekenen en die naast de class, ook een style="<?phporwhatever print($percent); ?>"

Uh... Zoiets ofzo. het is al laat

-EDIT---

Uiteraard moet je de eerste kolom links en de laatste kolom rechts uitlijnen as you wish

Waar de TS mee zit is dat hij de ruimte tussen de teksten gelijk wil hebben. Duurde ook bij mij even voordat dat lampje ging branden

DerKleinePunkt schreef op vrijdag 25 augustus 2006 @ 23:32:
[...]


Waarom is het zo bagger, omdat je nu volgens de regels moet werken en mensen dit nooit willen
Uit eigen ervaring, de eerste paar keer gaat Kultuur Uit Twente, maar daarna wil je niet anders.

Qt designer is veel flexibeler dan CSS. Ook als je geen berekeningen gebruikt in je groottes. Dingen waar je in CSS veel trucs voor uit moet halen, pak-em-beet de 3-col layout, is heel makkelijk te doen met Qt. Zowel Wysiwyg als handmatig coden.

[Technicality]

MBV schreef op zaterdag 26 augustus 2006 @ 00:06:
[...]

Waar de TS mee zit is dat hij de ruimte tussen de teksten gelijk wil hebben. Duurde ook bij mij even voordat dat lampje ging branden
[...]

Qt designer is veel flexibeler dan CSS. Ook als je geen berekeningen gebruikt in je groottes. Dingen waar je in CSS veel trucs voor uit moet halen, pak-em-beet de 3-col layout, is heel makkelijk te doen met Qt. Zowel Wysiwyg als handmatig coden.

offtopic:
De korte demo op de Qt site doet mij vermoeden dat het hier niet om webdesign gaat, dus waarom haal je Qt uberhaupt aan? Vooralsnog moeten we het doen met het scheiden van content en vorm voor zoekmachines, pda's, screenreaders, etc etc. Dat dat met een techniek van meer dan 10 jaar oud gaat, so be it, maar ga alsjeblieft niet appels met peren vergelijken.

[MBV]

offtopic:
Sorry, niet helemaal duidelijk. CSS is zo irritant om dingen mee op te maken, een andere oplossing (die niet web-gerelateerd is) is veel flexibeler. Dit is er het ultieme voorbeeld voor, bijna onmogelijk in CSS, maar 10 klikken in Qt Designer, of 10 regels 'nutteloze' code om dit voor elkaar te krijgen. Dus naar mijn mening zuigt CSS gewoon En Qt is al bijna zo oud als C++, dus +- 10 jaar

[ Voor 6% gewijzigd door MBV op 26-08-2006 15:50 ]

[kaassouffle]

eerste en laatste item moeten tegen zijkanten staan toch?

Kan die met aparte class rechts/links uitlijnen (ipv die 'center')
in voorbeeld van MBV

[ Voor 7% gewijzigd door kaassouffle op 26-08-2006 17:22 ]

[MBV]

Bij mijn voorbeeld heb je geen links/rechts uitlijnen nodig, toch? De witruimte zit in de spacers, niet in de tags met inhoud.

[kaassouffle]

Bedoelde 'setragasj''s oplossing...
witruimte tussen knoppen gelijk.. maar ook knop links en knop rechts tegen zijkant aan..

[MBV]

volgens mij is de ruimte tussen de 1e en 2e knop groter dan tussen de 2e en 3e.
Zoieso heb je bij die oplossing het probleem dat 2 korte tekstjes naast elkaar een grotere witruimte geven dan 2 lange teksten.

[Verwijderd]

Al snel werd hier inderdaad duidelijk dat het niet 1-2-3 goed met enkel CSS te doen is

Daarom telt een JSje nu alle breedtes bij elkaar op, trekt dat af van de parent-width en geeft verdeelt dit verschil over de elementen. Et voila: het werkt, maar wel met JS

[SillyJW]

Even 1-2-3 een oplossing met css
(getest in ie6/ff1.5)

Door gebruik te maken van text-align: justify krijg je het effect dat je wil bereiken met je menu. Probleem wat vervolgens opgelost moet worden, is dat de tekst automagisch gewrapped moet worden. Ik heb dit opgelost door een extra item aan de list toe te voegen en deze te verbergen door overflow: hidden.

Een tweede probleem duikt op als je de boel accessible wil houden. Als de gebruiker de tekst te klein maakt, komt de linewrapper weer tevoorschijn. Dit is op te lossen door de linewrapper langer te maken. Als de gebuiker de tekst te groot maakt, loop je kans dat een menu-item ook gewrapped wordt. Aan de andere kant kun je je afvragen hoe zinnig het gaat zijn dat iemand je site wil bekijken in een 64 punt fontsize, terwijl je je menubreedte gefixed op 500px zet.

HTML:

<ul>
    <li>item1</li>
    <li>object2</li>
    <li>dit3</li>
    <li>nogeentjeerbij4</li>
    <li>item5</li>
    <li>invisiblelinewrapper</li>
</ul>

Cascading Stylesheet:

ul {    width: 500px;
        text-align: justify;
        height: 1em;
        overflow: hidden;
}
li {    display: inline;
}

_{Ik zie nu net trouwens in mijn online voorbeeldje dat je in firefox beide voorbeeldjes kunt schalen...}

[Verwijderd]

SillyJW schreef op zondag 27 augustus 2006 @ 12:43:
Even 1-2-3 een oplossing met css
(getest in ie6/ff1.5)

Door gebruik te maken van text-align: justify krijg je het effect dat je wil bereiken met je menu. Probleem wat vervolgens opgelost moet worden, is dat de tekst automagisch gewrapped moet worden. Ik heb dit opgelost door een extra item aan de list toe te voegen en deze te verbergen door overflow: hidden.

Een tweede probleem duikt op als je de boel accessible wil houden. Als de gebruiker de tekst te klein maakt, komt de linewrapper weer tevoorschijn. Dit is op te lossen door de linewrapper langer te maken. Als de gebuiker de tekst te groot maakt, loop je kans dat een menu-item ook gewrapped wordt. Aan de andere kant kun je je afvragen hoe zinnig het gaat zijn dat iemand je site wil bekijken in een 64 punt fontsize, terwijl je je menubreedte gefixed op 500px zet.

HTML:

<ul>
    <li>item1</li>
    <li>object2</li>
    <li>dit3</li>
    <li>nogeentjeerbij4</li>
    <li>item5</li>
    <li>invisiblelinewrapper</li>
</ul>

Cascading Stylesheet:

ul {    width: 500px;
        text-align: justify;
        height: 1em;
        overflow: hidden;
}
li {    display: inline;
}

_{Ik zie nu net trouwens in mijn online voorbeeldje dat je in firefox beide voorbeeldjes kunt schalen...}

Maar nu staat het linker menu item weer niet links tegen de kant aan

[SillyJW]

Hoe bedoel je dat? Ter illustratie een 1px border om het menu heen gezet. Daar staat het linkeritem strak tegenaan.

screenshot:

[MBV]

Da's een creatieve. Nu nog één regeltje erbij: padding-left: 0px. DOM Inspector zegt dat die nog op 40px staat bij 'computed style'. Waar dat vandaan komt weet ik niet, maar als je 'padding-left: 0px' in de dom-inspector toevoegt geeft hij hem perfect weer

edit:
te lang met DOM-inspector aan het spelen geweest, zo te zien . Ergens komt een padding vandaan, geen idee waarvandaan. ul { padding-left: 0px} zou de truc moeten zijn.

[ Voor 26% gewijzigd door MBV op 27-08-2006 13:13 ]

[SillyJW]

Oh zo. Ahum, positionering van een UL zag ik niet echt als een probleem.
Als je dat echt zo vervelend vind, zet je toch de padding/ margin op 0px?

Cascading Stylesheet:

ul {    width: 500px;
        text-align: justify;
        height: 1em;
        overflow: hidden;
        margin: 0px;
}

[ Voor 29% gewijzigd door SillyJW op 27-08-2006 13:37 ]

[MBV]

nee, dat helpt niet. Bij mij wordt bínnen de border van de UL een padding getoond van 40px. Dus padding:0px, margin zal niks helpen
Als ik kijk waar die 40px vandaan komt, zie ik dat dat resource: is, waar padding-start-value op 40px staat. Dat is kennelijk de standaardwaarde voor indenten van een list-item ofzo. Hoe het komt dat hij bij jouw wel goed wordt weergegeven is me een raadsel.

[SillyJW]

en

Cascading Stylesheet:

* {
    margin: 0px;
    padding: 0px;
}

help niet?

[MBV]

Dat helpt wel, maar is erg smerig. Mijn oplossing werkt ook (In FF, IE heeft geen DOM Explorer ). Maar de margin zal dus niet helpen, padding wel. Maar dat kan de TS inmiddels wel terugvinden, lijkt me

[kaassouffle]

SillyJW schreef op zondag 27 augustus 2006 @ 13:06:
Hoe bedoel je dat? Ter illustratie een 1px border om het menu heen gezet. Daar staat het linkeritem strak tegenaan.

screenshot:
[afbeelding]

Links staat ie bij mij ook niet tegen de kant..
Firefox 1.5.0.6 // Mac OSX 10.4.7

[SillyJW]

Ik heb in m'n voorbeeldje nu de padding en margin op 0px gezet. Beter?

edit:
padding en margin van de UL staat nu ook op 0px.

[ Voor 45% gewijzigd door SillyJW op 29-08-2006 10:09 ]

[kaassouffle]

http://nwillem.nl/dev/got/spread.html ??

nope...

[MBV]

Je vergeet de énige belangrijke regel: ul { padding:0}.
Als bewijs een screen-shot:
De 'goede' css:

Cascading Stylesheet:

ul {    border: 1px solid #000;
    width: 500px;
    text-align: justify;
    height: 1em;
    overflow: hidden;
    margin: 0px;
    padding-left: 0px; /*voor de 5e keer gezegd*/
}
li {    margin: 0px;
    padding: 0px;
    display: inline;
}
.fixed {
    font-size: 12pt;
}

Die geeft bij mij dus niet de foute witruimte links. Hoe het kan dat jij wel de goede versie krijgt zónder die regel is mij een raadsel: een li heeft toch altijd een indent?

edit:
Ah, jij gebruikt alleen IE als test. Die zal dat indenten wel regelen met een margin op de LI

[ Voor 25% gewijzigd door MBV op 28-08-2006 10:38 ]

[disjfa]

Enige probleem is dat text-align:justify alleen de laatste regen geheel over de hele breedte neer zet. Hoe het hier staat komt alleen uit als je een 500px breede ul hebt aangezien de texten bij elkaar precies 500px zijn

Als je hem breder maakt is hij weer niet 100% breed

[Verwijderd]

disjfa schreef op maandag 28 augustus 2006 @ 10:47:
Enige probleem is dat text-align:justify alleen de laatste regen geheel over de hele breedte neer zet. Hoe het hier staat komt alleen uit als je een 500px breede ul hebt aangezien de texten bij elkaar precies 500px zijn

Als je hem breder maakt is hij weer niet 100% breed

Hoe bedoel je dat? Ik heb MBV's oplossing ook even bekeken en heb em hier bv. 700px breed. Dat geeft toch nog steeds het gewenste resultaat? 400px, 500px of 700px het gaat allemaal goed. Als je nog breder wil dan moet je gewoon je 'hidden' li tekst wat langer maken. Het is natuurlijk niet de ultieme oplossing met die extra li maar ik vind het tot nu toe toch de beste.

[ Voor 9% gewijzigd door Verwijderd op 28-08-2006 13:44 ]

[Verwijderd]

SillyJW schreef op zondag 27 augustus 2006 @ 12:43:
Even 1-2-3 een oplossing met css
(getest in ie6/ff1.5)

Wowzers! Onwijs bedankt en goed gevonden.

[MBV]

Ik vind dat hiddenwrapper gebeuren eigenlijk best smerig. Je kan beter geen tekst erin zetten, en dat ding de volgende style geven:

Cascading Stylesheet:

li.wrapper{
  padding-right: 100%;
}

Werkt in Firefox, niet getest in IE.
Anders zie je in Google ineens "yadiyaditiseenwrappertekst" terug komen, niet echt netjes

[ Voor 17% gewijzigd door MBV op 30-08-2006 13:25 ]