/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Float og text-wrap
Fra : Jahirah


Dato : 10-06-09 18:59

Hejsa

Siden jeg første gang stiftede bekendtskab med CSS har jeg magtet
at lave fejl i selv den mest simple kode, og jeg er ret sikker på
at jeg har gentaget succeen idet jeg er overbevist om at jeg før
har løst den problem stilling jeg nu sidder med.

Mit spørgsmål drejer sig om noget så simpelt som at floate en div
inden i en hoved-div hvorefter jeg ønsker at den resterence tekst
i boksen skal "wrappe" rundt om den floatede boks.

Jeg har forsøgt at finde svar på spørgsmålet ved alm. søgning på
google m.m, og har da også fundet en frygtelig masse løsninger.
Den eneste forskel fra deres eksempler og til det jeg ønsker er,
at guiderne har floatet et billede fremfor en div - og jeg ved
ikke om det har nogen betydning for mit problem. Umiddelbart
ville jeg sige nej, meeeen... min logik er bestemt ikke den
bedste.

For at illustrere lidt mere specifikt kan I se et billede af hvad
det er jeg søger, og hvad det er jeg får - selv når jeg følger
step-by-step tutorials.
http://www.phoepsdiary.com/random/kode.gif

Alle former for hjælp vil være kærkommen :)

Mvh
//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Birger Sørensen (10-06-2009)
Kommentar
Fra : Birger Sørensen


Dato : 10-06-09 19:10

Jahirah skrev den 10-06-2009:
> Hejsa
>
> Siden jeg første gang stiftede bekendtskab med CSS har jeg magtet
> at lave fejl i selv den mest simple kode, og jeg er ret sikker på
> at jeg har gentaget succeen idet jeg er overbevist om at jeg før
> har løst den problem stilling jeg nu sidder med.
>
> Mit spørgsmål drejer sig om noget så simpelt som at floate en div
> inden i en hoved-div hvorefter jeg ønsker at den resterence tekst
> i boksen skal "wrappe" rundt om den floatede boks.
>
> Jeg har forsøgt at finde svar på spørgsmålet ved alm. søgning på
> google m.m, og har da også fundet en frygtelig masse løsninger.
> Den eneste forskel fra deres eksempler og til det jeg ønsker er,
> at guiderne har floatet et billede fremfor en div - og jeg ved
> ikke om det har nogen betydning for mit problem. Umiddelbart
> ville jeg sige nej, meeeen... min logik er bestemt ikke den
> bedste.
>
> For at illustrere lidt mere specifikt kan I se et billede af hvad
> det er jeg søger, og hvad det er jeg får - selv når jeg følger
> step-by-step tutorials.
> http://www.phoepsdiary.com/random/kode.gif
>
> Alle former for hjælp vil være kærkommen :)
>
> Mvh
> //Jahirah

Du mangler at afslutte de floatede elementer.
Det gøre med css ved at sætte
..clear_both {
clear : both;
}
på et efterfølgende element inde i boksen. Altså efter alle de
elementer der er floatede.
Det kan f.eks være en <br class="clear_both"> - men det kan også være
på andre elementer - det kommer an på hvad du ellers skal have der.
Skal boxen f.eks også have en footer, kan den med fordel sættes på den.

Sommetider kan en <br> skabe bøvl (en tom linie), man kan så enten
style clear_both klassen med en text-size : 0px; eller oprette et
element med height : 0px, for at afslutte de floatede elementer.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jahirah (10-06-2009)
Kommentar
Fra : Jahirah


Dato : 10-06-09 20:41

Birger Sørensen wrote in dk.edb.internet.webdesign.html:

> Du mangler at afslutte de floatede elementer.
> Det gøre med css ved at sætte
> ..clear_both {
> clear : both;
> }
> på et efterfølgende element inde i boksen. Altså efter alle de
> elementer der er floatede.
> Det kan f.eks være en <br class="clear_both"> - men det kan også være
> på andre elementer - det kommer an på hvad du ellers skal have der.
> Skal boxen f.eks også have en footer, kan den med fordel sættes på den.
>
> Sommetider kan en <br> skabe bøvl (en tom linie), man kan så enten
> style clear_both klassen med en text-size : 0px; eller oprette et
> element med height : 0px, for at afslutte de floatede elementer.

-------------------------------

Hej Birger,

Mange tak for dit svar.
Nogle ting blev lidt nemmere at forstå, og der dukkede også et par
tillægs spørgsmål op som jeg lige vil spørge om...

1)Jeg har lidt svært ved at forstå det at når jeg har en container div,
med en mini-div der er left-floated og så har jeg text der wrapper rundt
om denne - hvor vil jeg så placere min clear:both? EFTER teksten?

Når jeg bruger clear i sådanne situationer her plejer jeg gerne at lave
et usynligt element til at skabe effekten med. Stylen fylder jeg gerne i
mit stylesheet.

Men ja - det gir nu ret godt mening. For at få container div'en til at
fatte hvor bunden af den floatede div går clearer man both - simpelt
egentligt men ja... hehe, somme tider er det ikke lige til at se det, når
man ikke lige ved det ;)

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (10-06-2009)
Kommentar
Fra : Birger Sørensen


Dato : 10-06-09 21:23

