CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

sansalvador Nybegynder

29. august 2006 - 02:15 Der er 7 kommentarer og
1 løsning

Div/span gider ikke reagere på width

I længere tid har jeg spekuleret på, hvorfor div og span ikke
reagerer på fx "width: 100%" i FF.

Hvis jeg fx har en div med lidt tekst i, og gerne vil have en baggrundsfarve på denne div, samt have den til at fylde 100% i width, så gider den bare ikke at "sprede" sig længere horisontalt end til slutningen af teksten.

Det virker jo ganske fint i vores elskede IE :)

Nogen der kan forklare dette? Og hvor går IE (som altid) eller jeg (næsten altid) galt...

Synes godt om

mm12010 Nybegynder

29. august 2006 - 07:47 #1

når mål angives i procent skal det element som indholder dit span have difineret en fast width, da der jo ellers ikke er noget at beregne de 100% ud fra -- det kan oz være der er noget helt andet der er galt, men smid koden her, så er det lidt lettere at finde eventuelle andre fejl...

Synes godt om

mclemens Nybegynder

29. august 2006 - 10:08 #2

Hvilken af fejlene tænker du på?
... jeg synes ikke at jeg har problemer?
... har du et test eksempel?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>
<span style="width:100%;background:red;">span (inline width 100%)</span>

<br><br>

<span style="width:100%;background:red;display:block;">span (block width 100% - brug div istedet)</span>

<br><br>

<div style="background:red;">div (block)</div>

<br><br>

<div style="background:red;width:100%;">div width:100%; (block)</div>
</body></html>

Synes godt om

mclemens Nybegynder

29. august 2006 - 10:21 #3

eksempel på en mulig fejl:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div style="position:relative;height:0px;"><div style="position:absolute;">

<span style="width:100%;background:red;">span (inline width 100%)</span>

<br><br>

<span style="width:100%;background:red;display:block;">span (block width 100% - brug div istedet)</span>

<br><br>

<div style="background:red;">div (block)</div>

<br><br>

<div style="background:red;width:100%;">div width:100%; (block)</div>

</div></div>
</body></html>

vs.:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div style="position:relative;height:0px;"><div style="position:absolute;width:100%;">

<span style="width:100%;background:red;">span (inline width 100%)</span>

<br><br>

<span style="width:100%;background:red;display:block;">span (block width 100% - brug div istedet)</span>

<br><br>

<div style="background:red;">div (block)</div>

<br><br>

<div style="background:red;width:100%;">div width:100%; (block)</div>

</div></div>
</body></html>

Synes godt om

mclemens Nybegynder

29. august 2006 - 10:22 #4

Det var fejlen mm12010 bl.a. nævner ...

Synes godt om

roenving Novice

31. august 2006 - 10:05 #5

Kunne du bruge det ?-)

Synes godt om

sansalvador Nybegynder

31. august 2006 - 11:39 #6

Ja, undskyld forsinkelsen, men mit virkelige liv måtte lige anvendes lidt :)

Ja, jeg må tage til mig, at jeg faktisk selv lavede fejlen...

Det var overflow: hidden, der gjorde udslaget... Den er fjernet, og det virker fint. Men jeg har lært en del af, det mcclemens har skrevet.

Og det må jeg da sige, at det må belønnes :)

Synes godt om

sansalvador Nybegynder

26. november 2006 - 20:38 #7

...

Synes godt om

mclemens Nybegynder

26. november 2006 - 21:01 #8

Sorry, jeg sover / overser ;)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS