clear en float op meerdere plaatsen werken tegen

[Hipska]

Op de pagina staan links enkele divjes die dmv float:left; clear:left; link uitgelijnd staan als het ware in een sidebar. Daarna komt een div die een left-margin heeft zodat zijn content (de hoofdcontent dus) naast de zijbalk terecht komt.

Maar nu heb ik gemerkt door inhoud in die main div die ook gebruik maakt van clear en float eigenschappen (in dit geval clear:both; en float:left; van een editor (wymeditor) ) Dat deze niet met elkaar gaan samenwerken, maar net andersom. Zo komt het balkje met knoppen veel lager te staan dan verwacht, net op de plaats waar links een zijbalk div eindigt. Idem voor het content veld zelf.

clear en float weghalen bij die zijbalk divs zorgt ervoor dat ze nog steeds mooi onder elkaar staan en de editor ziet er nu ook juist uit. Echter komt de main div nu onder de zijbalk terecht ipv ernaast.

Het lijkt me een vrij algemeen probleem te zijn, echter heb ik nog niet een goede uitleg of passende oplossing gevonden.

ps: Ik zou graag niet met een extra "zijbalk" div werken waar al die aparte divjes in moeten komen.

[Plague]

Ehm, ik denk dat de 'zijbalk' die je bedoelt ongeveer de enige oplossing is. Ik zou dat alleen een wrapper noemen:

HTML:

<div id="wrapperVoorLinkerDivs">
  <div id="EenLinksDivje">Bla bla bla</div>
  <div id="NogEenLinksDivje">Bla bla bla</div>
</div>
<div id="WrapperRechts">
  <div id="DivRechts">Bla bla bla</div>
  <div id="NogEenDivRechts">Bla bla bla</div>
</div>

Nu zet je de WrapperVoorLinkerDivs op float: left; clear: none;
Voor de WrapperRechts doe je hetzelfde: float:left; clear:none;

Eventueel kun je daar dan weer een wrapper voor het geheel omheen doen, om de afmetingen van de divs wat beter te controleren.

[Bosmonster]

Idd niet alle elementen los floaten, maar eerst je basis layout goed krijgen. In principe hoef je voor zoiets namelijk helemaal niks te clearen. Gewoon twee elementen naast elkaar, waarvan je de eerste left float (zijbalk) en je bent klaar.

[Hipska]

@Plague: Een wrapper div is datgene wat ik bedoelde het liefst niet te gebruiken. Het is toch vreemd om je html aan te passen omdat je plots rechts of links dingen wil staan hebben ipv erboven?

@Bosmonster: bedankt, maar als ik ze float:left doe, dan komen ze allemaal naast elkaar te staan. Dus denk ik dat ook jij met een wrapper bedoelt te werken?

Mijn vraag moet dus eerder zijn: Is het mogelijk om meerdere divs links te plaatsen zonder wrapper?

Mij was het gelukt door daar een clear bij te voegen, maar die gaat zoals vermeld breken met andere floats binnen die content div. Dus vroeg ik mij af of het mogelijk was om floats en clears die binnen een bepaalde div gebeuren af te schermen van floats en clears die buiten die div gebeuren. Dat ze elkaar dus niet beinvloeden als het ware.

[Gomez12]

Hipska schreef op dinsdag 26 oktober 2010 @ 00:20:
Dus vroeg ik mij af of het mogelijk was om floats en clears die binnen een bepaalde div gebeuren af te schermen van floats en clears die buiten die div gebeuren. Dat ze elkaar dus niet beinvloeden als het ware.

Je bedoelt door ze in een aparte div te wrappen?

[Hipska]

De float elementen die problemen hebben zitten namelijk al in een div (de 'main' div) en op hun beurt in nog een paar div's van wymeditor zelf.

Dus: Ja, kunnen die dan afgeschermd worden?

[Gomez12]

Hipska schreef op dinsdag 26 oktober 2010 @ 00:28:
Dus: Ja, kunnen die dan afgeschermd worden?

