List item onzichtbare spacing?

[Gammort]

Ik ben bezig met een simpel projectje maar ik loop nu tegen een probleem aan dat ik niet kan verhelpen.

Voor het menu bovenin gebruik ik een <li> die ik op display:inline; heb gezet. Echter zit hier een spacing omheen die ik niet weg kan krijgen. De spacing aan de bovenkant zorgt er voor dat ik het menu niet dicht genoeg tegen de bovenkant kan plaatsen.

Ik heb het menu in een container zitten en ik heb al van alles geprobeerd met padding en margin, negatieve waarden etc. De oplossing die ik had was de container fixed zetten maar dit is niet handig aangezien de website automatisch het midden van het browservenster op zoekt.

Iemand een oplossing hier voor?

Thanks in advance

[NMe]

Floaten in plaats van inline forceren?

[frickY]

Doet het probleem zich toevallig alleen in IE voor?
Dan is het whitespace voor de </li>; schijf het geheel maar eens op 1 regel.

[Gammort]

NMe schreef op vrijdag 23 maart 2012 @ 14:22:
Floaten in plaats van inline forceren?

Kleine height en alleen float kan natuurlijk ook, hij heeft op dit moment al float trouwens maar daarbij ook nog eens inline.

Heb ergens een oplossing gevonden die het voor mij op dit moment prima doet.

Het schijnt dat de <ul> tag standaard ook een witregel meebrengt, ik heb dit opgelost door

ul {
font-size:0px;
}


Zul je altijd zien dat wanneer je besluit de vraag de wereld in te sturen je zelf het antwoord vrij snel vind

[NMe]

Inline elementen floaten? Does not compute.

[phex]

Je kan de de ul floaten en de li's inline plaatsen, of andersom. Maar beide op hetzelfde element is iets wat niet werkt inderdaad.

[Flowmo]

Inline elementen reageren ook niet op verticale margin. Zie bijvoorbeeld: http://jsfiddle.net/iainvdw/YsSsp/1/. Ik weet niet wat je wilt proberen maar je kan de li's floaten, dan kan je ze wel met margin en whatnot positioneren.

Edit: display:inline-block zou ook nog kunnen. Voor IE7 (indien nodig) kan je dan de *+html "hack" gebruiken om display:inline en min-height:0 te serveren, dat zorgt voor hetzelfde effect.

[ Voor 29% gewijzigd door Flowmo op 23-03-2012 16:19 ]

[Luuk1983]

Cascading Stylesheet:

li {
    float:left;
    
}

Gewoon zo heb je toch geen spacings?

[ Voor 25% gewijzigd door Luuk1983 op 23-03-2012 16:19 ]

[Verwijderd]

Wellicht een handige tip:

Ik gebruik voor dergelijke menu's soms block formatting context, waarbij je het laatste element in de reeks een overflow:hidden; meegeeft en de float weghaalt. Op die wijze neemt het laatste element de resterende ruimte in, wat in sommige gevallen heel handig is. Een interessante bijkomstigheid is dat je hiermee niet een afsluitende div nodig hebt met een clear:both;. Het parent element neemt gewoon de hoogte in van het element met block formatting context.

Display:inline-block gebruik ik persoonlijk zelden, juist omdat je dan weer voor IE7 (wat wij standaard ondersteunen) moet gaan lopen hacken met hasLayout.

Handige site hierover: Control block formatting context.

[R4gnax]

NMe schreef op vrijdag 23 maart 2012 @ 14:35:
Inline elementen floaten? Does not compute.

Does compute, als je rekening moet houden met IE6. Hiermee voorkom je namelijk de bekende double floated margin bug. Verder moet volgens de specs een floating element altijd als block level geïnterpreteerd worden. Alle browsers houden zich daaraan, dus heeft het verder geen nadelige gevolgen.

Verwijderd schreef op zaterdag 24 maart 2012 @ 08:15:
Wellicht een handige tip:

Ik gebruik voor dergelijke menu's soms block formatting context, waarbij je het laatste element in de reeks een overflow:hidden; meegeeft en de float weghaalt.

De overflow gaat op de container, niet op het laatste item. Verder is dat niet zo'n slimme methode om generiek toe te passen wanneer ook content die buiten de box uitsteekt (gepositioneerde elementen, popover overlays, zelfs box-shadows) goed moet blijven werken.

