Newbie-Problem: zentrierte Homepage und Footer-Position

nessalein1988 · 12.10.2009

Hallo Zusammen,

ich habe in der Schule gerade Homepage-Design gelernt...also nur angeschnitten, nun versuche ich mich gerade mal an einem Design, nur gibt es da ein paar Problemchen:
1. ich will meinen Footer fest positionieren, also dass er unten bleibt und nicht mit jeweiligem Inhalt hochrutscht.
2. Die Homepage soll zentriert im Browser-Fenster erscheinen.

bei dem 2. Problem habe ich bereits einige Lösungsvorschläge im www gefunden, jedoch zentriert sich bei mir der Text mit, die Hilfen waren

<body>
<center>
...
</center>
</body>

und die andere Variante war innerhalb der css-Datei, wobei ich den Wrapper mit "text-align: center" definieren sollte... auch das führte zu zentrierten Texten, auch wenn ich in den anderen Boxen gesagt hatte, dass der Text linksbündig sein soll.

braucht ihr einen quelltext oder gibt es eine allround-lösung? falls ja, wie bekomme ich den hier rein...also so, wie die anderen quelltexte hier im forum?

danke schonmal und liebe grüße,
Nessalein

cebito · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

Code:

#wrapper {
margin:0 auto;
}

und für den footer position:fixed; sollte deine zwei Problemchen lösen.

nessalein1988 · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

hey danke, das mit der zentrierung hat funktioniert. das mit dem footer löse ich grad noch... der saß nicht im wrapper.
schön, dass hier so schnell geholfen wird.

Edit: footer-Problem: und wie sage ich dem footer, dass er unten am wrapper sein soll?

Dressing · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

Das sollte gehen wenn du den footer nach dem container mit dem Inhalt auf deiner Seite aufrufst (wenn ich mich nicht irre).

Code:

<div id="wrapper">
   <div id="content"></div>
   <div id="footer"></div>
</div>

Der wrapper bzw. der content brauchen dabei dann eine min-height, damit ohne Inhalt der footer nicht ganz nach oben rutscht.

nessalein1988 · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

Also meine Struktur ist wie folgt:

Also laut deinem Code wäre das dann bei mir:
<div id="wrapper">
<div id="maincontent">
<div id="header"></div>
<div id="navi"></div>
<div id="content_1">...</div>
<div id="bild"></div>
<div id="footer"></div>
</div>
</div>

wäre das so richtig? falls ja, dann schau ich gleich mal, ob das dann mit dem footer funktioniert.

Dressing · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

Was hat das mit dem Bild und dem content_1 auf sich? Was kommen da für Inhalte rein?

Ansonsten müssten footer und header noch aus dem maincontent raus, bei dir sind die im Moment noch drin. Also eher so:

Code:

<div id="wrapper">
  <div id="header"></div>
  <div id="maincontent">
        <div id="navi"></div>
        <div id="content_1">...</div>
        <div id="bild"></div>
  </div>
  <div id="footer"></div>
</div>

nessalein1988 · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

also bei content_1 kommt text rein, eine art bildbeschreibung. und bei bild kommt das bild rein

kann man auch in eine box fassen, hab ich in der schule so gehabt...aber ich hab das lieber getrennt. struktur wird überarbeitet.

Dressing · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

Ist ja auch kein Problem das in zwei Boxen zu lassen. WENN die Dinger denn auch genau das tun was man will

Gackoo_duz · 12.10.2009

AW: Newbie-Problem: zentrierte Homepage und Footer-Position

Du kannst es auch so machen
habe zur besseren Sicht die Divs eingefärbt

Hier wird mit relativen umgebenden Objekt und darin absolut positinonierte Divs gearbeitet.
Der Footer ist unten am rand angeklebt. (bottom:0px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
margin;
padding:0;
}
#wrapper {
height: 600px;
width: 800px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#header {
height: 43px;
width: 100%;
background-color: #C3F;
position: absolute;
left: 0px;
top: 0px;
}
#navi {
background-color: #C00;
height: 405px;
width: 140px;
top: 82px;
left: 36px;
position: absolute;
}
#content_1 {
background-color: #60F;
height: 267px;
width: 292px;
left: 438px;
top: 83px;
position: absolute;
}
#bild {
background-color: #6C6;
height: 195px;
width: 187px;
position: absolute;
left: 216px;
top: 82px;
}
#footer {
background-color: #FC0;
position: absolute;
width: 100%;
bottom: 0px;
height: 50px;
}
</style>
<title>Seite</title>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="navi">navi</div>
<div id="content_1">content_1</div>
<div id="bild">bild</div>
<div id="footer">footer</div>
</div>
</body>
</html>