Je bedoelt dus eigenlijk of je een block-level element eromheen zou kunnen zetten als afscherming?

Zoals je het beschrijft wil je gewoon een wrapper-div hebben, enkel zeg je dat je die niet wil.
Dan denk ik dat je of je beschrijving moet veranderen of gewoon een wrapper-div gebruiken. Dat is namelijk exact wat je beschrijft.

[Plague]

Maar semantisch gezien klopt het toch veel beter om er een wrapper omheen te doen? Div = divider division = verdeling. Je wilt een linker en een rechter 'sectie' op je pagina, dus ook semantisch klopt het veel beter als je ze scheidt d.m.v. een wrapper.

Een alternatief zou kunnen zijn de ene divs links te floaten en de andere rechts, maar dat gaat je later opbreken. Waarom wil je geen wrapper divs?

Edit: Terug je bos in jij!

[ Voor 6% gewijzigd door Plague op 26-10-2010 00:48 ]

[Bosmonster]

div = division

Redelijk minor detail, maar het is feitelijk een semantiekloze blocktag bedoeld voor opmaak.

Er is geen semantische relatie tussen elementen binnen een div, dus een wrapper gebruiken heeft geen semantische waarde.

Maar aangezien deze juist bedoeld is om dit soort problemen op te lossen, snap ik niet zo goed waarom je het gebruik zou schuwen. Het is niet dat het 'mooier' is zonder wrapper ofzo, je maakt het jezelf alleen maar onnodig lastig.

[ Voor 134% gewijzigd door Bosmonster op 26-10-2010 00:49 ]

[Plague]

Hipska schreef op dinsdag 26 oktober 2010 @ 00:20:
Mij was het gelukt door daar een clear bij te voegen, maar die gaat zoals vermeld breken met andere floats binnen die content div. Dus vroeg ik mij af of het mogelijk was om floats en clears die binnen een bepaalde div gebeuren af te schermen van floats en clears die buiten die div gebeuren. Dat ze elkaar dus niet beinvloeden als het ware.

Ik denk dat je even moet beseffen waar divs voor bedoeld zijn en hoe ze werken. Een div is een 'blok', waarbinnen zich 'iets' bevind. Het 'iets' in het blok kan niet buiten het blok treden. (uitzonderingen met position: absolute daargelaten).
Als je het parent blok dus links float, zal alle 'iets' in dat blok blijven. Binnen dat blok kun je weer links, rechts of niet floaten, en dan wordt het dus binnen dat blok rechts of links uitgelijnd.

Bosmonster schreef op dinsdag 26 oktober 2010 @ 00:45:
div = division

Redelijk minor detail, maar het is feitelijk een semantiekloze blocktag bedoeld voor opmaak.

Er is geen semantische relatie tussen elementen binnen een div, dus een wrapper gebruiken heeft geen semantische waarde.

Maar aangezien deze juist bedoeld is om dit soort problemen op te lossen, snap ik niet zo goed waarom je het gebruik zou schuwen. Het is niet dat het 'mooier' is zonder wrapper ofzo, je maakt het jezelf alleen maar onnodig lastig.

offtopic:
Ik weet dat hier een apart topic voor loopt, maar ik ben het toch niet eens dat het een semantiekloos element is in dit geval. Er is wel degelijk een relatie tussen de content binnen de wrappers. Namelijk dat het allemaal aan de linker kant is gepositioneerd, en dus niet de 'main content' is (in een gemiddelde website ). Dat er nu natuurlijk nog geen computer is die dat verband legt in de praktijk, betekent niet dat er geen relatie of betekenis is tussen 'de linker content' en 'de rechter content'. Over het algemeen is er namelijk wel degelijk sprake van een relatie tussen alles binnen de linker content en de rechter content. Maargoed, dat maakt verder voor nu ook helemaal niet uit en laat ik het topic niet hiermee verneuken

[ Voor 42% gewijzigd door Plague op 26-10-2010 00:56 ]

[Bosmonster]

