Horizontale balk compleet opvullen

[Beatboxx]

Ik ben in een discussie verwikkeld met een klant, en voordat ik mijn gelijk blijf volhouden wil ik toch jullie raadplegen of er een andere optie is.

De situatie is als volgt: Ik ontwikkel een website met een vast aantal menu-items. Deze worden geplaatst in een horizontale balk met een grijze achtergrond. Ik druk de grootte van de text uit in em's, en de breedte van de balk in procenten. Nu zullen jullie begrijpen dat als die menu-items op mijn scherm met 1920px breedte er precies in passen, dat niet gaat passen op een kleiner scherm. Daarom pas ik de breedte van de balk en de afstand tussen de menu-items in stapjes van 80px zo aan, dat het altijd precies blijft passen (Down to 900px breedte). Op sommige computers/browsers worden die fonts misschien wel iets kleiner gerenderd en omdat ik nog steeds stappen van 80px heb is het nooit mogelijk om de menu-items precies te laten passen in die balk. Mijn klant wil echter dat de afstand van het laatste menu-item tot het einde van die balk precies even groot is als de afstand tussen alle menu-items. Mijns inziens is dit compleet onmogelijk, of zie ik iets over het hoofd?

[Koenvh]

offtopic:
Scherm weergeven als de resolutie lager is dan 1920px

Laatste menu-item uit laten rekken tot het einde geen optie?

[Beatboxx]

Nee, ze moeten allemaal min of meer even groot zijn.

[Flowmo]

Dat gaat niet. Elementen met variabele breedte in een container met variable breedte en tussen de items variabele margins? Dat lukt je niet met CSS.

Wat je wel zou kunnen doen is met Javascript de breedte van de container ophalen, de totale breedte van alle items en het verschil delen door het aantal items. Dan hou je een getal over wat je als marge tussen de items kan plaatsen.

[Beatboxx]

Hmm, nah. Ik kan geen javascript en om me nu in allemaal - vast zeer interessante - tutorials te gaan verdiepen is me iets te veel van het goeie..

[TheNephilim]

Sowieso moet je niet willen werken met 1920 pixels in de breedte, of je moet een responsive layout hebben.

Wij hebben hier altijd een 'container' van 980 pixels breed waarin de werkelijke content zit. Daarbuiten kan de layout wel verder doorlopen zodat het schermvullend is, maar alles wat er toe doet zit binnen die 980 pixels.

Een optie is om de elementen een breedte te geven in procenten. Bij (bijv.) 5 elementen moet dat 20% per element zijn. Dan krijg je wel een een menu over de gehele breedte.

Zoiets als dit: http://jsfiddle.net/kk2D3/

[Erkel]

Dus als ik het goed begrijp is het menu zo:

_______________________________________
| Item 1 | Spacer 1 | Item 2 | Spacer 2 | Item 3 |
---------------------------------------------------------------------
Als de resolutie hoger wordt, wordt de balk langer, en "groeien" de items mee? Dan kan je toch gewoon alles een % breedte mee geven? Als het aantal items vast staat, in dit geval 100 / (3 items + 2 spacers) = 20%?

[Beatboxx]

De spacer is gewoon meegeven als content: '|' in de li:before. Qua code is het dus zeg maar zo:

Cascading Stylesheet:

#hormenu li {
        float: left;
        margin-right: 20px; 
    }

    #hormenu li:before {
            content: '|';
            margin-right: 20px;
        }
        #hormenu li:first-child {
            margin-left: -20px; /* Het menu moet 20 pixels naar links worden verschoven zodat het precies goed staat in de menubar */           
        }

Dit zit in een ul die als width 100% meekrijgt, en die zit binnen de div 'menubar' die daadwerkelijk de grijze balk weergeeft waar het menu in moet. Die balk heeft ook een width van 100%, want die zit namelijk in de container 'page', waarin de content zit, en die container 'page' zorgt voor de whitespaces aan de linker- en rechterkant. De margin-left en margin-right worden nu door mijn responsive CSS steeds verkleint, naarmate de screen width kleiner wordt, maar het zou mooi zijn als die gewoon adaptive kleiner worden en zich dus aanpassen aan de breedte van de totale menubar. De breedtes van de menu-items zelf is eigenlijk vastgesteld dmv de lengte (Aantal chars dus, niet iets van een formaat) van de text, alleen de font-size en de margins aan de linker- en rechterkant van de li's zijn variabel. Hoe kan ik die adaptive laten aanpassen zodat alle li's precies passen binnen de ul?

EDIT: Even snel de jsfiddle van TheNephilim aangepast. Zo zou het ongeveer moeten worden, maar dan met constant gelijke afstanden links en rechts van de spacer: http://jsfiddle.net/kk2D3/7/

[ Voor 6% gewijzigd door Beatboxx op 11-12-2012 16:26 ]

[Bosmonster]

Alles (dus ook marges) opgeven in procenten (afhankelijk van het aantal items) met een overflow hidden voor als de tekst te lang wordt?

Snap niet zo goed wat je nu wilt. De items kunnen variabel zijn van breedte, afhankelijk van de content, maar je wilt ze wel uitvullen? Dat gaat je niet lukken zonder javascript. CSS kent geen logica en dat heb je hier wel nodig als ik het zo begrijp.

Maar goed, zodra je JS nodig hebt voor een menuutje, dan heb je waarschijnlijk bij het design al iets bedacht dat niet heel praktisch is.

[ Voor 17% gewijzigd door Bosmonster op 11-12-2012 16:28 ]

[OkkE]

Beatboxx schreef op dinsdag 11 december 2012 @ 16:09:
EDIT: Even snel de jsfiddle van TheNephilim aangepast. Zo zou het ongeveer moeten worden, maar dan met constant gelijke afstanden links en rechts van de spacer: http://jsfiddle.net/kk2D3/7/

Zoiets? http://jsfiddle.net/okke/kk2D3/10/

Edit: Is het niet ook de bedoeling dat Contact meer van de kant af staat?

[ Voor 10% gewijzigd door OkkE op 11-12-2012 17:06 ]

[Beatboxx]

Het moet er precies zo uit gaan zien:


(even klikken voor grotere versie). De breedte van die grijze balk is echter variabel, want responsive. Toch moet de hele balk worden opgevuld met menu-items, en moet ik dus de breedte tussen de spacer en de menu-items dus responsive maken. De vraag is alleen, hoe?

[BKJ]

Ben in de war, wil je nou een verticale (zoals in title) of horizontale balk?

[DiSiLLUSiON]

Is dit wat je bedoelt?

http://jsfiddle.net/RLSjd/

[Beatboxx]

Titel moet natuurlijk Horizontale balk zijn.

@Okke, dat lijkt op zoals het zou moeten zijn! Ik ga kijken wat ik daar mee kan!

[Beatboxx]

Ik kom er niet helemaal uit. Normaal heb ik:

[code=css]
#menu li {
margin-right: 20px;
}

#menu li:before {
content: '|';
margin-right: 20px;
}

de breedte van de ul is 1321px op mijn scherm en met beide margins op 20px, ziet dit er exact goed uit. Dus ik vervang beide margins door 1.51%, maar dan loopt het geheel helemaal de soep in. De spacer (content:'|';) krijgt helemaal geen margin. Enig idee hoe dit komt?

EDIT: Ik snap het principe van de CSS. Enige probleem, ondanks dat de font-size in em's is gezet, schaalt die volgens mij niet perfect mee. Als ik mijn scherm dus kleiner maak, wordt de tussenruimte kleiner maar blijft de font-size net zo groot waardoor het toch in een mum van een tijd niet meer in de balk past. Iemand een idee on how to solve that?

[ Voor 29% gewijzigd door Beatboxx op 12-12-2012 17:29 ]

[hiekikowan]

Heb je hier al eens mee gespeeld..? Font-sizes kan ook in %...