nicht angemeldet
Hallo!
Ich versuche gerade eine Seite zu bauen, die sich dem Bildschirm anpasst. Also verwende ich %-Angaben für Höhe und Breite von Elementen. Das Dumme ist nur, wenn ich einem div-Element eine Hintergrundfarbe zuweise und es mit % Angaben versehe zeigen mir mozilla und netscape die hintergrundfarbe nicht mehr an! der IE seltsamerweise schon.. mh... was komisch.. hierzu der Link auf eine Testseite
http://www.2zu1.eu
und der Quelltext von der CSS Datei und nachfolgend der Html Datei... Vielen Dank schon mal!!!:
CSS Datei:
html, body {
background-color:#ffffff;
}
/* Begin Layoutbereich */
div#head {
width: 100%;
height: 25%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #ffffff;
}
div#head_weis {
width: 4%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #ffffff;
float: left;
display: inline;
}
div#headline {
width: 41.1%;
height: 20%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000000;
float: left;
display: inline;
}
div#navigation {
width: 100%;
height: 25%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #ffffff;
}
div#navi_weis {
width: 4%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #ffffff;
float: left;
display: inline;
}
div#navi_line {
width: 86%;
height: 20%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000000;
float: left;
display: inline;
}
div#body {
width: 100%;
height: 60%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #cbbfc1;
}
div#content_weis {
width: 4%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
float: left;
display: inline;
}
div#content {
width: 41%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
float: left;
display: inline;
}
div#picture {
width: 45%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000000;
float: left;
display: inline;
}
div#foot {
width: 100%;
height: 15%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #ffffff;
float: right;
}
div#foot_weis {
width: 10.1%;
height: 15%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #ffffff;
float: right;
}
div#foot_logo {
width: 45%;
height: 15%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000000;
float: right;
}
/* Ende Layoutbereich */
h1.content {
font-family: Arial, Myriad;
font-size: 100%;
font-style: normal;
font-weight: bold;
text-decoration: none;
color: #000000;
margin: 25px 20px 0px 20px;
padding: 0px;
}
p.content {
font-family: Arial, Myriad;
font-size: 80%;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #000000;
margin: 10px 20px 20px 20px;
padding: 0px;
}
Html Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>::::: ATRIUM :::::</title>
<link rel="stylesheet" media="screen" href="atrium.css" type="text/css">
</head>
<body>
<!-- Anfang Seite -->
<!-- Anfang Head -->
<div id="head">
<div id="head_weis"></div>
<div id="headline"></div>
</div>
<div id="navigation">
<div id="navi_weis"></div>
<div id="navi_line"></div>
</div>
<!-- Anfang Content -->
<div id="body">
<div id="content_weis"></div>
<div id="content" style="background-image: url(pics/holz_herz_farbe.jpg);">
<h1 class="content">Franz jagt</h1>
<p class="content">
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890; Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, 1234567890;
</p>
</div>
<div id="picture"><img src="pics/holz_herz_gr.jpg" alt="" width="100%" height="100%"></div>
</div>
<!-- Anfang Footer -->
<div id="foot">
<div id="foot_weis"></div>
<div id="foot_logo"></div>
</div>
</body>
</html>