Het ging mij om het div element in z'n algemeenheid, niet wat je er als gebruiker mee doet. De enige "semantische waarde" die je er aan geeft is die gedefinieerd door je gebruik in de opmaak, zoals je zelf al zegt.

Maar echte semantiek is dit eigenlijk niet, het is opmaak. Semantisch gezien is het niet meer dan "een container met daarin andere containers". Een div geeft geen enkele informatie over wat er in die container zit of de relatie tussen items in de container, en dat is semantiek

Als er echt een relatie zou zijn tussen die items, dan moet je helemaal geen div gebruiken, maar bijvoorbeeld een UL en de div's daarin vervangen door LI's.

[ Voor 46% gewijzigd door Bosmonster op 26-10-2010 01:08 ]

[Plague]

Bosmonster schreef op dinsdag 26 oktober 2010 @ 01:02:
Het ging mij om het div element in z'n algemeenheid, niet wat je er als gebruiker mee doet. De enige "semantische waarde" die je er aan geeft is die gedefinieerd door je gebruik in de opmaak, zoals je zelf al zegt.

Maar echte semantiek is dit eigenlijk niet, het is opmaak. Semantisch gezien is het niet meer dan "een container met daarin andere containers". Een div geeft geen enkele informatie over wat er in die container zit of de relatie tussen items in de container, en dat is semantiek

Als er echt een relatie zou zijn tussen die items, dan moet je helemaal geen div gebruiken, maar bijvoorbeeld een UL en de div's daarin vervangen door LI's.

Daar heb je volkomen gelijk in!

[Hipska]

Gomez12 schreef op dinsdag 26 oktober 2010 @ 00:43:
[...]

Je bedoelt dus eigenlijk of je een block-level element eromheen zou kunnen zetten als afscherming?

Zoals je het beschrijft wil je gewoon een wrapper-div hebben, enkel zeg je dat je die niet wil.
Dan denk ik dat je of je beschrijving moet veranderen of gewoon een wrapper-div gebruiken. Dat is namelijk exact wat je beschrijft.

Ja, er is al een div (of ander block element) omheen, dus wil ik die best wel als wrapper gebruiken.

Plague schreef op dinsdag 26 oktober 2010 @ 00:48:
[...]
Als je het parent blok dus links float, zal alle 'iets' in dat blok blijven. Binnen dat blok kun je weer links, rechts of niet floaten, en dan wordt het dus binnen dat blok rechts of links uitgelijnd.
[...]

Ik wil best geloven dat voor float dit best op gaat, maar blijkbaar gaat een clear van een element buiten het blok wel zorgen voor problemen met een float op een element binnen dat blok.

[Hipska]

Iemand die een oplossing weet? Of ga ik écht links een wrapper moeten toevoegen voor de sidebar (welke trouwens toekomstige functionaliteit zal breken)? Of kan ik aan de divs die rond wymeditor staan iets aanpassen zodat ze zich gedragen als wrapper en dus de clear afschermen?

[moozzuzz]

Misschien moet je eens even wat code online zetten want in het ene verhaal heb je divjes die niet gewrapped zijn en nadien zitten ze ineens toch al gewrapped?

Is het nu een variatie op Plague in "clear en float op meerdere plaatsen werk..." of eerder toch wat ik eerst meende te begrijpen:

HTML:

<!-- pseudo code -->
<div>
   <div class="leftfloatingwithclearconstruction"></div>
   <div class="leftfloatingwithclearconstruction"></div>
   <div class="leftfloatingwithclearconstruction"></div>
   <div class="leftmargintruckje">main content met wymeditor</div>
</div>

[Plague]

Hipska schreef op donderdag 28 oktober 2010 @ 13:02:
Iemand die een oplossing weet? Of ga ik écht links een wrapper moeten toevoegen voor de sidebar (welke trouwens toekomstige functionaliteit zal breken)? Of kan ik aan de divs die rond wymeditor staan iets aanpassen zodat ze zich gedragen als wrapper en dus de clear afschermen?

