Avatar billede johan.o Nybegynder
16. november 2005 - 15:57 Der er 8 kommentarer og
1 løsning

float opførsel.

Prøv at kigge på resultatet af denne kode i IE og f.eks. FF/NS/Opera.

Man må sige der er forskel, men er der noget 'galt' med koden eller er der nogen af browserne der ikke umiddelbart leverer hvad w3c prædiker om float ? Umiddelbart leverer IE det jeg havde forventet fra alle browserer, men jeg er spændt på at høre jeres mening :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<body>

<div style="position: relative; float: left; width: 100px; margin: 2px; border: 1px solid #FF0000;">Red</div>
<div style="position: relative; float: left; width: 100px; margin: 2px; border: 1px solid #00FF00;">Green</div>
<div style="position: relative; width: 90px; margin: 2px; border: 1px solid #0000FF;">Blue</div>
<div style="position: relative; width: 90px; margin: 2px; border: 1px solid #000000;">Black</div>

</body>
</html>

Mvh. Johan
Avatar billede roenving Novice
16. november 2005 - 16:09 #1
Tjah, egentlig er det vel rigtigt at et floatet element ikke kan være en del af det almindelige dokument-flow, og det er jo det, der vises i f.eks. FF ...
Avatar billede johan.o Nybegynder
16. november 2005 - 20:06 #2
Float fortæller hvorledes efterfølgende indhold skal 'strømme' i forhold til det element som float sættes på. Så ved float: left; burde efterfølgende indhold starte øverst på højre side af det 'floatede' element. Hvis efterfølgende block elementer ikke placeres i forhold til dette så burde disse efterfølgende block elementer vel være placeret samme sted som det første floatede element...eller ?

Det resultat bl.a. FF viser er umiddelbart et 'mix' af normal flow og position: absolute.

'Blue' border starter, uafhængigt af de floatede elementer, øverst til venstre men teksten 'Blue' placeres derimod relativt i forhold til tidligerer elementer. Jeg har læst w3c's standardisering af float og kan ikke umiddelbart forstå bl.a. FF opførsel.

Jeg håber du eller andre har mod på at prøve at forklarer mig hvilke principper der skaber FF's resultat. :)

Mvh. Johan
Avatar billede stich Nybegynder
16. november 2005 - 20:55 #3
"Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present."
http://www.w3.org/TR/CSS21/visuren.html#floats

http://www.complexspiral.com/publications/containing-floats/ omhandler mest det at indeholde en float, hvilket ofte foregår anderledes end forventet. Det er dog udmærket læsning, og figur 1 giver desuden en indikation af, at Opera og Firefox renderer denne test korrekt.

Generelt kan man også fint gå ud fra, at det er Firefox og Opera der renderer en side korrekt, når de er enige, mens IE gør det anderledes.
Avatar billede johan.o Nybegynder
16. november 2005 - 21:54 #4
Okay, 'not in the flow' - uomtvisteligt - men jeg forstår stadig ikke hvorfor teksten 'Blue' flyttes ned på næste linie da 'non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.' hvis ikke floaten eksisterer så bør 'Blue' vel stå på samme sted som 'Red'..eller ?

Mvh. Johan
Avatar billede stich Nybegynder
16. november 2005 - 23:23 #5
Nej, prøv at gå længere ned på W3C-siden, der er et billede der viser og forklarer det.
Avatar billede olebole Juniormester
17. november 2005 - 00:37 #6
<ole>

Der findes nu også ting, som både FF og Opera gør helt forkert ... men som IE til gengæld gør korrekt. Således er både FF's og Opera's DOM-håndtering _meget_ buggy - hvilket kan resultere i alvorlige renderings fejl i de to  :)

/mvh
</bole>
Avatar billede johan.o Nybegynder
18. november 2005 - 12:28 #7
Ja, det kunne jo hjælpe hvis man tog sig lidt mere tid til at tænke over hvad det egentligt er man vil opnå :), tidligerer ekspempel var jo egentligt noget vrøvl, den effekt som er ønskværdig er jo denne :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<body>

<div style="position: relative; width: 300px; margin: 2px; border: 1px solid #0000FF;">
<div style="position: relative; float: left; width: 100px; margin: 2px; border: 1px solid #FF0000;">Red</div>
<div style="position: relative; float: left; width: 100px; margin: 2px; border: 1px solid #00FF00;">Green<br>Green</div>
Blue<br>Blue<br>Blue<br>Blue</div>
<div style="position: relative; width: 90px; margin: 2px; border: 1px solid #000000;">Black</div>

</body>
</html>

Det er jo 'næsten' ens i begge browserer og det er der jo ikke meget at sige til :)

Tak til alle - stitch, hvis du vil collect'e point så smid et svar.

Mvh. Johan
Avatar billede stich Nybegynder
18. november 2005 - 12:35 #8
Ellers tak, bare du staver rigtigt til mit nick fremover; jeg er ikke animeret. :-P
PS. er du sikker på du rent faktisk bruger 'position:relative;' til noget?
Avatar billede johan.o Nybegynder
18. november 2005 - 12:46 #9
Oups, sorry :(....stich it is.

position: relative; ?...næh...:)

Mvh. Johan
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester