Gå til innhold

Nybegynner: Hvordan posisjonere "div" ved hjelp av CSS?

Chris_lox

Anbefalte innlegg

Chris_lox

Chris_lox

Skrevet
Skrevet

Hei!

 

JObber med min første nettside nå som skal være en portefølje. Siden skal bestå av en enkel bakgrunn, en header, en overskrift og en liten meny samt et tekstfelt.

 

Til nå ser HTML-koden slik ut:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
 <head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<meta name="generator" content="PSPad editor, www.pspad.com">  
<title>Testprosjekt
</title>  
<link href="global.css" rel="stylesheet" type="text/css " />  
 </head>  
 <body>  
<div id="container">	
  <div id="toppfelt">	
	<div id="logo">
	</div>		 
  </div>	 
  <div id="hovedfelt">  
	<div id="panda">
	</div>  
	<div id="tekstfelt">
	  <p class="overskrift">Panda
	  </p>   
	  <p class="brodtekst">Blablabl
	  </p>
	  <p class="brodtekst">blablabla
		<a class="menylink" href="http://hw.no" target="new" >LINK   </a>
	  </p>
	</div>
  </div>
</div>  
 </body>
</html>

 

Og her er css-fila:

 

/* CSS Document */



body {

margin: 0;

padding: 0;

font-family: "Georgia", sans serif;

text-align: center;

background-color: rgb(32,32,32)

}



#container {

width: 900px;

height: 1200px;

margin-left: auto;

margin-right: auto;

text-align: left;

margin-top: 10px;

background: url(./images/background1.jpg);

}



#toppfelt {

width: 900px;

height: 50px;

margin-top: 60px;

margin: auto;

background: url(./images/header.jpg)

}



#logo {

width: 490px;

height: 170px;

margin-left: 400px;

background: url(./images/.jpg);



}



#hovedfelt {

width: 899px;

height: 500px;

}



#panda {

width: 500px;

height: 500px;

background: url(./images/1316515038_8461d4e72c.jpg);

float: left;

}



#tekstfelt {

width: 350px;

height: 300px;

float: left;

margin-left: 10px;

margin-top: 10px;

padding: 15px;

background: url(./images/tekstfelt.jpg);

}



/* Stiler */



.overskrift {

color: #000;

font: 14px/20px;

font-weight: 900;



}



.brodtekst {

color: #000;

font: 12px/20px;



}



a.menylink:link, a.menylink:visited {

 margin-left: 0;

 color: #ff027f;

 font-weight: bold;

 text-decoration: none;

}



a.menylink:hover, a.link:active {

 color: #6f063a; 

}

 

Det jeg sliter veldig med er plassering av "div". Nå står de bare hulteribulter og jeg aner ikke hva jeg skal gjøre for å rette på dette. Hvis jeg for eksempel setter margin-top: 150px; på headeren dytter denne også containeren nedover, hvordan får jeg for eksempel headeren til å ligge "oppå" containeren som er bakgrunnen?

 

 

Chris :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse

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

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...