Ik denk eerder dat je huidige opzet in de toekomst gaat breken Verder kunnen we weinig zonder dat je hier wat code neerzet, want het verhaal was in eerste instantie duidelijk, maar na deze post snap ik niet meer zo goed wat je wilt bereiken.

Simpelweg dit, toch:?

code:

___________________________
|       |                  |
| Left1 |  Main content    |
|       |                  |
________|                  |
|       |                  |
| Left2 |                  |
|       |                  |
___________________________

Met dit schoolvoorbeeld 2-column-layout zou ik het echt niet moeilijker maken dan het is. Er is een reden voor 'best practices'.

[Hipska]

Oke, de HTML code ziet er inderdaad uit zoals moozzuzz beschrijft. Dit voor alle duidelijkheid.

En als je naar het plaatje van Plague kijkt, dan 'hangt' die wymeditor toolbar in de main div ter hoogte van de scheiding tussen left1 en left2 en het invoerveld ter hoogte van het einde van left2.

[Hipska]

Zucht, heb ter einde raad maar eens alle sidebars in een container gestoken waarop float:left en clear:left staat. Nu gaat het contentveld van wymeditor nog steeds gaan hangen ter hoogte waar die sidebar onderaan stopt.

Dus die wrapper haalt dus niets uit in tegenstelling wat enkelen hier beweren.

Hoe kan ik het nu best oplossen?

[Hipska]

Even verduidelijken dan maar:

code:

+---------+------------------+
|         |  #Main           |
|#sidebar |                  |
|         |  +-------------+ |
|         |  | Wym-toolbar | |
|         |  |             | |
|         |  |             | |
+---------+  +-------------+ |
|         -  | Wym-content | |
|         -  +-------------+ |
+----------------------------+

Zo komt het er nu uit.. Zoals je ziet hangt die wymeditor content veld steeds abnormaal laag en dit terwijl de toolbaar enkel maar een enkele rij met buttons is.
De div#sidebar herbergt de aparte sidebar divjes van voordien en doet dus dienst als wrapper zoals jullie voorgesteld hadden.

Hoe kan het nu opgelost worden? Blijkbaar heb ik maar halve antwoorden gekregen en nog veel meer vragen dan dat ik voordien had.

[marko77]

Om de wym divjes dien je ook nog een mid wrapper te maken. Hoe zit de bijbehorende HTML nu in elkaar? De #Main kan ik lastig plaatsen op deze manier.

[Hipska]

Het komt ongeveer neer op deze structuur:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    ...
    <script type=text/javascript> 
        jQuery(function($) {
            $('textarea').wymeditor({ lang: 'nl' });
        });
    </script>
</head> 
 
<body> 

<div id=sidebar> 
    <div id=modules> 
        ...
    </div> 
    <div class=widget> 
        ... 
    </div> 
    <div class=widget> 
        ...
    </div> 
    
 
</div> 
 
<div id=main> 
        
    <form method=post> 
        <h1>Schrijf artikel</h1> 

        <p><label for=author>Titel</label><br> 
        <input name=title type=text></p> 

        <p><label for=url>Link</label><br> 
        <input name=url type=url></p> 

        <p><label for=category>Categorie</label><br> 
        <input name=category type=text></p> 

        <p><label for=content>Bericht</label><br> 
        <textarea name=content></textarea><br> 
        <input type=submit></p> 
    </form> 
</div>

</body> 
</html>

Ik kijk nog even of ik een voorbeeldje ergens online kan zetten..

EDIT: http://dl.dropbox.com/u/1349397/GoT/floats/test.html

[ Voor 3% gewijzigd door Hipska op 08-11-2010 21:52 . Reden: Nu met online voorbeeld ]

[Kajel]

