nicht angemeldet
div höhe auf 100% (und nicht 100% + irgnedwelche pixel)
0 0
div höhe auf 100% (und nicht 100% + irgnedwelche pixel)
Der MartinHallo Forum
Ich reisse mir seit einiger Zeit beinahe die Haare aus dem Kopf und zwar ab folgendem Problem:
Ich möchte ein simples Layout erstellen, dessen Idee ihr ab dem angehängten HTML-Code entnehmen könnt. Es soll ein Logo vorhanden sein sowie ein Content-Bereich, der 100% des Body einnimmt - abzüglich der Höhe des Logos (175px)!
Natürlich ist die gesamte Website in untenstehendem Beispiel dann 100% + 175px gross, was natürlich nicht Sinn der Übung ist. Ich habe von Handständen mit Tables bishin zu Rädern mit Divs alles mögliche Probiert, aber vielleicht habe ich einfach nach den falschen Keywords gesucht.
Könnte mir einer helfen, dieses problematische Layout umzusetzen? Ich würde gerne auf eine JavaScript-Lösung verzichten :-)
Grüsse, Boris
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>lorem ipsum dolor sit amet</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css" media="screen">
* {
color:#323232;
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
}
html,body {
height:100%;
margin:0px;
overflow:hidden;
padding:0px;
text-align:center;
width:100%;
}
img {border:0px;}
#logo {
height:175px;
width:600px;
}
#main {
height:100%;
margin:auto;
overflow:auto;
position:relative;
text-align:justify;
width:400px;
}
#bottom {
background-image:url(./img/struct/bottom_.gif);
background-position:center bottom;
background-repeat:repeat-x;
bottom:0px;
height:120px;
left:0px;
position:absolute;
width:100%;
z-index:1;
}
</style>
</head>
<body>
<img src="logo.jpg" id="logo" alt="this is the logo" align="center" />
<div id="main">
Hier ganz langen Text einfügen, damit Scrollbar entsteht.
</div>
<div id="bottom"></div>
</body>
</html>
-
Moin
Gib dem Main-div ein Position:absolute sage Bottom:0px und Top:175px sowie overflow:auto und schon solltes ungefähr wie gewünscht aussehen.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo,
Gib dem Main-div ein Position:absolute sage Bottom:0px und Top:175px sowie overflow:auto und schon solltes ungefähr wie gewünscht aussehen.
außer im IE, der AFAIK sogar in Version 7 noch zu doof ist, aus top und bottom die Höhe eines Elements zu berechnen (oder aus left und right die Breite). Ob der IE8 das inzwischen gelernt hat, weiß ich nicht.
Ciao,
Martin--
Alleine sind wir stark ...
gemeinsam sind wir unausstehlich!
-
Moin
außer im IE, der AFAIK sogar in Version 7 noch zu doof ist, aus top und bottom die Höhe eines Elements zu berechnen (oder aus left und right die Breite). Ob der IE8 das inzwischen gelernt hat, weiß ich nicht.
Also im 7er hatte ich glaube ich mit dieser Definition zumindest bei der Höhe keine Probleme. Kann mich aber auch täuschen. In der Breite gab es immer Probleme. Wie gesagt, kann auch sein das ich mich täusche. Einfach mal ausprobieren.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
Hallo,
Gib dem Main-div ein Position:absolute sage Bottom:0px und Top:175px sowie overflow:auto und schon solltes ungefähr wie gewünscht aussehen.
außer im IE, der AFAIK sogar in Version 7 noch zu doof ist, aus top und bottom die Höhe eines Elements zu berechnen (oder aus left und right die Breite). Ob der IE8 das inzwischen gelernt hat, weiß ich nicht.
Ciao,
MartinHoi Martin
Danke! Wusste gar nicht, dass man Top und Bottom gleichzeitig definieren kann. Habe hier leider keine Möglichkeit die Kompatibilität zu Überprüfen. Vorerst ist das aber OK so, danke.
Grüsse, Boris
-
Moin
Hoi Martin
|
Danke! Wusste gar nicht, dass man Top und Bottom gleichzeitig definieren kann. Habe hier leider keine Möglichkeit die Kompatibilität zu Überprüfen. Vorerst ist das aber OK so, danke.
1. Kam der Tip von mir... Ehre, wem Ehre gebühret... LACH... soviel Stolz muß sein.. Ich hab auch mal was richtig gesagt...
und
2. Unterlasse doch bitte TOFU
Danke
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
-
Hi,
Es soll ein Logo vorhanden sein sowie ein Content-Bereich, der 100% des Body einnimmt - abzüglich der Höhe des Logos (175px)!
Dann würde ich das Logo absolut positionieren, und dafür sorgen, dass das erste Element innerhalb des Inhalts (mit Mindesthöhe 100%) entsprechenden Abstand von oben hält. (Adjoining Margins beachten - deshalb Padding ggf. den Vorzug geben.)
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]