Gå til innhold

Problemer med bilde i CSS

spøkelse

Anbefalte innlegg

spøkelse

spøkelse

Skrevet
Skrevet

Jeg sliter litt med få plassert tekst litt under et bilde. Tror jeg har prøvd alle kombinasjoner av float og clear ...

 

post-11231-1175270582_thumb.jpg

 

Jeg ønsker rekka med "Hei på deg" ned under grønne bildet (boksen). Her er koden for dette forholdsvis enkle eksempelet, håper noen ser feil:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> 
   <title>Medlememr</title>
   <style type="text/css">
body 
{ 
 margin:0;
 background-color: #FDFFDF;
}

.header {
 margin: 20px;
 padding: 10px;
 height: 100px;
}

#left {
 position: absolute;
 left: 15px;
 top: 160px;
 width: 200px;
}

#center {
 top: 0;
 margin-left: 230px;
}

img {
 float: left; 
 margin: 0;
 padding: 0; 
}


div.medlemsboks{
 border: 3px solid #cccccc; background-color: #f0f8ff; padding: 5px;
 margin-bottom: 20px;
 width: 440px;
}


</style>

</head>

<body>

<div class="header" >
 <img src="dnk.jpg" alt="dnk bilde" />
 <h1>Medlemmer</h1>
</div>

<div class="header" >
 <img src="verklinje.jpeg" alt="verktøylinje" />
</div>

<div id="left">
 <p>Hei på deg</p>  
 <p>Hei på deg</p>
 <p>Hei på deg</p>
 <p>Hei på deg</p>
 <p>Hei på deg</p>
</div>
     
<div id="center">  
 <h2>Detaljerte medlemsopplysninger</h2>        
 <div class="medlemsboks">
 
   <table class="medlem">
   <tr> 
     <td class="bold">Medlemsnummer</td>
     <td class="bold">120</td>      	
   </tr>
   <tr> 
   	<td>Navn</td>
     <td>Petter</td>
   </tr>    
   </table>	
 </div>
</div>

</body>
</html>

Videoannonse

Videoannonse
Annonse
DemoniZer

DemoniZer

Skrevet
Skrevet (endret)

Klikk for å se/fjerne innholdet nedenfor
Jeg sliter litt med få plassert tekst litt under et bilde. Tror jeg har prøvd alle kombinasjoner av float og clear ...

 

post-11231-1175270582_thumb.jpg

 

Jeg ønsker rekka med "Hei på deg" ned under grønne bildet (boksen). Her er koden for dette forholdsvis enkle eksempelet, håper noen ser feil:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> 
   <title>Medlememr</title>
   <style type="text/css">
body 
{ 
 margin:0;
 background-color: #FDFFDF;
}

.header {
 margin: 20px;
 padding: 10px;
 height: 100px;
}

#left {
 position: absolute;
 left: 15px;
 top: 160px;
 width: 200px;
}

#center {
 top: 0;
 margin-left: 230px;
}

img {
 float: left; 
 margin: 0;
 padding: 0; 
}


div.medlemsboks{
 border: 3px solid #cccccc; background-color: #f0f8ff; padding: 5px;
 margin-bottom: 20px;
 width: 440px;
}


</style>

</head>

<body>

<div class="header" >
 <img src="dnk.jpg" alt="dnk bilde" />
 <h1>Medlemmer</h1>
</div>

<div class="header" >
 <img src="verklinje.jpeg" alt="verktøylinje" />
</div>

<div id="left">
 <p>Hei på deg</p>  
 <p>Hei på deg</p>
 <p>Hei på deg</p>
 <p>Hei på deg</p>
 <p>Hei på deg</p>
</div>
     
<div id="center">  
 <h2>Detaljerte medlemsopplysninger</h2>        
 <div class="medlemsboks">
 
   <table class="medlem">
   <tr> 
     <td class="bold">Medlemsnummer</td>
     <td class="bold">120</td>      	
   </tr>
   <tr> 
   	<td>Navn</td>
     <td>Petter</td>
   </tr>    
   </table>	
 </div>
</div>

</body>
</html>

8275171[/snapback]

 

<BR> <-- <3

 

Break-tags.. enkleste løsningen ;)

Med mindre du vil bruke tabels.

Endret av DemoniZer

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...