Ten eerste: Iedereen die jou hier vertelde dat je je sidebar elementen allemaal in een algemene sidebarcontainer moet wrappen, had gelijk.
Ten tweede: Wat je er niet bij hebt verteld de hele tijd, is dat een onderdeel van de door het jquery-script gegenereerde editor, te laag komt te staan, nl de area waarin je de text edit (zonder de knoppenbalk). Als ik in FF Inspect Element doe op de editor, zie ik dat ie een heel reeks aan divs aanmaakt, met daarin weer een iframe met daarin een heel nieuwe <html> sectie. Die gegenereerde code is verantwoordelijk voor de te laag geplaatste textarea.

Als ik via FireBug die hele Wymeditor-div met inhoud verwijder, en de oorspronkelijke textarea weer aanzet, dan staat ie gewoon netjes bovenaan, net onder de rest van de form.

Hier zou je genoeg info aan moeten hebben om verder te kunnen.

[Hipska]

Nu heb jij me echt nog niets verteld dat ik nog niet wist hoor.

Ik vraag me gewoon af hoe ik het kan oplossen, en blijkbaar helpt die wrapper voor sidebar div echt niet veel..

En trouwens had ik het al de hele tijd over wymeditor en niet een textarea, zie ook mijn openingspost:

Hipska schreef op maandag 25 oktober 2010 @ 23:33:
Zo komt het balkje met knoppen veel lager te staan dan verwacht, net op de plaats waar links een zijbalk div eindigt. Idem voor het content veld zelf.

Ik weet ook wel dat een gewone textarea wel werkt zoals het hoort omdat daar geen float en/of clear op ingesteld is.

[Kajel]

Als ik Inspect Element doe, zie ik op het tekstvak dat door de Editor wordt gecreeerd ook geen float/clear staan hoor. Wym-prut creeert een toolbar en een tekstvak, dat tekstvak staat heel ver naar beneden toe. Als je dat wilt oplossen, moet je gaan kijken in de JS code die de Elementen genereert waaruit de editor bestaat.
Ik zou als ik jou was eens kijken naar een andere editor, zoals TinyMCE.

[Hipska]

Dat zou een beetje amateuristisch zijn, niet? Een andere editor nemen omdat hier en daar wat css conflicten geeft. Of is dit een normale praktijk in het webdesign gebeuren? En daarbij voldoet TinyMCE niet aan de verwachtingen.

Eerst werd me al aangeraden om een extra wrapper div rond de sidebar te doen die extra nutteloze html code opleverd en uiteindelijk het probleem niet oplost.

Wat als dit met een andere editor ook zo zou zijn? Welk lapmiddel gaat men dan mee afkomen?

Ik weet niet wat jou firebug jou allemaal laat zien, maar ik zie in die gegenereerde elementen enkel gewone standaard html code met css classes, en geen style attributen, dus het probleem gaan zoeken in de JS lijkt me dan ook behoorlijk onlogisch. Daarnaast zie ik in het css bestand van wymeditor hier en daar float of clear staan die eventueel betrekking kunnen hebben tot het probleem. Maar ikzelf heb niet genoeg de kennis van css om met die floats en clears te begrijpen waar het precies verkeerd gaat in mijn geval.

Ik ben er van overtuigt dat ik ook niet de eerste zou zijn met dit probleem, maar kan hier jammer niets over vinden op google, dus hoopte ik dat er hier op Tweakers wel mensen zouden zijn die mij kunnen helpen. Indien er mensen zijn die mij een andere site of bron kunnen aanbevelen waar men mij wel zou kunnen helpen, dan hoor ik dat graag!

[Gomez12]

Hipska schreef op dinsdag 09 november 2010 @ 23:49:
Dat zou een beetje amateuristisch zijn, niet? Een andere editor nemen omdat hier en daar wat css conflicten geeft. Of is dit een normale praktijk in het webdesign gebeuren? En daarbij voldoet TinyMCE niet aan de verwachtingen.

Eerst werd me al aangeraden om een extra wrapper div rond de sidebar te doen die extra nutteloze html code opleverd en uiteindelijk het probleem niet oplost.

Wat als dit met een andere editor ook zo zou zijn? Welk lapmiddel gaat men dan mee afkomen?

