/ 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, float ikke
Fra : Erik Ginnerskov


Dato : 18-05-03 14:35

Hej NG
Jeg har et drilleproblem med float.

Følgende virker i MSIE 5.5 og 6.0 og i Opera 6.05,
men ikke i Op 7.02, Ns 6.2 og 7.0 og Mz 1.2.1 og 1.3:

<div>
<p style="float:right; margin-left:15px"><img src="....." alt="" /></p>
<p style="float:left">Noget tekst.</p>
</div>

Teksten lægger sig til venstre for billedet.

<div>
<p style="float:left; margin-left:15px"><img src="....." alt="" /></p>
<p style="float:left">Noget tekst.</p>
</div>

Teksten lægger sig til højre for billedet.

I Op 7.02, Ns og Mz lægger teksten i begge tilfælde sig under billedet.

Hvis jeg fjerner float på teksten, lægger den sig hvor jeg vil have den, men
så breder den sig ind under billedet og det var ikke meningen.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



 
 
Jens Gyldenkærne Cla~ (19-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-05-03 10:01

Erik Ginnerskov skrev:

> <div>
> <p style="float:right; margin-left:15px"><img src="....."
> alt="" /></p> <p style="float:left">Noget tekst.</p>
> </div>

Du har ikke defineret en bredde på p-elementet. Derfor vil teksten
brede sig i hele vinduets bredde før den ombrydes. Hvis teksten er
kort nok til at den kan stå ved siden af billedet på en linje, så
er visningen også som du ønsker i Mozilla m.fl.

> Hvis jeg fjerner float på teksten, lægger den sig hvor jeg vil
> have den, men så breder den sig ind under billedet og det var
> ikke meningen.

Den bør ikke gå under billedet - og gør det heller ikke i mine tre
hovedbrowsere: IE 6, Mozilla 1.4B og Opera 7.03
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Erik Ginnerskov (19-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-05-03 12:08


"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
> Du har ikke defineret en bredde på p-elementet. Derfor vil teksten
> brede sig i hele vinduets bredde før den ombrydes. Hvis teksten er
> kort nok til at den kan stå ved siden af billedet på en linje, så
> er visningen også som du ønsker i Mozilla m.fl.
>
> > Hvis jeg fjerner float på teksten, lægger den sig hvor jeg vil
> > have den, men så breder den sig ind under billedet og det var
> > ikke meningen.

Det stemmer med et forsøg, jeg lavede sent i går. Jeg satte width:70% på
teksten og den kom op på plads.
Jeg kan bare ikke se logikken i, at der SKAL sættes en bredde på, når der er
sat float på.
Bredden er ikke nødvendig, hvis der ikke er sat float på teksten.

Se det på www.hjemmesideskole.dk/html/testsider/float.asp

> Den bør ikke gå under billedet - og gør det heller ikke i mine tre
> hovedbrowsere: IE 6, Mozilla 1.4B og Opera 7.03

I mine IE 5.5 og 6.0, Mozilla 1.2.1 og 1.3, Opera 6.05 og 7.02 og Netscape
6.2 og 7.0 gør den, hvis der ikke er sat float på teksten, så ...

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Jens Gyldenkærne Cla~ (19-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-05-03 12:50

Erik Ginnerskov skrev:

> Se det på www.hjemmesideskole.dk/html/testsider/float.asp

Du har glemt et n.

>> Den bør ikke gå under billedet - og gør det heller ikke i
>> mine tre hovedbrowsere: IE 6, Mozilla 1.4B og Opera 7.03
>
> I mine IE 5.5 og 6.0, Mozilla 1.2.1 og 1.3, Opera 6.05 og 7.02
> og Netscape 6.2 og 7.0 gør den, hvis der ikke er sat float på
> teksten, så ...

Det forstår jeg simpelthen ikke. Uanset hvad jeg gør, står teksten
ved siden af billedet når jeg undlader at floate teksten.

Prøv at se eksemplet her: <http://damu.dk/jc/usenet/float2.asp>

Giv evt. et link til et skærmdump hvor man kan se problemet.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Erik Ginnerskov (19-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-05-03 13:09


"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
> Det forstår jeg simpelthen ikke. Uanset hvad jeg gør, står teksten
> ved siden af billedet når jeg undlader at floate teksten.
>
> Prøv at se eksemplet her: <http://damu.dk/jc/usenet/float2.asp>
>
> Giv evt. et link til et skærmdump hvor man kan se problemet.

Det bliver så senere på året, jeg er væk et par timer og har ikke tid til at
lave dem.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Erik Ginnerskov (19-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-05-03 18:50


"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
> Erik Ginnerskov skrev:
> > I mine IE 5.5 og 6.0, Mozilla 1.2.1 og 1.3, Opera 6.05 og 7.02
> > og Netscape 6.2 og 7.0 gør den, hvis der ikke er sat float på
> > teksten, så ...
>
> Det forstår jeg simpelthen ikke. Uanset hvad jeg gør, står teksten
> ved siden af billedet når jeg undlader at floate teksten.
>
> Giv evt. et link til et skærmdump hvor man kan se problemet.

Så er det klar: www.hjemmesideskolen.dk/html/testsider/float_dump.asp

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Lasse Reichstein Nie~ (19-05-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 19-05-03 19:14

"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> writes:

> Så er det klar: www.hjemmesideskolen.dk/html/testsider/float_dump.asp

Det ser helt rigtigt ud. I de første eksempler mangler der en bredde
på p-elementet (bredde er påkrævet på (non-replaced) floatede
elementer). Opera og Mozilla vælger at den manglende bredde skal være
100%, så der er ikke plads til både højre- og venstre-floaten, og den
venstre-floatede paragraf rykkes ned under den anden. Helt efter standarden.
Internet Explorer har den fejl at den regner 100% bredde til kun at være
det der er plads til til venstre for det floatede billede, så der er plads
til paragraffen der.

Eksemplerne hvor der ikke er float på teksten, er også helt korrekt
opførsel for en float. Floaten lægger sig til venstre, og tekstblokken
lægger sig under den. Inline-elementerne bliver så afkortet for ikke
at overlappe floaten.

Hvis du ikke vil have teksten nede under billedet, så prøv at
sætte en padding-left:115px på paragraffen.

Mere detaljeret:

Med to blokke der begge er float:left (og der er plads til dem begge
på sammelinje) får man effekten:

+--------+-------------+
| | ~~~~~~ |
| | ~~~ |
| | ~~~ |
+--------+ ~~` |
| ~~~ |
+-------------+

De to blokke lægger sig op af hinanden.

Med en blok der er float:left og en anden blok lige ved siden af, så
får man effekten:

+--------+-------------+
| | ~~~~~~ |
| | ~~~ |
| | ~~~ |
+--------+ ~~ |
| ~~~ |
+----------------------+

De overlapper hinanden (mere præcist er blok-elementer fuldstændigt
upåvirket af floats). Det er kun indholdet der bliver skubbet med.


Prøv at se på følgende eksempler:

<div style="float:left;width:100px;height:100px;border:1px solid red;">
</div>
<div style="float:left;width:200px;border:2px solid green;padding:1ex;">
<span style="border:1px solid blue">
BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>
</span>
</div>


<div style="float:left;width:100px;height:100px;border:1px solid red;">
</div>
<div style="border:2px solid green;padding:1ex;">
<span style="border:1px solid blue">
BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>
</span>
</div>


/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Erik Ginnerskov (19-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-05-03 20:20


"Lasse Reichstein Nielsen" <lrn@hotpop.com> skrev
> "Erik Ginnerskov" <egin@SPAMKILLoncable.dk> writes:
>
> > Så er det klar: www.hjemmesideskolen.dk/html/testsider/float_dump.asp
>
> Hvis du ikke vil have teksten nede under billedet, så prøv at
> sætte en padding-left:115px på paragraffen.

Det har jeg ikke givet udtryk for. Det var Jens, som ikke troede på, at
teksten breder sig ind under billedet og bad om at se screendumps. Når jeg
så var i gang, lavede jeg også lige de fire øverste.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Jens Gyldenkærne Cla~ (19-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-05-03 23:03

Erik Ginnerskov skrev:

> Det har jeg ikke givet udtryk for. Det var Jens, som ikke
> troede på, at teksten breder sig ind under billedet og bad om
> at se screendumps.

Og jeg har misforstået hvad du mente med "ind under billedet". Jeg
troede at du mente at billedet skjulte noget af teksten - hvilket
jeg ikke kunne få til at passe.

Den eksempelside jeg gav viste i øvrigt det samme resultat som du
fik - floatede elementer ryger under billedet, mens ikkefloatede
elementer står ved siden af.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Erik Ginnerskov (19-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-05-03 23:58


"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
> Den eksempelside jeg gav viste i øvrigt det samme resultat som du
> fik - floatede elementer ryger under billedet, mens ikkefloatede
> elementer står ved siden af.

Det, jeg kan se på den side, du har lavet, er at hele designet skrider,
fordi du har glemt at sætte clear på første element under de div'er, som
indeholder floatede elementer.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Jens Gyldenkærne Cla~ (20-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-05-03 10:36

Erik Ginnerskov skrev:

> Det, jeg kan se på den side, du har lavet, er at hele designet
> skrider, fordi du har glemt at sætte clear på første element
> under de div'er, som indeholder floatede elementer.

Det har du ret i. Det er rettet nu.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Erik Ginnerskov (20-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 20-05-03 11:15


"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
> Erik Ginnerskov skrev:
>
> > Det, jeg kan se på den side, du har lavet, er at hele designet
> > skrider, fordi du har glemt at sætte clear på første element
> > under de div'er, som indeholder floatede elementer.
>
> Det har du ret i. Det er rettet nu.

Men i punkt 3, hvor du vil vise venstrefloatet billede + ikke-floatet tekst,
er teksten ikke lang nok til, at den kan nå ned og ind under (ikke bag ved)
billedet. Det var der, vi gik fejl af hinanden.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Jens Gyldenkærne Cla~ (20-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-05-03 11:35

Erik Ginnerskov skrev:

> Men i punkt 3, hvor du vil vise venstrefloatet billede +
> ikke-floatet tekst, er teksten ikke lang nok til, at den kan
> nå ned og ind under (ikke bag ved) billedet. Det var der, vi
> gik fejl af hinanden.

Du skal bare formindske dit browservindue.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Erik Ginnerskov (20-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 20-05-03 11:59


"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
> Du skal bare formindske dit browservindue.

Det giver en vandret scrollbar. Der kommer ikke noget tekst ind under
billedet.

Men jeg fik løst mit oprindelige problem, så skal vi ikke lade det ligge.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Jens Gyldenkærne Cla~ (20-05-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-05-03 12:04

Erik Ginnerskov skrev:

>> Du skal bare formindske dit browservindue.
>
> Det giver en vandret scrollbar. Der kommer ikke noget tekst
> ind under billedet.

O.k. - det må være i IE 5.5. Jeg kan ikke få mine browsere til at
gøre sådan.

> Men jeg fik løst mit oprindelige problem, så skal vi ikke lade
> det ligge.

Fint nok.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Martin Hintzmann And~ (20-05-2003)
Kommentar
Fra : Martin Hintzmann And~


Dato : 20-05-03 07:43

Erik Ginnerskov wrote:
> Hej NG
> Jeg har et drilleproblem med float.
>
> <div>
> <p style="float:right; margin-left:15px"><img src="....." alt="" /></p>
> <p style="float:left">Noget tekst.</p>
> </div>
>
> Teksten lægger sig til venstre for billedet.
>
> <div>
> <p style="float:left; margin-left:15px"><img src="....." alt="" /></p>
> <p style="float:left">Noget tekst.</p>
> </div>
>
> Teksten lægger sig til højre for billedet.
>

Jeg tror jeg ville lave det lidt anderledes og smide billedet i under
afsnittet.
Således:

<p>
<img src="images/maleri.jpg" width="100" height="67" alt=""
style="float:right;margin:0 0 5px 15px;">
Tekst til billedet.
</p>

eller

<p>
<img src="images/maleri.jpg" width="100" height="67" alt=""
style="float:left;margin:0 15px 5px 0;">
Tekst til billedet.
</p>

Ovenstående opfører sig ens på min Win2k med Moz 1.4, MSIE 6.0 og Opera
7.11.

Hintzmann c",)


Erik Ginnerskov (20-05-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 20-05-03 11:11


"Martin Hintzmann Andersen" <no@spam.dk> skrev
> Jeg tror jeg ville lave det lidt anderledes og smide billedet i under
> afsnittet.
> Således:
>
> <p>
> <img src="images/maleri.jpg" width="100" height="67" alt=""
> style="float:right;margin:0 0 5px 15px;">
> Tekst til billedet.
> </p>
>
> eller
>
> <p>
> <img src="images/maleri.jpg" width="100" height="67" alt=""
> style="float:left;margin:0 15px 5px 0;">
> Tekst til billedet.
> </p>

Det lyder som svaret på et specifikt problem, men mit problem var mere
generelt. Men jeg vil studere det grundigt.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste