Problem mit <div> [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
Problem mit <div>

MrBona

31-12-2004, 23:01

Ich habe folgende Probleme:
Das <div id="header"> wird beim Firefox automatisch von einem Bild zum anderem gezogen. Beim Internet Explorer hat es allerdings nur die Länge von "Header". Wenn ich width: 100% machen würde, hätte ich folgendes: Bild + Fensterbreites Div + Bild und das will ich ja auch nicht.
Dann hab ich noch das Problem das die Menüs eigentlich bis zum unteren Fensterand gehen sollen. Würde ich aber wieder height: 100% machen hätte ich wieder folgendes: Bild + Fensterbreites Div.
Wie kann ich das also machen?

Die HTML Seite:
<html>

<head>
<title>Klassenwebsite der Klasse 8a, Engelsburg Kassel</title>
<link rel="stylesheet" type="text/css" href="./format.css">

<body>

<img src="./kl8a-logo.jpg" style="position: absolute; top: 0px; left: 0px;">
<img src="./eb-logo.jpg" style="position: absolute; top: 0px; right: 0px;">

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

<div id="menu_left">Linkes Menü<br><br><br><br><br><br><br><br><br><br><br></div>
<div id="menu_right">Rechtes Menü<br><br><br><br><br><br><br><br><br><br><br></div>
<div id="content">Inhalt</div>

</body>

</html>

Die CSS Datei:
/* ///// DOKUMENT \\\\\ */
body {
background: #E5E5E5;
margin: 0px 0px 0px 0px;
font-family: Arial, Verdana;
font-size: 14px;
color: #000000;
}

/* ///// LAYOUT \\\\\ */
#header {
background: #000033;
height: 86px;
position: absolute;
top: 0px;
left: 204px;
right: 204px;
color: #FFFFFF;
}
#menu_left, #menu_right {
background: #000033;
width: 158px;
color: #FFFFFF;
}
#menu_left {
position: absolute;
top: 103px;
left: 0px;
}
#menu_right {
position: absolute;
top: 103px;
right: 0px;
}
#content {
display: block;
position: absolute;
top: 98px;
left: 170px;
right: 170px;
}

Maschenka

05-01-2005, 11:46

Was hältst du davon, mit float: left und float: right zu arbeiten?

Für den Headerteil:

<div id="header">
<img src="bildlinks" style="float: left;">
<img src="bildrechts" style="float: right;">
Header</div>
<div style="clear: both"></div>

/* ///// LAYOUT \\ */
#header {
background: #000033;
height: 86px;
color: #FFFFFF;
border: 1px solid red;
}

Und hier ist was zum Nachlesen bezüglich dreispaltigen Layouts:
http://css4you.de/wslayout1/ex0010.html