Wow, je pakt dus blijkbaar een script waarvan je de werking niet snapt. En dan ga je verwachten dat men er met een toverstaf wel even een oplossing voor kan toveren oid?

Die tips over wrapper-divs van mij zijn bijv gebaseerd op standaard werking. Ik ken dat hele wymeditor niet.
Ik ga uit van een normale behoorlijke editor of iemand die kennis heeft van wat hij gebruikt.
Maar blijkbaar als je daarvan uitgaat dan worden je oplossingen lapmiddelen genoemd?

Maar ikzelf heb niet genoeg de kennis van css om met die floats en clears te begrijpen waar het precies verkeerd gaat in mijn geval.

Dan zou ik je toch echt aanraden om het forum van wymeditor eens op te gaan zoeken. Want blijkbaar wil je specifieke support op een product van een 3e partij en wordt algemene support maar even afgedaan als lapmiddelen...

Indien er mensen zijn die mij een andere site of bron kunnen aanbevelen waar men mij wel zou kunnen helpen, dan hoor ik dat graag!

http://www.w3schools.com/

[Kajel]

Nogmaals: wrappers zijn geen nutteloze extra HTML. Dat het in dit geval niet helpt, wil niet zeggen dat het sowieso niet gewoon better practice is!

Wat betreft het gebruiken van een andere editor: Dat is geen lapmiddel, maar mijn advies op basis van het feit dat Wymeditor (een editor waarvan ik nog nooit gehoord had, en die met goede redenen een stuk minder wordt gebruikt dan TinyMCE volgens mij) je beoogde styles overhoop gooit.

Wat betreft de afwezigheid van styles in de gegenereerde HTML: Je zegt zelf toch dat er wel classes verbonden zijn aan de gegenereerde elementen, en dat er een stylesheet bij de editor zit? Waar die styles gedefinieerd staan, is in dit geval natuurlijk gewoon poteeto potaato. Feit is dat die styles van Wymeditor, jouw CSS over zeik laten gaan.

[mcDavid]

Hipska schreef op dinsdag 09 november 2010 @ 23:49:
Dat zou een beetje amateuristisch zijn, niet? Een andere editor nemen omdat hier en daar wat css conflicten geeft. Of is dit een normale praktijk in het webdesign gebeuren? En daarbij voldoet TinyMCE niet aan de verwachtingen.

Eerst werd me al aangeraden om een extra wrapper div rond de sidebar te doen die extra nutteloze html code opleverd en uiteindelijk het probleem niet oplost.

Wat als dit met een andere editor ook zo zou zijn? Welk lapmiddel gaat men dan mee afkomen?

Ik weet niet wat jou firebug jou allemaal laat zien, maar ik zie in die gegenereerde elementen enkel gewone standaard html code met css classes, en geen style attributen, dus het probleem gaan zoeken in de JS lijkt me dan ook behoorlijk onlogisch. Daarnaast zie ik in het css bestand van wymeditor hier en daar float of clear staan die eventueel betrekking kunnen hebben tot het probleem. Maar ikzelf heb niet genoeg de kennis van css om met die floats en clears te begrijpen waar het precies verkeerd gaat in mijn geval.

Ik ben er van overtuigt dat ik ook niet de eerste zou zijn met dit probleem, maar kan hier jammer niets over vinden op google, dus hoopte ik dat er hier op Tweakers wel mensen zouden zijn die mij kunnen helpen. Indien er mensen zijn die mij een andere site of bron kunnen aanbevelen waar men mij wel zou kunnen helpen, dan hoor ik dat graag!

Aan de ene kant probeer je heel elitair 11 (!!!) bytes uit te sparen door geen wrapper te gebruiken, maar aan de andere kant boeit het je geen zak watvoor elementen je editor allemaal introduceert. En krijg je het bovendien zelfs met firebug nieteens voor elkaar de boosdoener op te sporen.
Volgens mij ligt de verhouding van waar je je energie aan besteed compleet verkeerd.