Div-Problem

Hannesd

Hallo,
versuche gerade eine Seite die ich mithilfe von Photoshop designed habe zu verwirklichen.
Im großen und ganzen sollte diese so aussehen:

[Blockierte Grafik: http://www.bilder-hochladen.net/files/thumbs/gilk-1.jpg]

Habe nun versucht die einzelne Elemente in Div-Container zu verschachteln, was im oberen Teil (Nav+Header) der Seite auch gut funktionierte.

Jetzt sieht es also folgendermaßen aus:
[Blockierte Grafik: http://www.bilder-hochladen.net/files/thumbs/gilk-2.jpg]

Wie ihr aber wahrscheinlich seht habe ich dort 2 Probleme. Erstens Will ich dass der Content mind. die restliche Seite des Browserfensters ausfüllt. Habe dass schon mit 100% height versucht, aber will irgednwie nicht funktioneren. Das zweite Problem wäre der Rand zwischen Header und Content..Lässt sich dass irgendwie mit margin beheben? Wenn ja, wie?

Hier noch mein Quelltext:

<!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=utf-8" />
<title>FMG - Unikat</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<div class="container1">
<div class="nav">
<div class="header">
</div>
</div>
</div>
<div class="container2">
<div class="content">
<p>Inhalt</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</center>
</body>
</html>

Und mein CSS-File:

.container1 {
width:100;
height:400px;
background-image:url(images/bg.gif);
background-repeat:repeat-x;
}
.nav {
width:980px;
height:120px;
}
.header {
background-image:url(images/header.gif);
background-repeat:no-repeat;
width:980px;
height:280px;
position:absolute;
top:120px;
left:auto;
}
.container2 {
background-color:#E9E9E9;
width:100;
height:auto;
}
.content {
background-color:#FFF;
width:980px;
height:auto;
}

Könnt ihr mir helfen?

Viele Dank schonmal..

sejuma

Hier fehlt eine Maßeinheit beim width-Wert:

Zitat

.container1 {
width:100;
height:400px;
background-image:url(images/bg.gif);
background-repeat:repeat-x;
}

Wenn es 100% sein sollen, dann fehlt ein Bezugspunkt, worauf sich diese beziehen.
Definiere dann also noch für html und body 100% Breite.

Wozu und warum verwendest du absolute Positionierungen?

Die margin-Angaben für body solltest du per CSS hinterlegen.
Der center-Tag ist veraltet. Zentriere besser so: http://www.ohne-css.gehts-gar.net/0001.php

Hannesd

Wie ist das gemeint mit dem Bezugspunkt?
Ich habe ja im Prinzip 2 Divs mit einer 100%igen Breite, einmal der im oberen Teil, sprich Navi+Header, der in der Höhe bis 400px reichen sollte. Und anschließend sollte der zweite Div (container2) ab 400px bis auto bzw. mind. Fensterrand reichen. Wie kann ich den "Bezugspunkt" herstellen?

Danke schonmal!

Gruß

synaptic

der bezugspunkt ist dabei ein eltern-element, am besten schreibste im css sowas wie:

Code

body{
height:101%;
width:100%;
padding:0;
margin:0;
border:0;
}

so haste den bezugspunkt und direkt eiune browser-nullung (die hilft dabei wenn elemente eigentlich eigene abstände out of the box haben)
dann is

Code

position:absolute;

totaler humbug, wenn man damit nicht umzugehen weiß.
lass des alles mal raus und benutze lediglich padding und margin zum positionieren.
willst elemente neben einander haben, dann mach

Code

float:left;

oder

Code

float:right;

und sobald du mit floaten fertig bist machste nen br und gibst dem ding nen

Code

clear:both;

mit.

Hannesd

Okay, habe mein komplettes Konzept nochmals überarbeitet.
Hier das aktuelle:

HTML:

Zitat

<body>
<center>
<div id="container">
<div id="nav"></div>
<div id="header"></div>
<div id="content">aaaaaaa</div>
</div>
</center>
</body>

Alles anzeigen

CSS:

Zitat

body {
margin:0px;
background-image:url(images/bg.gif);
background-repeat:repeat-x;
background-color:#E9E9E9;
}
#container {
width:100%;
height:400px;
}
#nav {
width:980px;
height:120px;
}
#header {
background-image:url(images/header.gif);
width:980px;
height:280px;
}
#content {
background-color:#FFF;
width:980px;
height:100%;
}

Alles anzeigen

Meine beiden (hoffentlich letzten) Probleme sind nun folgende:
1. Das Center-Attribut lässt sich irgendwie nicht ersetzen? Ich habe es schon mit der margin-Lösung versucht, es will aber irgendwie nicht.
2. Zudem will mein eigentlicher Contentdiv, der die Hintergrundfarbe weiß hat nicht komplett bis zum unteren Fensterrand reichen, obwohl er auf 100% Höhe gesetzt ist. Browserabhängig ist dieser Abstand unterschiedlich groß.

Wäre nett wenn ihr mir nochmals helfen könnt!

Liebe Grüße

sejuma

Du brauchst center nicht zu ersetzen, sondern kannst es löschen.
Definiere dafür

Code

#container { 
width:980px;
margin: 0 auto;
}

Zu 2:
Das bekommst du so nicht hin.
Die 100% richten sich am Elternelement aus. Somit musst du noch hinterlegen:

Code

html, body {height: 100%;}

Damit wird die Seite jedoch höher als 100% weil noch die Höhen von nav und header hinzukommen.
CSS kann keine px von Prozentwerten subtrahieren.

Versuch's insgesamt mal so (ungetestet):

Code

html {
height: 100%;
width: 100%;
}


body {
margin:0px;
background-image:url(images/bg.gif); 
background-repeat:repeat-x; 
background-color:#E9E9E9;
height: 100%;
width: 100%;
}
#container { 
width: 980px;
margin: 0 auto;
min-height: 100%;
background: #fff;
}


#nav {
height:120px;
}
#header {
background-image:url(images/header.gif); 
width:980px;
height:280px;
}

Alles anzeigen

Auf content kannst du prinzipiell auch noch verzichten. Dessen Inhalt kannst du direkt in container schreiben.

Code

<body>


<div id="container">
<div id="nav"></div>
<div id="header"></div>
Inhalt
</div><!--Ende #container-->


</body>

Alles anzeigen

Du siehst: Weniger ist mehr!

Hannesd

Hat funktioniert!
Musste noch im nav-Div den bg.gif neu definieren, da der weiße Content-Hintergrund im Nav überlappte. Jetzt funktionierts!

Viele Dank,
Gruß

Tags