unabhängige div's an größte Höhe anpassen

unabhängige div's an größte Höhe anpassen

Beitragvon mente » 07.06.2006, 14:05

Hallo,

ich habe ein ähnliches Problem wie kran im "Eltern-Kind-Beitrag" ;-)

Ich habe verschiedene DIV-Bereiche für Header, Menü links, Inhalt, Menü rechts etc. und möchte nun per CSS-Befehl festlegen, dass sich das linke und das rechte Menü immer an die Höhe des jeweiligen Inhalts anpasst.

zur Zeit sieht's so aus (Menü's sind nur so lang wie der Menü-Inhalt):

||||| |||||||||||| ||||
||||| |||||||||||| ||||
||||| |||||||||||| ||||
*** |||||||||||| ||||
*** ||||||||||||

"*" = leerer Raum

es soll aber automatisch so aussehen (Menüs sollen so hoch werden wie der Inhalt (Mitte), auch wenn kein Menü-Inhalt mehr da ist (nur noch Hintergrundbild in Menü):

||||| |||||||||||| ||||
||||| |||||||||||| ||||
||||| |||||||||||| ||||
||||| |||||||||||| ||||
||||| |||||||||||| ||||
||||| |||||||||||| ||||

Ich hoffe, ich hab's einigermaßen gut erklären können...

Gibt's da Lösungen?

Ciao, mente.
mente
neu hier
 
Beiträge: 6
Registriert: 07.06.2006, 13:56

Beitragvon Laus » 07.06.2006, 14:13

Hallo mente

die einfachste Methode ist faux columns und der Anweisung min-height für den Inhaltsbereich. Für weitere Losungen bräuchte man einen Link zum ansehen oder den Quelltext mit css.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1221
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon mente » 07.06.2006, 14:28

Danke erstmal.
Aber mit den fauxcolumns komme ich nicht viel weiter...
Min-height bringt auch nichts, weil sich entweder das linke, das rechte Menü oder der Inhaltsbereich an das jeweils höchste Element anpassen soll.

Ist also das rechte Menü am höchsten, dann sollen das linke Menü und der Inhalt genauso hoch werden usw. Da das wechselt, also auch mal der Inhaltsbereich am höchsten ist, muss das je nach Situation automatisch angepasst werden.

Der Code würde nichts nützen. Es sind nur 4 eigenständige <div>-Elemente (header, Menü links & rechts, Inhaltsbereich), die mit position:absolute positioniert wurden und deren height es an das jeweils höchste div-Element anpassen soll.

Gibt's da keine Tricks?

Ciao, mente.
mente
neu hier
 
Beiträge: 6
Registriert: 07.06.2006, 13:56

Beitragvon Laus » 07.06.2006, 14:37

Warum mit Position absolute meist liegt darin der "Hund begraben" poste doch mal Quelltext und css dann kann ich dir genaueres sagen. Eventuell hilft ja auch einen wrapper um die ganze Seite zu legen.
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1221
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon mente » 07.06.2006, 17:17

Hier der CSS-Abschnitt:

div#header {
width: 960px;
height: 140px;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 0px;
background-color: rgb(220,210,171);
position:absolute; top: 0px; left: 215px;
}

div#main {
width: 530px;
margin: 0px;
padding: 30px;
border-style: solid;
border-width: 0px;
background-color: rgb(155,255,255);
position:absolute; top: 140px; left: 225px;
}

div#menure {
width: 170px;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 0px;
background-color: rgb(255,255,255);
position:absolute; top: 140px; left: 815px;
background-image:url(bg_re.gif)
}

div#menuli {
width: 200px;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 0px;
background-color: rgb(255,255,255);
position:absolute; top: 140px; left: 25px;
background-image:url(bg_li.gif)
}


Hier der html-Teil:

<div id="main">Hier kommt der Inhalt</div>
<div id="header">Hier kommt der Header</div>
<div id="menuli">Hier kommt das linke Menü</div>
<div id="menure">Hier kommt das rechte Menü</div>

Das ist der Grundzustand. So sieht die Seite gut aufgebaut aus. Nur dass eben die jeweiligen Höhen sich nicht anpassen. Mit Verschachtelungen von divs hab ich es auch schon probiert...
mente
neu hier
 
Beiträge: 6
Registriert: 07.06.2006, 13:56

Beitragvon mente » 07.06.2006, 17:48

Dann gleich nochwas...

