6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    Es

    css clearing

    Ik ben me aan het verdiepen in floaten en clearing en nu kom ik verschillende clear-methodes tegen, wat is het verschil en welke werkt het beste? Of zijn het allemaal verschillende manieren om hetzelfde te zeggen?
    Ik merk namelijk dat bij een image gallery ze verschillende effecten hebben.

    [code:1:996e707983]<br class="clearboth">

    #clearer {
    clear: both;
    margin: 0; padding: 0;
    }

    <div style="clear:both;"></div>[/code:1:996e707983]

    Bijdrager
    addyboy

    als je door middel van style=”css hier” een bepaald html attribute een stijl geeft dan is dit precies hetzelfde als je dit in de css benoemt doormiddel van het html attribute een class of id te geven

    het verschil hier echter zit hem in de <br> en <div>. Het zijn allebei compleet andere html functies. De BR tag is een Line Break tag: W3Schools BR tag. De div tag is een division, ofterwel een bepaald gebied dat je benoemt: W3schools Div tag.

    Bij de eerst laad je dus vanuit de css een bepaalde class die in dit geval een clear: both doet, en margin en padding op 0 zet. Verder is er een line break omdat je de <br> code hebt gebruikt.
    Met het tweede geval zet je een bepaald gebied onder de style= clear:both, maar zet je dus niet die margin en padding op 0 en is er geen line break.

    Dat is dus het verschil

    Bijdrager
    Radagast

    Mijn favoriete methode is:
    [code:1:7ec84e6a82]
    <div class="container">
    <div class="floater"></div>
    </div>
    [/code:1:7ec84e6a82]
    met stylesheet:
    [code:1:7ec84e6a82]
    .floater { float: left; }
    .container {
    overflow: hidden;
    zoom: 1; /* to make MSIE behave */
    }
    [/code:1:7ec84e6a82]
    Hoe goed dit werkt in oudere browsers, is natuurlijk de vraag. Probeer het uit, zou ik zeggen.

    Bijdrager
    OReason

    semantisch is er wel een verschil, een <br/> gebruiken en vervolgens de line-break weer weghalen is niet logisch. Dan is een <div/> logischer, maar dan zou ik de css wel los halen, dus zo:

    [code:1:9e7c2bbc6c]
    css:
    .clear { clear: both }

    html:
    <div class="clear"></div>
    [/code:1:9e7c2bbc6c]

    ’t Zou nog beter zijn als je de clear toevoegt aan een element wat je al hebt, dan hoef je dus geen extra html toe te voegen. (meestal is dit wel mogelijk)


    @Radagast

    Vind ’t een beetje een rare methode, waarom niet de standaard properties gebruiken?

    Bijdrager
    Jonnotie
    ”OReason”

    semantisch is er
    [code:1:f4fa847389]
    css:
    .clear { clear: both }

    html:
    <div class="clear"></div>
    [/code:1:f4fa847389]

    zo doe ik het nou ook. werkt perfect

    Bijdrager
    leppa

    Nogal een ruime vraag. Ligt er toch geheel aan hoe je website is opgebouwd, en wat je ermee bereiken wil. Wel opletten met het werken met divjes die je bijvoorbeeld 3 naast elkaar wilt hebben, en het geheel gecentered, dat je display block gebruikt.
    Maargoed, dat is dan ook weer compleet afhankelijk van wat je wilt bereiken.

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.