Cafe og hygge

Svar: CSS : Clear:left,right,both ?

Allan Isaksen — Sat, 24 Sep 2011 08:18:33 GMT

Poul Madsen:
Allan, det er altså ikke helt rigtigt, beklager. Jeg bruger float nu - faktisk bruger jeg begge dele - men inden jeg brugte float, brugte jeg clear, og det fungerede nogenlunde på samme måde. Jeg var bare nødt til at lære om float, fordi hjemmesiderne ikke blev vist rigtigt i Google Chrome. I IE var det stadig ok.

Poul - jeg anfægter ikke, at det er sådan du har gjort - og at det muligvis virker. (jeg vidste faktisk ikke, at man kunne bruge "clear" på den måde.)

Det jeg mente var, at "clear" som udgangspunkt ikke er beregnet til at positionere elementer. Man kan vel egentlig sige, at det nærmere bruges til at fortælle - hvor elementer IKKE skal befinde sig. ;-)

Altså - hvis du har et image - med float:left og clear:right - så betyder det, at billedet er placeret til venstre - og at der ikke må være placeret noget til højre for billedet - hverken andre billeder eller tekst.

Som du selv er inde på, så virker det heller ikke optimalt i Chrome - og jeg kunne forestille mig, at der også er forskel på, om det virker efter hensigten i hhv. IE7, 8 og 9.

Så som udgangspunkt bruges "float" til at positionere fx billeder - og "clear" bruges til at angive, hvordan andre elementer skal positioneres I FORHOLD til de "float'ede" elementer.

Svar: CSS : Clear:left,right,both ?

Anonymous — Fri, 23 Sep 2011 20:36:13 GMT

Allan I:

Poul - nu må du ikke forvirre manden mere end højst nødvendigt.

Det du taler om er float:left og float:right - og bruges ganske rigtigt til at placere elementer eller billeder til venstre eller højre.

Allan, det er altså ikke helt rigtigt, beklager. Jeg bruger float nu - faktisk bruger jeg begge dele - men inden jeg brugte float, brugte jeg clear, og det fungerede nogenlunde på samme måde. Jeg var bare nødt til at lære om float, fordi hjemmesiderne ikke blev vist rigtigt i Google Chrome. I IE var det stadig ok.

Svar: CSS : Clear:left,right,both ?

Allan Isaksen — Fri, 23 Sep 2011 08:32:23 GMT

Poul Madsen:

Her skifter jeg mellem om et foto skal være til højre eller venstre, og et par steder er der eksempler på, at teksten smuger sig rundt om fotoet. Hvis jeg bruger left, placeres fotoet til højre og teksten til ventre - eller osse er det omvendt.

Poul - nu må du ikke forvirre manden mere end højst nødvendigt.

Det du taler om er float:left og float:right - og bruges ganske rigtigt til at placere elementer eller billeder til venstre eller højre.

Men her er der egentlig tale om det modsatte - nemlig clear:left og clear:right.

Disse bruges f.eks. hvis du IKKE vil have teksten til at smyge sig rundt om billedet - men i stedet starte under billedet i en ny linje. :-)

Svar: CSS : Clear:left,right,both ?

Anonymous — Thu, 22 Sep 2011 17:43:34 GMT

Jeg er ikke i tvivl om, at Patrick og Gita har ret; jeg er bare ikke så avanceret som dem! Jeg bruger clear right og left til billeder, når jeg ønsker at teksten skal smuge sig rundt om et billede.

Du kan se det på følgende link:

http://www.travellingbears.dk/bears/chicago1.php

Her skifter jeg mellem om et foto skal være til højre eller venstre, og et par steder er der eksempler på, at teksten smuger sig rundt om fotoet. Hvis jeg bruger left, placeres fotoet til højre og teksten til ventre - eller osse er det omvendt.

Ved ikke, om det er det, du søger...

Svar: CSS : Clear:left,right,both ?

Gita Street — Thu, 22 Sep 2011 17:20:33 GMT

God beskrivelse Patrick.

Lige lidt ekstra herfra.

Når man taler layout i HTML er der to slags måder display elementerne viser sig på:
- block
- inline

Eksempelvis er h- og p-tags block elementer. Dvs de efterfølgende elementer altid starter på en ny automatisk linje.

inline-elementer, derimod, placerer sig automatisk til højre ligeefter forudgående, hvis der er plads (medmindre du begynder at bruge position:absolut)

Et godt tip til at lære CSS i praksis er at lege med elementerne og give dem allesammen en forskellig background-color. Det kan spare en for en masse besvær med at vide hvilke, der evt skal rettes på at man kan se hvor høj, bred og hvor elementerne er.

Jeg har engang lavet weblayout med spalter etc pixel-præcist efter en tegning, og der var det trick virkeligt noget, der hjalp.

Svar: CSS : Clear:left,right,both ?

Patrick Olsen — Thu, 22 Sep 2011 15:35:48 GMT

Hej Arlo,

Det er egentlig meget simpelt.

CSS udtrykket clear:left, fortæller at der ingen flydende elementer må være på venstre side af elementet.

CSS udtrykket clear:right, fortæller at der ingen flydende elementer må være på højre side af elementet.

CSS udtrykket clear:both, fortæller at der ingen flydende elementer må være på begge sider af elementet.

I praksis fungerer det hammer godt, og er ikke til at undværer i moderne webdesign.

Du kan eksempelvis lave et flydende div-element mod venstre (float:left), med hen højde på 100px og en bredde på 100px. Så vil den meget simpelt gå ud og være i venstre side af indholdet. Hvis du vælger at benytte en <div style='clear:both'></div> under float elementet, vil indholdet (Alt det som er skrevet efter div-clear) placere sig under det flydende element.

Jeg håber det giver lidt mening :-)

Svar: CSS : Clear:left,right,both ?

Morten Madsen — Thu, 22 Sep 2011 15:28:43 GMT

Arlo:

Hey Aminoer

Jeg har altid spekuleret over hvad clear:left,right,both gør men forstår det simpelthen ikke?, er da en venlig gut der lige kan forklare det?

Godt spørgsmål.

Jeg kunne selv forklare det, men synes egentlig html.dk gør det bedre.

Link til html.dk

Kig lidt ned på siden, der står det forklaret :-)

Med Venlig Hilsen
Morten

CSS : Clear:left,right,both ?

Arlo — Thu, 22 Sep 2011 15:23:41 GMT

Hey Aminoer

Jeg har altid spekuleret over hvad clear:left,right,both gør men forstår det simpelthen ikke?, er da en venlig gut der lige kan forklare det?