Darren: positionierungs problem

SELF-Forum

positionierungs problem

Darren
– Informationen zu den Bewertungsregeln

Folgendes:

Ich arbeite mit ein CMS namens Typo3.
Ich versuche ein template mittels css zu erstellen.

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

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

###TEMPDOK###
</div>

</body>

</html>

Hier meine css:
body {
  text-align:center;
                background-color: #99CCFF;
                font-size: 11px;
                padding:0px;
                margin:0px;
background-image: url(bbb.gif);
  }

#container {
  width:800px;
                height: 100%;
                border: solid;
                Border-left-width: 5px;
                border-color: #ffffff;
                margin-top:20px;
                margin-bottom: 20px;
  margin-right:auto;
  margin-left:auto;

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

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

#content {
  width:430px;
  padding:0px;
  float:left;
  background:#eee;
  }

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

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

#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;
height: 50px;
width: 100%;
background-color: rgb(255,255,243);
color: #666666;
text-align: center;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

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