Hvorfor kommer bildene utenfor n under div-enår...

peace2 · 1. mai 2006

Hvorfor kommer bildene utenfor div-en eller området bilda skal være i når jeg bruker Float ? kan noen sende en sjapp fix ferdig kode eller forklare hva jeg kan gjøre for å ungå dette problemet?

Edit:

Her er kodene og hvordan det ser ut

CSS

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */

 body { background-color: rgb(102, 102, 102);
   }

 #innhold { padding: 10px;
   background-color: rgb(255, 255, 255);
   width: 600px;
   margin-left: auto;
   margin-right: auto;
   }

 .bilde { float: right;
   }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

 <link media="screen" rel="stylesheet" href="main.css" type="text/css">

</head>


<body>

<div id="innhold">
<div><br>

tekst tekst teksttekst tekst teksttekst tekst tekst
tekst tekst tekst<br>

tekst tekst teksttekst tekst teksttekst tekst tekst<br>
tekst tekst tekstafd  
haifjhoadueuqqguuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuafd fad<br>

<h1> bildet</h1>
lite tekst her..<br>

<img class="bilde" alt="bilde" src="bilde.jpg"></div>

</div>

</body>
</html>

Endret 1. mai 2006 av xox

Even. · 1. mai 2006

Meg kode trenger.

Veldig vanskelig å si noe uten å få se koden. Det kan være mange grunner til at bildet kommer utfor vet du.

Arve Systad · 1. mai 2006

http://www.complexspiral.com/publications/containing-floats/ forklarer problemet ditt, og gir deg svar. Endret 1. mai 2006 av Arve Systad

Akerbak · 1. mai 2006

prøv en overflow: hidden; på bildediven?

peace2 · 2. mai 2006

prøv en overflow: hidden; på bildediven?

6025398[/snapback]

Det funka ikke ..

peace2 · 2. mai 2006

http://www.complexspiral.com/publications/containing-floats/ forklarer problemet ditt, og gir deg svar.

6025297[/snapback]

skal se når jeg får tid til det . masse å lese der :S .. håper noen kommer med en kort forklaring / kode..

Endret 2. mai 2006 av xox

JohnRichard · 2. mai 2006

HTML:

<div id="container">
 <h2>Simply dummy text</h2>
 <p><img alt="alt" src="bilde.png">Lorem ipsum...</p>
 <div class="clear"></div>
</div>

CSS:

div#container img {
border: 1px solid #222;
}

div#container img {
 float: right;
}

.clear {
 clear: both;
}

Edit: her er kjapp kode, ikke testet, men ca på det viset jeg gjør det.

Endret 2. mai 2006 av JohnRichard

peace2 · 2. mai 2006

HTML:

<div id="container">
 <h2>Simply dummy text</h2>
 <p><img alt="alt" src="bilde.png">Lorem ipsum...</p>
 <div class="clear"></div>
</div>

CSS:

div#container img {
border: 1px solid #222;
}

div#container img {
 float: right;
}

.clear {
 clear: both;
}

Edit: her er kjapp kode, ikke testet, men ca på det viset jeg gjør det.

6027360[/snapback]

Den fungerte heller ikke .. den så slik ut når jeg satt på bakgrunsfarge

Endret 2. mai 2006 av xox

JohnRichard · 2. mai 2006

Du har glemt:

<div class="clear"></div>

Edit: Og DOCTYPE skal være:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Endret 2. mai 2006 av JohnRichard

peace2 · 2. mai 2006

Du har glemt:
<div class="clear"></div>
Edit: Og DOCTYPE skal være:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
6027780[/snapback]

jah , åssen greide jeg å glemme dem? :blush: ,, funker fint nå :thumbup: takk for hjelpen

Edit: Jeg trengte ikke å endre doctype ...

Endret 3. mai 2006 av xox

JohnRichard · 4. mai 2006

Nei du trenger ikke for at dette skal virke, men hvorfor ikke gjøre ting riktig?

Les her du:

A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

For instance, many sites sport this DOCTYPE, copied and pasted directly from w3.org:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">

If you look at the last part of the DOCTYPE (“DTD/xhtml1-strict.dtd”), you’ll see that it is a relative link to a document on W3C’s site. Since that document is on W3C’s site but not yours, the URI is useless to the browser.

The DOCTYPE you’d actually want to use is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Notice that the latter DOCTYPE includes a complete URI at the end of the tag. Since the tag provides a valid location on the web, the browser knows where to find it, and will render your document in standards–compliant mode.

Endret 4. mai 2006 av JohnRichard

Magnus Holm · 4. mai 2006

Øhh? Hva skal han med xhtml? Html holder i massevis!

JohnRichard · 4. mai 2006

Javisst, men poenget var at han skulle bruke komplett URI til dokumentet, da hans side ikke ligger under w3c.org.

Magnus Holm · 4. mai 2006

Han har ikke URI i doctypen uansett

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

JohnRichard · 5. mai 2006

Nei, er jo det som er poenget, Doctype må inneholde korrekt URI

nree · 5. mai 2006

Legg bildet over alt teksten:

Før:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link media="screen" rel="stylesheet" href="main.css" type="text/css">

</head>


<body>

<div id="innhold">
<div><br>

tekst tekst teksttekst tekst teksttekst tekst tekst
tekst tekst tekst<br>

tekst tekst teksttekst tekst teksttekst tekst tekst<br>
tekst tekst tekstafd  
haifjhoadueuqqguuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuafd fad<br>

<h1> bildet</h1>
lite tekst her..<br>

<img class="bilde" alt="bilde" src="bilde.jpg"></div>

</div>

</body>
</html>

Nå:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link media="screen" rel="stylesheet" href="main.css" type="text/css">

</head>


<body>

<div id="innhold">
<div><br>
<img class="bilde" alt="bilde" src="bilde.jpg">

tekst tekst teksttekst tekst teksttekst tekst tekst
tekst tekst tekst<br>

tekst tekst teksttekst tekst teksttekst tekst tekst<br>
tekst tekst tekstafd  
haifjhoadueuqqguuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuafd fad<br>

<h1> bildet</h1>
lite tekst her..<br>
</div>

</div>

</body>
</html>

Logg inn

Hvorfor kommer bildene utenfor n under div-enår...

Anbefalte innlegg

peace2

Lenke til kommentar

Videoannonse

Even.

Lenke til kommentar

Arve Systad

Lenke til kommentar

Akerbak

Lenke til kommentar

peace2

Lenke til kommentar

peace2

Lenke til kommentar

JohnRichard

Lenke til kommentar

peace2

Lenke til kommentar

JohnRichard

Lenke til kommentar

peace2

Lenke til kommentar

JohnRichard

Lenke til kommentar

Magnus Holm

Lenke til kommentar

JohnRichard

Lenke til kommentar

Magnus Holm

Lenke til kommentar

JohnRichard

Lenke til kommentar

nree

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer