nicht angemeldet
verschachtelte Layer
Hallo zusammen,
ich bin noch recht unerfahren mit der Anwendung von Layern (<div>) und möchte wissen, ob es möglich ist einen der layer der einen anderen umgibt (einschachtelt) dynamische nach der größe des inneren layers auszurichten.
Das zugrundeliegende Problem ist dabei, dass ich im inneren Layer mal mehr oder weniger Text habe, und jenachdem wieviel Text das ist, soll sich der äussere layer daran anpassen.
Wie realisiere ich das am einfachsten ?
Danke für Eure Hilfe,
Plichel
-
hi,
ich bin noch recht unerfahren mit der Anwendung von Layern (<div>) und möchte wissen, ob es möglich ist einen der layer der einen anderen umgibt (einschachtelt) dynamische nach der größe des inneren layers auszurichten.
Wenn du nicht explizit etwas anderes in deinem CSS vorgibst, wird ein im normalen Fluss befindliches Element immer die Höhe seiner Vorfahren bestimmen.
Das zugrundeliegende Problem ist dabei, dass ich im inneren Layer mal mehr oder weniger Text habe, und jenachdem wieviel Text das ist, soll sich der äussere layer daran anpassen.
Wie realisiere ich das am einfachsten ?
Mit
<div>
<div>Inhalt</div>
</div>(Natürlich nur, sofern es keine semantisch geeigneteren Elemente dafür gibt.)
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
und ich vermute, das Du die gleichen fallstricke hattest die ich auch am Anfang hatte?
Dein innerer "div" ist per CSS mit position: absolut, oder "float: left" oder "float:right" aus dem Fluss genommen.
Hier kann aber nur ein Beispiel mehr Informationen bieten.
Liebe Grüße,
Bernd
-
Folgendes Beispiel würde ich anführen um meine Schwierigkeiten zu mit Layern zu verdeutlichen: Damit die beiden mittleren layer nebeneinander liegen, habe ich eben ein "float:left" verwendet. dadurch geht der Text dann auch über den grünen layer. wenn ich die absoluten höhenangaben auskommentiere dann rutscht der footer neben den grünen layer. ich will aber dass der footer dann auch als footer die seite abschließt und sich an den grünen layer ausrichtet.
bsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style>
body {
background-color: #ccc;
font-family:Tahoma, Arial Black, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
#wrapper{
width: 600px;
}
#obenquer {
background: #FF0;
height: 200px;
clear: both;
}
#drunterlinks {
background: #0F0;
height: 100px;
width: 50%;
float: left;
}
#drunterrechts {
background: #F0F;
height: 100px;
}
#footer {
background: #444444;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="obenquer">obenquer</div>
<div id="drunterlinks">
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
</div>
<div id="drunterrechts">drunterrechts (relative)</div>
<div id="footer">fussleiste</div>
</div>
</body>
</html>-
Folgendes Beispiel würde ich anführen um meine Schwierigkeiten zu mit Layern zu verdeutlichen: Damit die beiden mittleren layer nebeneinander liegen, habe ich eben ein "float:left" verwendet. dadurch geht der Text dann auch über den grünen layer. wenn ich die absoluten höhenangaben auskommentiere dann rutscht der footer neben den grünen layer. ich will aber dass der footer dann auch als footer die seite abschließt und sich an den grünen layer ausrichtet.
bsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style>
body {
background-color: #ccc;
font-family:Tahoma, Arial Black, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
#wrapper{
width: 600px;
}
#obenquer {
background: #FF0;
height: 200px;
clear: both;
}
#drunterlinks {
background: #0F0;
height: 100px;
width: 50%;
float: left;
}
#drunterrechts {
background: #F0F;
height: 100px;
}
#footer {
background: #444444;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="obenquer">obenquer</div>
<div id="drunterlinks">
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
drunterlinks (relative)<br>
</div>
<div id="drunterrechts">drunterrechts (relative)</div>
<div id="footer">fussleiste</div>
</div>
</body>
</html>hab mal fix noch das bsp zum angucken veröffentlicht:
http://www-cgi.uni-regensburg.de/~thm09830/test.htm -
ja hab grad ne vorläufige lsg mit clear:left gefunden. wenn ich das im footer angebe orientiert er sich wieder am unteren rand des grünen layers
-
-
-