Frage zu CSS Positionierung
userohnenamen 11.04.2005 - 11:24 935 9
userohnenamen
leider kein name
|
ich beschäftige mich gerade ein bisschen mit positionierung mittels CSS ich hab hier auch eine beispielseite nach der ich vorgehen will http://bluerobot.com/web/layouts/layout3.htmlkönnte mir jemand helfen: ich will das das linke und rechte menü bis ganz nach unten am boden geht: d.h. genau so wie hier rot eingezeichnet ich bekomms aber einfach nicht hin derzeit sieht es so aus: und ich will erreichen das das linke und rechte menü und der mittlere content bis an den boden reichen und sich eben auch dynamisch anpassen an die browsergroße / textinhalt vom grundsätzlichen aufbau ist es genau gleich wie in der testseite, ich hab nur die pixelwerte für die positionierung geändert und das menü eingebaut etc...
|
Spikx
My Little Pwny
|
position:absolute; top:0px; bottom:0px; (also 0 Pixel Abstand oben und unten zum Elternelement)
|
Lowrey
Bloody Newbie
|
hast schon mal valign=bottom probiert ? und den spalte hast e auf height="100%" oder?
mfg Lowrey
|
Spikx
My Little Pwny
|
@Lowrey: das sind keine tables... also auf der Beispielseite wird der linke Bereich ja so realisiert: #navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
}
Füge mal dort bottom:20px; ein.. das streckt eben das div auf 20px vom unteren Rand weg. Funktioniert, soweit ich weiß, im IE übrigens nicht ohne iemarginfix.js
Bearbeitet von Spikx am 11.04.2005, 11:38
|
userohnenamen
leider kein name
|
@Lowrey: das sind keine tables...
also auf der Beispielseite wird der linke Bereich ja so realisiert:#navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
}
Füge mal dort bottom:20px; ein.. das streckt eben das div auf 20px vom unteren Rand weg. Funktioniert, soweit ich weiß, im IE übrigens nicht ohne iemarginfix.js danke funktioniert teilweise im Firefox und gar nicht im IE, auch nicht mit dem besagten iemarginfix.js was ich per google gefunden und eingebunden habe im firefox existiert noch das problem wenn der contentteil länger ist als eine seite, dann hört das div element genau da wieder auf wo die seite aus ist und darunter is es wieder weiß siehe bildausschnitt  es is somit zumindest ein ansatz, aber eine endgültige lösung leider nicht ich wollte endlich weg von tabellenlayouts kommen, und dann scheint es unmöglich so ein layout mit divs und css zu lösen (das deprimiert ...)
Bearbeitet von userohnenamen am 11.04.2005, 11:55
|
Spikx
My Little Pwny
|
danke funktioniert teilweise im Firefox und gar nicht im IE, auch nicht mit dem besagten iemarginfix.js was ich per google gefunden und eingebunden habe
im firefox existiert noch das problem wenn der contentteil länger ist als eine seite, dann hört das div element genau da wieder auf wo die seite aus ist und darunter is es wieder weiß siehe bildausschnitt
 Das lässt sich vielleicht mit einem Containerdiv lösen. Müsste selber wieder viel herumspielen um das zu verifizieren  Hm, wo ist nur da Rektal, wenn man ihn braucht?  Eigentlich sollte es im IE schon funktionieren... sicher, dass du da die neueste Version erwischt hast?
|
userohnenamen
leider kein name
|
Das lässt sich vielleicht mit einem Containerdiv lösen. Müsste selber wieder viel herumspielen um das zu verifizieren  Hm, wo ist nur da Rektal, wenn man ihn braucht? 
Eigentlich sollte es im IE schon funktionieren... sicher, dass du da die neueste Version erwischt hast? neueste version?  hab per google gesucht: http://www.google.at/search?hl=de&a...ix.js&meta=und beim zweiten ergebnis hab ichs runtergeladen gibts ne seite wo man immer die neueste version findet ?
|
watchout
Legendundead
|
Manche Dinge gehen mit CSS besser als mit Tables, andere nicht - und Andere wiederum gehen garnicht. Das ist ein Fall für Punkt 3. Problematik: "position:absolute" Bei absoluter Positionierung kann man nicht wirklich Prozentangaben machen, "bottom:x" funktioniert nur in Spezialfällen. Manche Seiten "faken" die Menüs indem sie dem Body die Hintergrundfarbe zuweisen und dann den Content darüberlegen, wodurch es aussieht als wäre links eine durchgehende Spalte. Aber dann wieder nur wenn der Content länger ist als das Menü, usw... mit "position:fixed" existiert eine Möglichkeit das Problem teilweise zu lösen (Wenn der Content länger ist als das Fenster gibt's wieder ein Problem...) aber das funktioniert wieder nur im Mozilla/Firefox Fazit: manchmal geht es doch nicht ohne Tables
|
userohnenamen
leider kein name
|
Manche Dinge gehen mit CSS besser als mit Tables, andere nicht - und Andere wiederum gehen garnicht.
Das ist ein Fall für Punkt 3.
Problematik: "position:absolute" Bei absoluter Positionierung kann man nicht wirklich Prozentangaben machen, "bottom:x" funktioniert nur in Spezialfällen.
Manche Seiten "faken" die Menüs indem sie dem Body die Hintergrundfarbe zuweisen und dann den Content darüberlegen, wodurch es aussieht als wäre links eine durchgehende Spalte. Aber dann wieder nur wenn der Content länger ist als das Menü, usw...
mit "position:fixed" existiert eine Möglichkeit das Problem teilweise zu lösen (Wenn der Content länger ist als das Fenster gibt's wieder ein Problem...) aber das funktioniert wieder nur im Mozilla/Firefox
Fazit: manchmal geht es doch nicht ohne Tables  ok, danke  dann werd ich wohl noch länger mit tables leben müssen obwohl mir das mit den divs richtig gut gefallen hätte und auch die "intelligentere" lösung wäre was mich etwas angeht, das trotz allem die positionierung in allen browsern wieder nicht die selbe ist z.b. im IE passt der abstand zwischen dem titeldiv und der navigation und content und im firefox und konsorten kleben sie wieder fast zusammen mir ist klar das das problem beim IE liegen wird, aber da nunmal 90% mit IE surfen, muss mans dann halt leider doch eher auf IE auslegen
|
Spikx
My Little Pwny
|
also ich hab das Beispiel jetzt folgendermaßen abgeändert: body {
...
margin:0px; /* <-- */
...
}
...
.content {
position:relative;
width:auto;
min-width:120px;
margin:20px 230px 20px 190px; /* <-- */
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
.container { /* <-- */
position:absolute;
}
#navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
bottom:20px; /* <-- */
border:1px dashed black;
background-color:#eee;
/* padding:10px; --> mussma halt statt dessen mit an div mit margin:10px; ersetzen */
z-index:2;
voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}
...
</style>
<script src="IEFix.js" type="text/javascript"></script> /* muss angeblich nach der style definition stehn */
</head>
<body>
<div class="container">
...
</div>
</body>
Funktioniert einwandfrei im FireFox so wie du es haben willst (also auch bei Content, der über die Größe des Browserfensters hinaus geht) und im IE mit der Einschränkung, dass das linke div nicht 20px vom Ende der Seite aufhört, sondern erst ganz am Ende der Seite. //beim body gehört auch noch der margin weg, damit's so wie vorher aussieht //² ah, beim #navAlpha is ja noch ein padding.. das gehört auch weg, Mozilla und IE handlen des ja leider völlig verschieden... da IE addiert des Padding eben noch zur Größe des divs hinzu, daher ging das div im IE auch ganz bis zum Ende der Seite (2 x 10 pixel)
Bearbeitet von Spikx am 11.04.2005, 15:58
|