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ß
Beiträge von Hannesd
-
-
Okay, habe mein komplettes Konzept nochmals überarbeitet.
Hier das aktuelle:HTML:
ZitatAlles anzeigen<body>
<center>
<div id="container">
<div id="nav"></div>
<div id="header"></div>
<div id="content">aaaaaaa</div>
</div>
</center>
</body>CSS:
ZitatAlles anzeigenbody {
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%;
}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
-
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ß
-
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..