Problem bei der Höhenangabe von Div

Gruftkruemel · 2. Juni 2008 um 21:51

Hallo Gemeinde^^

und zwar hab ich folgendes Problem:
wie man hier sehen kann, wird alles passabel angezeigt, jedoch weiß ich nicht, wie ich das Div mit dem Menü automatisch so hoch machen kann, wie das Div mit dem Inhalt ist…

CSS-Code:

[code]body
{background-color:#;
background-image:url(images/bg_2.jpg);
background-position:left top;
background-repeat:no-repeat;
padding-top: 200px;
}

#header1
{
position:absolute;
top:0px;
left: 150px;
border: solid 0px #FF0000;
width:20px;
height:150px;
background-image:url(images/design2_03.png);
text-align:center;
background-repeat:no-repeat;
background-position:left;
}
#header
{
position:absolute;
top:0px;
left:170px;
border: solid 0px #FF0000;
width:860px;
height:150px;
background-image:url(images/design2_04.png);
background-repeat:no-repeat;
background-position:center;
vertical-align:bottom;
}
.header
{
position:absolute;
top:0px;
left:170px;
border: solid 0px #FF0000;
width:860px;
height:150px;
background-image:url(images/design2_04.png);
background-repeat:no-repeat;
background-position:center;

vertical-align:bottom;
text-align:left;
}

#header2
{position:absolute;
top:0px;
left: 1030px;
border:0px solid #FF0000;
width:20px;
height:150px;
background-image:url(images/design2_05.png);
background-repeat:no-repeat;
background-position:right;
}

#menu
{
position:absolute;
top: 150px;
left: 150px;
bottom:100px;
border: solid 0px #0066FF;
width:340px;
height:133px;
min-height:470px;
background-image:url(images/design2_13.png);
background-repeat:repeat-y;

background-color:;
background-position:left;
padding-left:30px;
padding-right:30px;
padding-top:30px;

}

#inhalt
{
position: relative;
top: -58px;
left: 542px;
border:solid 0px #FF00FF;
width: 500px;
height:auto;
min-height:500px;
background-image:url(images/design2_14.png);
background-repeat:repeat-y;
background-color:;
background-position:right;
}

#footer1
{position:absolute;
top: 650px;
left: 150px;
border:solid 0px #FFFF00;
height:80px;
width: 20px;
background-image:url(images/design2_16.png);
background-repeat:no-repeat;
background-position:left;
}
#footer
{position: relative;
top: -58px;
left: 142px;
bottom:20px;
border:solid 0px #FFFF00;
height:80px;
width: 900px;
background-image:url(images/design2_16.png);
background-repeat:no-repeat;
}

#footer2
{position: absolute;
top: 650px;
left: 1030px;
border:solid 0px #FFFF00;
height:80px;
width: 20px;
background-image:url(images/design2_18.png);
background-repeat:no-repeat;
background-position:right;
}

.bottom
{position:absolute;
bottom:0px;
text-align:left;
}

.title
{
position:absolute;
bottom:22px;
text-align:left;
left: 514px;
width: 346px;
font:Arial, Helvetica, sans-serif;
font-size:1.1em;
color:#333333;
font-weight:bold;

}

#navigation a, #navigation a:visited , #navigation a:active {
display:block;
color:#000;
text-decoration:none ;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
padding-left: 8px; padding-right: 8px;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #000;border-right:solid 0px #000;
line-height:px;
height:17px;
text-align:center;
background-color:#FFF;
padding-bottom: 2px;
border-bottom:dashed #333 0px;
white-space: nowrap;}

#navigation a:hover {color:#000000;
background:#CDCDCD;
text-decoration:underline ;

padding-bottom: 2px;
}
a:link, a:visited, a:active{ font-size: 13px;line-height: 18px;font-family: monospace,verdana,arial, helvetica, tahoma ,verdana, sans-serif; text-decoration:underline;color:#000;background-color:transparent;
}

a:hover{ background-color:#000;
color:#fff;
}

#aktiv
{
color:#000;
background-image:url(images/bg_aktiv.png);
background-repeat:repeat-x;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
padding-left: 8px; padding-right:8px;padding-bottom:2px; padding-top:0px;
border-left:solid 0px #000;border-right:solid 0px #000;
height:17px;
text-align: center;
white-space:nowrap;}
[/code]

und der php-code:

[code]

<?php include('menue.php'); include('navi.php');?>

::: JMG - TIMES :::

Die Schülerzeitung
des Julius - Motteler - Gymnasiums

<?php echo $navi ?>

[/code]

Vielen Dank für eure HIlfe…

hoffmann · 3. Juni 2008 um 07:56

Schon von der Positionierung her haben die beiden ja gar nichts
miteinander zu tun, so wird das also nicht gehen.

Es stellt sich aber auch die Frage, warum ausgerechnet die
Höhen etwas miteinander zu tun haben sollten, wenn die ganz
anderen Inhalt haben, wozu soll das gut sein?

