Zeromancer: positionierungs problem

Beitrag lesen

SELF-Forum

positionierungs problem

Zeromancer
– Informationen zu den Bewertungsregeln

Hallo Darren,

Er soll so aussehen:
ein container der alles zentriert hält
header in der gesamtlänge des containers
3 spalten neben einander
1 footer  in der gesamtbreite des containers

Das problem:
der footer bereich springt beim FireFox immer zum ende der mittleren spalte. Normalerweise ist die 3 spalte (rechts) viel länger und der footer müsste dadrunter kommen.

Hier mein body tempalte:

Doctype!

<html>

<head>
<title>Template</title>
</head>

<body>

###TEMPDOK###
<div id="container">

<div id="header">
banner
  </div>

<div id="left">
###MENU###
  </div>

<div id="content">
###CONTENT_NORMAL###
  </div>

<div id="right">
###CONTENT_RIGHT###
  </div>

Setze das Div mit der ID "right" im Quelltext hinter das Div mit der ID "left". Dies ist nötig, da du "float" nutzt.

<div id="copyright">
<p>@Copyright </p>
</div>

###TEMPDOK###
</div>

</body>

</html>

Hier meine css:
body {
  text-align:center;
                background-color: #99CCFF;
                font-size: 11px;

Nutze Besser "em"

padding:0px;
                margin:0px;
background-image: url(bbb.gif);
  }

#container {
  width:800px;
                height: 100%;

100% von was? Setze auch body auf 100%

border: solid;

Fasse doch zusammen: border: solid 1px #fff

Border-left-width: 5px;
                border-color: #ffffff;
                margin-top:20px;
                margin-bottom: 20px;
  margin-right:auto;
  margin-left:auto;

Fasse auch hier zusammen: margin:20px auto;

padding:0px;
                background-color: #ffffff;
  text-align:left;
  }

#left {
  width:175px;
  padding:0px;
  float:left;
  background:#F8F7EF;
  }

#content {
  width:430px;

Das brauchst du jetzt nicht mehr, da das Div mit der ID "content" den Inhalt zwischen left und right ausfüllt.

padding:0px;

float:left;

Das brauchst du jetzt nicht mehr, da das Div mit der ID "right" hinter dem Div mit der ID "left" im Quelltext kommt.

background:#eee;
  }

div#content {

doppelt?

min-height: 300px;
height:expression(this.scrollHeight > 300 ? "auto":"300px");
text-align:left;

du brauchst ein margin von der Breite der beiden Navigationenleft und right

}

#right {
  width: 175px;
  padding: 0px;
  float: right;
  background: #F8F7EF;
                margin: 0px;
margin-right:auto;
  margin-left:auto;

Was'n nun? Margin oder Float?

}

#header {
                padding: 0px;
                margin: 0px;
                background-image: url(bb.jpg);
                height: 200px;
                background-color:#ffffff;
  }

p,h1,pre {
  margin:0px 10px 10px 10px;
  }

h1 {
  font-size:14px;
  padding-top:10px;
  }

#header h1 {
  font-size:14px;
  padding:10px;
  margin:0px;
  }

#right p { font-size:10px}
}
#copyright {
clear: both;

position: absolute;

Quatsch! Lass den Elementen ihren Lauf!

height: 50px;
width: 100%;

#copyright ist div, ein blockelement mit standardbreite 100%

background-color: rgb(255,255,243);
color: #666666;
text-align: center;
}

So, das war's für's erste.
Mit freundlichen Grüßen,
André

Beitrag melden
–
Informationen zu den Bewertungsregeln