Sliter litt med bokser i css

[kengdal]

Jeg sliter litt med å få plasert boksene slik jeg vill.

Jeg vill at desse boksene skal så etter hverandre nedover, centrer i midten av skjermen. Jeg hvet at jeg må skrive noe mer i koden med hva?

Jeg har ikke helt skjønt med på css boksene enda men jeg prøver

 

#Hedder {
 width:600px;
 height:150px;
 padding:0px;
               }

#Meny{
           width:600px
           height:50px; 
           padding:0px;   
           }

#Hoved{
           width:600px
           height:500px; 
           padding:0px;
           } 

[B4stian]

div.container {
width: 600px;
margin: 0 auto;
}

body {
text-align: center;
}

div#header {
width: 600px;
height: 150px;
}

div#meny {
width: 600px;
height: 50px;
}

div#innhold {
width: 600px;
height: 500px;
}

 

Det burde vel fungere ganske bra! Du kan jo ta en titt her også for koder til diverse oppsett!

 

EDIT: glemte center..

Endret 30. november 2004 av datating

[PoleCat]

Min versjon:

 

* {
margin: 0;
padding: 0;
}

body {
text-align: center;
}

#wrap {
width: 600px;
margin: 0 auto;
text-align: left;
}

h1 {
height:150px;
}

ul#meny {
 /* menyens egenskaper */
}

div#innhold {
 /* innholdsboksens egenskaper */
}

 

<div id="wrap">

 <h1>Headertekst</h1>

 <ul id="meny">
   <li><a href="#">Meny01</a></li>
   <li><a href="#">Meny02</a></li>
   <li><a href="#">Meny03</a></li>
   <li><a href="#">Meny04</a></li>
   <li><a href="#">Meny05</a></li>
 </ul>

 <div id="innhold">
   <p>Her kommer innholdet.</p>
 </div>

</div>

 

1. Du setter alt (som jeg har gjort) innenfor en container-div, som midtilles (#wrap).

2. Alle blokker innenfor #wrap vil automatisk fylle hele bredden (600px)

3. Du trenger ikke egen div til menyen, da menyen settes opp i en liste. Les om liste/meny-styling hos Listamatic.

4. headeren bør setttes som h1-element. Les min artikkel om bilde-erstatning.

6. * fjerner margin/padding på alle elementer.

 

Har ikke tid å forklare mer nå.

Endret 30. november 2004 av PoleCat

[kengdal]

Jeg klarer ikke å få centrert menyen min:

 

#meny ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color:
#CCCCCC;
color: #FFF;
width:100%;
font: normal 90% "Arial Black";
text-align: center;
border: thin dotted #ffffff
}

 

så vil jeg ha menyen ikke fult så bred

 

#meny ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color:
#CCCCCC;
color: #FFF;
width:400px;
font: normal 90% "Arial Black";
text-align: center;
border: thin dotted #ffffff
}

 

Men den legger seg ikke mitt under hedderen, den legger seg på venstresiden, hva skal jeg gjøre?

Endret 2. desember 2004 av kengdal

[PoleCat]

Hva mener du med sentrert? Elementene eller hele menyen?

 

Skjønner ikke hvorfor den legger seg til venstre for header (dersom du ikke har definert bredde for header), men det er nå greit.

Sett clear: left på menyen, så skal den iallefall "hoppe ned".