nicht angemeldet
div mit % angaben
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>
-
Hi,
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!
nun ja, auf 0 Pixeln Höhe lässt sich ein Hintergrund schlecht verteilen. Und 25% von 0px sind nun mal 0px.
der IE seltsamerweise schon..
Ja, dieser Bug ist bekannt.
und der Quelltext von der CSS Datei und nachfolgend der Html Datei...
Bitte beschränke geposteten Code auf das notwendige Minimum.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
nun ja, auf 0 Pixeln Höhe lässt sich ein Hintergrund schlecht verteilen. Und 25% von 0px sind nun mal 0px.
WELCHES Element muss ich denn dann WELCHEN wert zuweisen? Wenn ich alles in ein Div mit 100% Höhe und Breite setzte passiert nix... brauche da echt Hilfe..
der IE seltsamerweise schon..
Ja, dieser Bug ist bekannt.
hatte ich mir schon gedacht das ich da was falsch gemacht hab... :-) der IE wird ja wohl jetzt nicht plötzlich anfangen was richtig zu machen :-)
Bitte beschränke geposteten Code auf das notwendige Minimum.
Sorry.. wollte nur alles so genau wie möglich abbilden... ;-)
-
Hi,
WELCHES Element muss ich denn dann WELCHEN wert zuweisen? Wenn ich alles in ein Div mit 100% Höhe und Breite setzte passiert nix... brauche da echt Hilfe..
nein, Dein Ansatz stimmt. Nur brauchst Du kein zusätzliches Element, sondern musst den Gedanken einfach nur fortführen. Prozentwerte bei height richten sich immer nach der Höhe des nächsthöheren Elements - bis hin zum Viewport.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
nein, Dein Ansatz stimmt. Nur brauchst Du kein zusätzliches Element, sondern musst den Gedanken einfach nur fortführen. Prozentwerte bei height richten sich immer nach der Höhe des nächsthöheren Elements - bis hin zum Viewport.
Heißt das, ich muss dem body sagen er soll 100% hoch und breit sein..? Sorry wenn ich mich so blöd anstelle gerade.. stehe nur echt aufm Schlauch und mach da schon seit 3 Tagen rum... nicht genervt sein bitte :-)
-
Hi,
Heißt das, ich muss dem body sagen er soll 100% hoch und breit sein..?
hast Du es mal ausprobiert? Und auch mit dessen übergeordnetem Element?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
hast Du es mal ausprobiert? Und auch mit dessen übergeordnetem Element?
Hab jetzt
html, body {
width: 100%;
height: 100%;
}in der CSS Datei notiert, und nichts hat sich verändert.. hast Du das gemeint?
-
AHHH... doch hat geklappt.... MERCI!!! VIELEN VIELN DANK!
jetzt hats alles auseinander gezogen, und ich seh was ich alles falsch gemacht hab... :-)!!! DANKESCHÖN!!!BESTE GRÜßE!!!
-
Hi,
ich habe gerade ähnliche Probleme mit einer Tabelle, die sich nicht an die Höhe des Browserfensters anpassen will.
Wie hast du es geschafft, was hast du anders gemacht?
Danke,
Jochen
-
-
-
-
-
-