Gå til innhold

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

peace2

Anbefalte innlegg

peace2

peace2

Skrevet
Skrevet (endret)

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 av xox

Videoannonse

Videoannonse
Annonse
Even.

Even.

Skrevet
Skrevet

Meg kode trenger.

 

 

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

JohnRichard

JohnRichard

Skrevet
Skrevet (endret)

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 av JohnRichard
peace2

peace2

Skrevet
  • Forfatter
Skrevet (endret)
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 av xox
JohnRichard

JohnRichard

Skrevet
Skrevet (endret)

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 av JohnRichard
peace2

peace2

Skrevet
  • Forfatter
Skrevet (endret)
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 av xox
JohnRichard

JohnRichard

Skrevet
Skrevet (endret)

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 av JohnRichard
nree

nree

Skrevet
Skrevet

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>

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...