[CSS] Float om een ander element heen

[TheNephilim]

Is het mogelijk om een lijst met LI elementen om een ander element heen te laten floaten? Wat zoeken op Google leverde niks op, de zoekterm die ik zou moeten gebruiken is me ook niet duidelijk.

De bedoeling is een DIV met daarin een menu en in het midden een logo. Nu is het mogelijk om gewoon 2 verschillende menu containers te maken (links & rechts), maar is het mogelijk dat de LI's om het logo heen floaten, dus past het niet links, dan naar rechts zonder dat ze achter of voor het logo komen.

Zelf denk ik dat het niet mogelijk is, maar je weet het nooit, dus ik dacht ik vraag het toch

[OkkE]

Met gebruik van o.a. de nth-child selector zou je wel een eind moeten kunnen komen, lijkt me: http://jsfiddle.net/TBMj8/

Of bedoel je iets anders?

[ Voor 11% gewijzigd door OkkE op 26-03-2012 17:47 ]

[_Thanatos_]

Je bent op zoek naar de mythische "float:center"

Helaas, dat bestaat niet. Ik vrees dat je iets creatiever moet gaan denken, of een andere layout moet kiezen/voorstellen.

[TheNephilim]

OkkE schreef op maandag 26 maart 2012 @ 17:39:
Met gebruik van o.a. de nth-child selector zou je wel een eind moeten kunnen komen, lijkt me: http://jsfiddle.net/TBMj8/

Of bedoel je iets anders?

Volgens mij niet wat ik bedoel, maar wie weet kan ik er wat mee, ga ik proberen. Thnx!

_Thanatos_ schreef op maandag 26 maart 2012 @ 21:19:
Je bent op zoek naar de mythische "float:center"

Helaas, dat bestaat niet. Ik vrees dat je iets creatiever moet gaan denken, of een andere layout moet kiezen/voorstellen.

Haha, nou je ziet wel eens afbeeldingen waar tekst omheen loopt, ik denk misschien is er iets omdat met een vast element ook zo te doen.

Maar geen probleem, als het idee van OkkE niet werkt maak ik gewoon 2 menu vlakken, één links en één rechts. Probleem opgelost! Het had leuk geweest als het kon zoals ik voorstelde, maarja... inderdaad mythisch

[OkkE]

TheNephilim schreef op maandag 26 maart 2012 @ 23:54:
Volgens mij niet wat ik bedoel, maar wie weet kan ik er wat mee, ga ik proberen. Thnx!

Mijn idee zal denk ik niet zijn wat je zoekt nee, maar misschien geeft het wel (met wat tweaking) het gewenste resultaat? Heb je anders een screenshot/voorbeeldje van hoe je het er uit wil laten zien?

Haha, nou je ziet wel eens afbeeldingen waar tekst omheen loopt, ik denk misschien is er iets omdat met een vast element ook zo te doen.

Adobe's voorstel voor CSS Regions zou een hoop kunnen oplossen:
http://www.adobe.com/devnet/html5/articles/css3-regions.html

Maar geen probleem, als het idee van OkkE niet werkt maak ik gewoon 2 menu vlakken, één links en één rechts. Probleem opgelost! Het had leuk geweest als het kon zoals ik voorstelde, maarja... inderdaad mythisch

Ik denk dat twee losse lists wel beter is voor een normale website (i.t.t. een proof-of-concept / WebKit only).

[TheNephilim]

Interressant, maar inderdaad voor dergelijke nieuwe functies bruikbaar zijn in een productie omgeving, zijn we enkele jaren verder denk ik Zolang Microsoft hun browser niet automatisch update...

Hier een screenshot van het idee:


Het logo staat normaal gesproken in het blokje, die heb ik even weggehaald.

[OkkE]

In plaats van je navigatie opdelen in twee ULs, zou ik het dan denk ik eerder zo oplossen:
http://jsfiddle.net/zc4Tb/

[TheNephilim]

Dat ziet er wel erg mooi uit, maar het is een dynamisch menu, dus de grootte van de <li> is niet gelijk. Dan zou ik een vaste breedte op moeten geven per <li> en dat gaat niet werken in combinatie met de groene balk onder de tekst
Behalve dat moet het links helemaal tegen de kant staan en ook rechts. Als ik dat precies pas krijg ik problemen in verschillende browsers, bij de één past het wel en de ander niet.

Wel heel erg bedankt voor de aangedragen oplossing, creatief is het zeker en ik heb er vast nog eens wat aan! ^^

[OkkE]

Wat ook nog zou kunnen, is alle LIs die rechts moeten komen een class geven en die float:right; meegeven en de width op auto laten. Alleen is dan van de rechter elementen de volgorde in de source code omgedraaid van de presentatie.

Het is uiteindelijk een ontzettend lastig ontwerp om geheel dynamisch te houden en zou ik eerlijk gezegd een andere vormgeving overwegen. Je kunt met CSS of met PHP/ASP prima zeggen "splits na het 4e item", maar wat nu als de teksten van die items zo lang worden (of de positie van de items anders) dat er maar 3 items links van het logo passen?

[R4gnax]

TheNephilim schreef op dinsdag 27 maart 2012 @ 10:17:
Interressant, maar inderdaad voor dergelijke nieuwe functies bruikbaar zijn in een productie omgeving, zijn we enkele jaren verder denk ik Zolang Microsoft hun browser niet automatisch update...

Het is juist Microsoft die met de IE10 platform previews exact het gewenste gedrag van de TS heeft geimplementeerd met zogenaamde 'positioned floats'. Dit hebben ze ook als een voorstel naar het W3C ingestuurd en inmiddels is dit door een working group opgepakt en samen met een voorstel van Adobe verwerkt in de CSS Exclusions and Shapes Module Level 3. MS maakt in de nieuwste versie van hun test drive demo sites voor de IE10 platform preview dan ook gebruik van de nieuwe CSS3 exclusions syntax.

Tenzij Google en Mozilla ineens heel snel dit nog in gaan bouwen zal het juist Microsoft zijn die deze heilige graal gestandardiseerd en wel als eerst in een browser heeft zitten. Eigenlijk best ironisch als je hun track record bekijkt...

[_Thanatos_]

*ziet screenshot*

Ah. Inderdaad ik had gelijk. Je zoekt float:center

Maar serieus, kun je dit niet oplossen door het logo gewoon in de <li>'s te gooien? Of wat dacht je van de vierde <li> extra breed maken. Ja ik weet, dat is niet dynamisch. Maar bekijk het nou even praktisch: zulke items, gaan die echt veranderen? Je wil een redacteur/contentbeheerder niet per se 100% vrijheid geven, dat werkt niet, want dan gaan ze domme dingen doen.

Maakt de code vanuit dit design en leg restricties op voor de redacteur, dan ben je klaar. Ik had hier binnen een uur mee klaar geweest. Niet onnodig tijd steken in zoiets.

Of je doet het voor de uitdaging, dat kan natuurlijk ook
Je kunt het misschien ook oplossen met CSS3 Columns, waarbij de gap tussen de kolommen even breed is als het logo. Ik noem maar wat. Dat werkt op bijna geen enkele browser (Opera en misschien inmiddels Firefox), maar als je zoveel moeite in iets als dit steekt, denk ik ook niet dat dat het doel is...