Wenn das dekorative Gründe hat, kann man vielleicht auch
einfach ein weiteres leeres div einfügen, was dann entsprechend
dimensioniert wird.
Meistens haben die Elemente keinen Bezug zueinander,
Ausnahmen sind da eben Eltern- und Kindelemente und solche
in einer entsprechend geeigneten Struktur, welche per display
Tabelleneigenschaften zugewiesen bekommen haben.
Wenn man solche Strukturen hat, also Elemente geeignet
verschachtelt sind, kann man sie auch per CSS in Bezug
zueinander setzen. Dann darf man sie aber nicht auch noch
positionieren wollen (relative und static sollte da noch gehen).

Steditor · 3. Juni 2008 um 12:15

Pack doch den ganzen Inhalt in ein div, das du dann positionierst, die inneren Divs musst du dann nicht mehr absolute positionieren, und kannst dem Menü die Höhe 100% geben. Das sind dann 100% des parentelements, das ja durch den Inhalt entsprechend gedehnt wird.

Gruftkruemel · 3. Juni 2008 um 12:26

Genau … ist eigentlich aus rein optischen Gründen…

wie genau würde das denn mit den Eltern-Kind-Beziehungen gehen?

Gibts da irgendwie eine Anleitung?

hoffmann · 3. Juni 2008 um 12:30

Das wird nicht funktionieren, eine Höhe von 100% ergibt nur
einen Sinn, wenn die Höhe des Elternelementes nicht durch
die Menge seines Inhaltes bestimmt wird. Man muß also vom
Elternelement entweder die Höhe explizit angeben oder aber
eben obere und untere Ecke des Elementes positionieren, wobei
letzteres Probleme bei älteren browsern verursachen wird,
ich meine, etwa MSIE 5/6? ist da überfordert.

Ansonsten ist wirklich die Frage, was wirklich gleich aussehen
soll - nur der Hintergrund? Dann reicht es doch, beide eben in
ein Element reinzusetzen und dem einen Hintergrund zu geben
statt jedem einzeln einen.

Wie display:table gedacht ist und sinnvoll funktioniert, ist in der
CSS-Spezifikation im Detail beschrieben, ich meine, damit haben
zumindest ältere Versionen vom MSIE aber Probleme, da muß
man dann wieder Abstriche machen.

Gruftkruemel · 4. Juni 2008 um 16:34

So - nun hab ich es erstmal mit dem Hintergrund hinbekommen.

Nun jedoch das weitere Problem:

IE zeigt es natürlich ein wenig anders an…
Wie könnt ich dies na dem anderen Design angleichen?

und… wie man hier sehen kann, wird unten so ein unnützer weißer Teil noch angefügt, und ich weiß nicht, woran es liegen kann…

hoffmann · 4. Juni 2008 um 17:30

Der ‘unnütze weiße Bereich’ wird wohl mit der
relativ-Positionierung zusammenhängen, du hast ja einige um
mehrere hundert Pixel nach oben geschoben, bei
relativ-Positionierung sind die dann natürlich unten dran letztlich
leer ;o)

Beim MSIE empfiehlt sich allgemein, die Fehler mit einer
gesonderten CSS-Datei innerhalb eines 'conditional comment’
referenziert zu kompensieren, damit die Seite immerhin lesbar
bleibt. Wenn man da noch Langeweile hat, kann man ja auch
für den versuchen, das noch einigermaßen ansehnlich
hinzubasteln, ist aber meist Herumprobiererei, weil man die
kumulierten Fehler bei dem meist nicht so einfach nachvollziehen
kann ;o)

Gruftkruemel · 4. Juni 2008 um 17:32

Hmm… also doch nicht einfach wegrationalisierbar…

Da ich von Natur aus der Mathematik ziemlich nahe bin…

Wieso musste ich eigentlich einige Divs soweit nach oben verschieben?

Bspw. “Inhalt”… das soll sich ja eigentlich an dem Hintergrund-Div orientieren, da müsste Top 0px sein… aber ich mussts ewig nach oben verschieben… aus unerklärlichem grund <.<

hoffmann · 4. Juni 2008 um 17:46

Nun, normalerweise wird das einfach im normalen Textfluß
angezeigt, also hier wohl unterhalb von dem #menu.
Offenbar willst du es daneben haben, was du mit einer
relativen Positionierung zu erreichen versuchst, was sonst kaum
jemand macht, weil dadurch ja darunter ein großer leerer Platz
entsteht ;o)
Man macht sowas dann zum Beispiel mit absoluter Positionierung,
da passiert das eben nicht ;o)

Wenn sich #inhalt an #bg orientieren soll, müßte #inhalt
absolut positioniert werden, klingt erstaunlich, ist aber so, weil
#inhalt innerhalb von #bg ist und #bg relativ positioniert ist ;o)

Gruftkruemel · 4. Juni 2008 um 18:10

Also #bg relativ lassen und #inhalt absolute positionieren (height auf auto) und der weiße platz könnte verschwinden?