Jahirah formulerede onsdag:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>
>> Du mangler at afslutte de floatede elementer.
>> Det gøre med css ved at sætte
>> ..clear_both {
>> clear : both;
>> }
>> på et efterfølgende element inde i boksen. Altså efter alle de
>> elementer der er floatede.
>> Det kan f.eks være en <br class="clear_both"> - men det kan også være
>> på andre elementer - det kommer an på hvad du ellers skal have der.
>> Skal boxen f.eks også have en footer, kan den med fordel sættes på den.
>>
>> Sommetider kan en <br> skabe bøvl (en tom linie), man kan så enten
>> style clear_both klassen med en text-size : 0px; eller oprette et
>> element med height : 0px, for at afslutte de floatede elementer.
>
> -------------------------------
>
> Hej Birger,
>
> Mange tak for dit svar.
> Nogle ting blev lidt nemmere at forstå, og der dukkede også et par
> tillægs spørgsmål op som jeg lige vil spørge om...
>
> 1)Jeg har lidt svært ved at forstå det at når jeg har en container div,
> med en mini-div der er left-floated og så har jeg text der wrapper rundt
> om denne - hvor vil jeg så placere min clear:both? EFTER teksten?
>
> Når jeg bruger clear i sådanne situationer her plejer jeg gerne at lave
> et usynligt element til at skabe effekten med. Stylen fylder jeg gerne i
> mit stylesheet.
>

Clearen skal foretages efter de ting der floater på et selvstændigt
element, placeret inde i den container der har de floatede elementer,
men efter elementerne der floater.
Egentlig burde du vist putte teksten i et element også - f.eks. et <p>
der floates right.
Jeg er ikke sikker på, om teksten så vil floate under din div, hvis der
er nok, så det bør du nok checke. Men under alle omstændigheder, skal
clear, foretages efter de elementer der skal cleares for - også
teksten.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jahirah (10-06-2009)
Kommentar
Fra : Jahirah


Dato : 10-06-09 21:39

Birger Sørensen wrote in dk.edb.internet.webdesign.html:

> Clearen skal foretages efter de ting der floater på et selvstændigt
> element, placeret inde i den container der har de floatede elementer,
> men efter elementerne der floater.
> Egentlig burde du vist putte teksten i et element også - f.eks. et <p>
> der floates right.
> Jeg er ikke sikker på, om teksten så vil floate under din div, hvis der
> er nok, så det bør du nok checke. Men under alle omstændigheder, skal
> clear, foretages efter de elementer der skal cleares for - også
> teksten.
>
> Birger

-----------------------------------------------------------

Jeg siger rigtig mange tak for hjælpen. Jeg kunne slet ikke vente med at
prøve det af og det virker, tusind tak for et velforklaret svar :)

Det er ikke såååå lang tid siden jeg først stiftede bekendtskab med "clear"
attributen så den driller stadig en del. Somme tider har jeg lidt svært ved
at få viklet forstanden rundt om reglerne men så er det godt der er steder
som her, hvor man kan spørge andre til råds :)

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Stig Holmberg (10-06-2009)
Kommentar
Fra : Stig Holmberg


Dato : 10-06-09 21:50


"Jahirah" <jahirah@gmail.com> skrev i meddelelsen
news:4a3019f2$0$90266$14726298@news.sunsite.dk...
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>
>> Clearen skal foretages efter de ting der floater på et selvstændigt
>> element, placeret inde i den container der har de floatede elementer,
>> men efter elementerne der floater.
>> Egentlig burde du vist putte teksten i et element også - f.eks. et <p>
>> der floates right.
>> Jeg er ikke sikker på, om teksten så vil floate under din div, hvis der
>> er nok, så det bør du nok checke. Men under alle omstændigheder, skal
>> clear, foretages efter de elementer der skal cleares for - også
>> teksten.
>>
>> Birger
>
> -----------------------------------------------------------
>
> Jeg siger rigtig mange tak for hjælpen. Jeg kunne slet ikke vente med at
> prøve det af og det virker, tusind tak for et velforklaret svar :)
>
> Det er ikke såååå lang tid siden jeg først stiftede bekendtskab med
> "clear"
> attributen så den driller stadig en del. Somme tider har jeg lidt svært
> ved
> at få viklet forstanden rundt om reglerne men så er det godt der er steder
> som her, hvor man kan spørge andre til råds :)
>
> //Jahirah

En meget nemmere metode er at sætte overflow: auto; på den yderste DIV -det
er en mere enkel og elegant løsning og kræver ikke det ekstra clearende
element element inde i DIVen.

En alternativ metode er at floate den yderste DIV, hvis dit layout tillader
dette, det giver samme resultat.

Mvh. Stig


Allan Vebel (11-06-2009)
Kommentar
Fra : Allan Vebel


Dato : 11-06-09 00:27

Jahirah skrev:

> Alle former for hjælp vil være kærkommen :)

Jeg skulle en dag omsætte dette tabelbaserede:
http://vebel.dk/test/stampe/index.html

til noget float:
http://vebel.dk/test/stampe/forside.htm

Alt kan lade sig gøre, hvis man fedter længe nok
med det.

Prøv at se html og css, og sammenlign med
table-funktionen!

--
Allan Vebel
http://html-faq.dk
http://vebel.dk



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408921
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste