problem med styring af div tags med margin.

Vil tro det du er ude efter kan gøres ved at erstatte margin-top i #Banner, med "padding-top: 10px;" i #Wrapper.

Og height skal reduceres med de 10 px fra padding, da padding lægges til højden på din Wrapper.

Synes ikke rigtig det virker.

Padding er og også afstanden mellem elementet og border, hvor margin er afstanden fra border til et andet element, hvilket er det jeg gerne vil styre.

Med padding attributten gør jeg jo bare boxen større.

Højden skal gøres tilsvarende mindre (634px).

Forklaring til hvorfor du ikke bare kan tilføje en margin på din #Banner:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Hmm, jeg sad og læste lidt igår, men jeg må sige at jeg ikke forstår det hele - men det kommer nok.

Jeg fik da fat i at men på den vertikale akse ikke kan have flere på hinanden marginer, da de så falder sammen (Kolapser).

Jeg sad og testede lidt her til morgen og fandt ved et uheld ud af af hvis jeg afsætter en padding-top: 1px; på #Wrapperen, kan jeg med margin på #Banner flytte boksen vertikalt som jeg ønsker det.

Kan du forklarer dette lidt nærmere ???

/Lemche

Her er lige den nye kode:

body
{
  margin: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #444444;
}

div#Wrapper
{
    width: 994px;
    height: 644px;
    padding-top: 1px;
    margin-left: auto;
    margin-right: auto;

    background-color: white;
}

div#Banner
{
    width: 100%;
    height: 50px;
    margin-top: 20px;
    background-color: Blue;
}

Ja, din padding på #Wrapper forhindrer margin fra #Wrapper og #Banner i at kollapse, i følge denne regel:
"no line boxes, no clearance, no padding and no border separate them"

Super tak for svaret.

Jeg ville lige høre om du også har styr på "Display: inline" ??

Jeg forsøger i min Banner blok at få sat 3 elementer ind.
Et logo (img) i venstre side, en H1 i midten og et form element i højre side.

og jeg kan ikke rigtig få det virke selvom jeg bruge inline.

/Lemche

Hvilke problemer får du? Er det fordi du prøver at sætte bredden på de forskellige elementer du laver inline? For så skal du bruge "display: inline-block;" i stedet, da inline elementer ignorer bredden.

Ok det forklarer mit problem.

Som du nok kan se er jeg i min spæde start i at forstå, hvordan man sætter en side op med CSS.
Jeg forsøgte engang med tables, men opgav, da jeg syntes det var for svært.

Da jeg gik igang med at læse om CSS mente jeg at have fundet de vise sten, men det er altså ikke så nemt som man først tror.

Jeg mener at have forstået BOX modellen i basis med forskellen på margin, border, og padding på de enkelte elementer, men jeg har lidt svært ved alle reglerne der forholder sig til elementerne.

Jeg troede også at det ville gøre arbejdet nemmere at man designede sin side til at starte med, med div tags, som man gav størrelse og form, hvorefter man kunne komme forskellige ting ind i disse div tags. Jeg er dog ikke helt sikker op dette mere.

Det virker ikke somom det gør tingene lettere.
Jeg troede faktisk at disse div blokke flød mere på siden - altså at man kunne placerer dem hvor man ville (forskudt, oven på hinanden, ved siden af hinanden, osv.) men det kan jeg slet ikke få til at virke.

men for at vende tilbage til mit problem så ligger det i at jeg ville have en header blok (div tag) i toppen af siden. Inden i denne blok ville jeg have et logo (img) i venstre side - en overskrift i midten (H1)- og et login felt (form) i højre side.

Logoet kan jeg sagtens placerer, men så begynder problemerne at opstå. Overskriften skal centreres og nu kan jeg jo ikke længere bruge margin-left: auto til dette. Dernæst skal jeg bruge padding-left fir at få mit form felt helt til højre.

Måske er det bare mig der ikke skriver den rigtige kode eller også mengler min forståelse lidt i hvordan elementerne forholder sig til hinanden.

/Lemche

Men vi er måske over og snakke positioning istedet??

Det har jeg ikke rigtig fået set på endnu.

/Lemche

Du kan godt løse det med positioning. F.eks. ved at tilføje:

div#Banner
{
    position: relative;
}
img {
    position: absolute;
    top: 0;
    left: 0;
}
h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
form {
    position: absolute;
    top: 0;
    right: 0;
}

Så h1 og form placeres med absolut positionering i #Banner. Jeg bryder mig ikke selv om denne løsning, da det hurtigt kan blive noget rod hvis man senere skal justere på positionerne. Men den er uafhængig af hvad bredden på #Wrapper er sat til, og du behøver ikke at vide hvad bredden på logoet og din login form er.

Husk også at sætte en DOCTYPE på din html side hvis du ikke allerede har det, ellers kan du ikke regne med at css-koden fungerer som forventet.

Ja, jeg har læst lidt på det i dag efter arbejde.

Men jeg fik faktisk også positioneringen til at virke bare med div tags.

Det eneste jeg ikke kan få til at virke med div tags er at centrerer den miderste div boks.

Jeg har brug auto i margin left/right men det virker ikke.
Jeg smider lige koden neden for, måske kan du se hvad jeg gør galt??  :o)

Men ellers kan du svare, så sender jeg en røvfuld point i din retnin, du har været til stor hjælp.

Mange tak.

HTML:
<div id="Wrapper">

    <div id="Header">

          <div id="nr1"><img id="Logo" src="H:/My Web Design/Sites/Homefit/Homefit Beta 0.1/Images/house icon.jpg" alt="Logo"></div>
          <div id="nr2"></div>
          <div id="nr3"><p>Register | Login</p></div>
    </div>

  </div>


CSS:
div#Wrapper
{
    width: 994px;
    height: 644px;
    padding-top: 1px;
    margin: auto;
    background-color: white;
    border-color: #800080;
}

div#Header
{
    width: 100%;
    height: 80px;
    margin-top: 30px;
    background-color: Blue;
}

#nr1
{
  display: inline-block;
  background-color: Red;
  height: 50px;
  width: 150px;
  Margin-top: 0px;
  float: left;
}

#nr2
{
  display: inline-block;
  background-color: Yellow;
  height: 50px;
  width: 150px;
  margin-top: 45px;
  margin-left: 10px;
  /*margin-right:auto;
  float: left;*/
}

#nr3
{
  display: inline-block;
  background-color: Green;
  height: 50px;
  width: 250px;
  margin-top: 15px;
  float: right;
}

#Logo
{
  height: 50px;
  width: 50px;
}

At centrere ting med css kan give en masse hovedbrud, det er desværre ikke altid så ligetil. :)
Men hvis du alligevel kender bredden på de forskellige elementer, så er den nemme måde:

#nr2
{
  display: inline-block;
  background-color: Yellow;
  height: 50px;
  width: 574px;
  margin-top: 45px;
  margin-left: 10px;
  /*margin-right:auto;
  float: left;*/
  text-align: center;
}

Jeg har kun ændret width og tilføjet text-align. Teksten er gjort centreret og bredden er lavet så der lige akkurat er luft mellem #nr2 og #nr3 på 10px, så det svarer til din venstre margin. Du kan også fjerne venstre margin og øge width med 20px.

Hvis du tilføjer float:left på #nr2 kan du fjerne dine display:inline-block, så de bare er block som default.

Jeg samler ikke point, så dem beholder du bare.

Takker.

Jeg tror faktisk at det er lykkedes mig at forstå en del mere omkring hvordan jeg kan manipulerer de forskellige blokke.

Endnu engang tak for hjælpen.

Så lukker jeg den bare
/Lemche