Beter is om in IE6/7 layout te triggeren op een side-effect-free manier, zoals via de zoom property, om zo een block formatting context aan te maken en dan voor de betere browsers de functionaliteit van een block formatting context (d.w.z. float/margin containment) na te maken m.b.v. pseudo-elementen.

Cascading Stylesheet:

.bfc { zoom: 1; }
.bfc:before, .bfc:after { clear: both; content: ""; display: table; }

Verwijderd schreef op zaterdag 24 maart 2012 @ 08:15:
Display:inline-block gebruik ik persoonlijk zelden, juist omdat je dan weer voor IE7 (wat wij standaard ondersteunen) moet gaan lopen hacken met hasLayout.

Je hoeft echt maar betrekkelijk weinig te werken met het IE6/7 layout mechanisme. Zolang je CSS goed in elkaar zit zullen er slechts een beperkt aantal classes zijn waar je het op nodig hebt. Voornamelijk classes die structurele layout afhandelen: block formatting contexts / containing blocks, inline lists, tiles, columns en dat was het wel zo ongeveer.

Verwijderd schreef op zaterdag 24 maart 2012 @ 08:15:
Handige site hierover: Control block formatting context.

Dat artikel is gedateerd op 6 juli 2006 en loopt hopeloos achter.

[Verwijderd]

Ik denk dat we iets anders bedoelen voor wat betreft die overflow, R4gnax. Ik bedoel dus dit bijvoorbeeld.

[Ghehe]

Geen idee of je het gedaan hebt maar heb je in je body de margin op 0 gezet?

code:

body {
    margin: 0;
}

Voor:


Na:


(Moest je de code willen, klikje)

[NMe]

R4gnax schreef op zaterdag 24 maart 2012 @ 16:25:
[...]

Does compute, als je rekening moet houden met IE6. Hiermee voorkom je namelijk de bekende double floated margin bug. Verder moet volgens de specs een floating element altijd als block level geïnterpreteerd worden. Alle browsers houden zich daaraan, dus heeft het verder geen nadelige gevolgen.

Rekening houden met IE6 doe ik allang niet meer tenzij er héél goed voor betaald wordt. En juist omdat floated elements toch altijd als block-level elements worden geïnterpreteerd vind ik het een brakke combinatie van styling. Die display: inline zou dan hooguit in een aparte ie6.css thuishoren.

[R4gnax]

Verwijderd schreef op zaterdag 24 maart 2012 @ 21:57:
Ik denk dat we iets anders bedoelen voor wat betreft die overflow, R4gnax. Ik bedoel dus dit bijvoorbeeld.

Heb het nog een keer gelezen en nu klikte het. Dat is inderdaad een manier om het laatste item de volledige regel in te laten nemen, maar je krijgt daar (bijna) hetzelfde side-effect dankzij de overflow:hidden. (Hopelijk wil je dit dus niet gebruiken voor bijvoorbeeld een uitklapbaar menu.)

Buiten display:box of display:table is er alleen ook zo snel weer niet een manier om dat laatste element de rest van de regel op te laten slokken. Flexboxes vallen sowieso af; die zijn buiten webkit browsers compleet onbruikbaar en de specificatie is net weer compleet op z'n kant gegooid. Je zou voor IE7- de BFC methode kunnen gebruiken via de zoom property en dan voor betere browsers het menu kunnen renderen met display:table en display:table-cell, waarbij je de breedte van de laatste cell vrij laat om te groeien.

NMe schreef op zondag 25 maart 2012 @ 00:10:
[...]

Rekening houden met IE6 doe ik allang niet meer tenzij er héél goed voor betaald wordt. En juist omdat floated elements toch altijd als block-level elements worden geïnterpreteerd vind ik het een brakke combinatie van styling. Die display: inline zou dan hooguit in een aparte ie6.css thuishoren.

Ik zeg ook niet dat het een best practice is om het meteen in je master styles op te nemen. Zelf steek ik dit soort dingen ook liefst in een conditionele stylesheet. In principe houd ik ook geen rekening met IE6, maar ja; als je moet, dan moet je.

[ Voor 48% gewijzigd door R4gnax op 25-03-2012 13:51 ]

[Gammort]

Ik zie hier een hoop nettere oplossingen dan de mijne die in dit geval prima werkt.. bedankt voor jullie input allemaal

[Bosmonster]

Positioneer dat menu gewoon absoluut rechtsboven en float de li's links.