wenn ich padding: 30px; mache (siehe #main), schlägt der Firefox den Rand zur Breite zu, der IE aber nimmt sich die 30px so wie es gedacht ist von der Breite... Im Firefox wird die Box mit dem Inhalt (#main) also effektiv 590px breit, im IE bleibt sie bei 530px, hat aber trotzdem den 30px-Rand.
Kann man das irgendwie vereinheitlichen?
mente
neu hier
 
Beiträge: 6
Registriert: 07.06.2006, 13:56

Beitragvon Laus » 08.06.2006, 09:06

Hab dir mal den Code umgeschrieben. So dehnt sich das Layout je nach Länge der verschiedenen Spalten. Um einen durchgehenden Hintergrund zu bekommen benutzt du am besten Faux Columnes in dem du das Hintergrundbild in den Wrapper einbindest.
Wenn du den Footer nicht brauchst einfach auf 1px höhe setzen und die Hintergrund Farbe Transparent.


Code: Alles auswählen
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dreispalten mit Faux Columne</title>
<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
}


body {
text-align: center;
/* fuer aeltere IE */
}

#wrapper {
text-align: left;
width: 960px;
margin: auto;
}

#header {
height: 140px;
border: 0px solid black;
 background-color: rgb(220,210,171);
}

#menuli {
float: left;
border: 0px solid black;
width: 200px;
height: auto;
 background-color: rgb(255,255,255);
color: black;
}

#main {
float: left;
display: inline;
width: 530px;
border: 0px solid black;
 background-color: rgb(155,255,255);
color: black;
margin-left: 0px;
margin-right: 0px;
 padding: 30px;
}

#menure {
float: left;
display: inline;
width: 170px;
border: 0px solid black;
 background-color: rgb(255,255,255);
color: black;
}
#footer {
clear: left;
height: 5px;
border: 0px solid black;
 background-color: rgb(155,255,255);
}

//-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="menuli"><p>
Hier kommt das linke Menü
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum

</p></div>
<div id="main"><p>
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</p></div>
<div id="menure"><p>Hier kommt das rechte Menü</p>
</div>
<div id="footer">
</div>
</div>

</body>
</html>


Das mit der unterschiedlichen Breite der Boxen liegt am falschen Boarder Box Modell des IE,hier nachzulesen
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1221
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon mente » 08.06.2006, 09:56

Danke, nur kann ich keinen Unterschied zum Ausgangsproblem erkennen...
Schau dir mal den nachfolgenden Code an. Ich hab nur die Farben verändert. Wenn es so werden soll, wie ich es mir vorstelle, müssten pink (rechtes Menü) und blau (Inhalt) mit ihren Farben auf gleicher Höhe wie gelb (linkes Menü) abschließen.

Verstehst du wie ich das meine?

<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dreispalten mit Faux Columne</title>
<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
}


body {
text-align: center;
/* fuer aeltere IE */
}

#wrapper {
text-align: left;
width: 960px;
margin: auto;
}

#header {
height: 140px;
border: 0px solid black;
background-color: rgb(220,210,171);
}

#menuli {
float: left;
border: 0px solid black;
width: 200px;
height: auto;
background-color: rgb(255,255,155);
color: black;
}

#main {
float: left;
display: inline;
width: 530px;
border: 0px solid black;
background-color: rgb(155,155,255);
color: black;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}

#menure {
float: left;
display: inline;
width: 170px;
border: 0px solid black;
background-color: rgb(255,155,255);
color: black;
}
#footer {
clear: left;
height: 1px;
border: 0px solid black;
background-color: transparent;
}

//-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="menuli"><p>
Hier kommt das linke Menü
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum

</p></div>
<div id="main"><p>
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</p></div>
<div id="menure"><p>Hier kommt das rechte Menü</p>
</div>
<div id="footer">
</div>
</div>

</body>
</html>
mente
neu hier
 
Beiträge: 6
Registriert: 07.06.2006, 13:56

Beitragvon Laus » 08.06.2006, 13:44

Für dein Problem gibt es leider keine andere Praktikable Lösung als Faux Columnes. Wenn du diesen Artikel darüber gelesen hast, dann weißt du ja was ich meine. Du musst dir ein Hintergrundbild baseltn das deine drei Spalten abdeckt, mit den entsprechenden Hintergrundfarben oder Bildern. Dieses braucht nur 2 oder 3 Pixel hoch zu sein. Dieses bindest du in den Wrapper ein, der ja jetzt durch das float automatisch immer die größte Höhe annimmt, egal welche Spalte nun die längste ist.
Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1221
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon mente » 08.06.2006, 18:36

Hab deinen Code noch reichlich modifiziert, aber jetzt klappt's! Hab vielen Dank und vielleicht bis bald!

Mente
mente
neu hier
 
Beiträge: 6
Registriert: 07.06.2006, 13:56


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "unabhängige div's an größte Höhe anpassen"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder: Google [Bot]