Frage zu CSS Positionierung

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/frage_zu_css_positionierung_140512/page_1 - zur Vollversion wechseln!

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.html


kö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...

position:absolute; top:0px; bottom:0px;
(also 0 Pixel Abstand oben und unten zum Elternelement)

hast schon mal valign=bottom probiert ?
und den spalte hast e auf height="100%" oder?

mfg
Lowrey

@Lowrey: das sind keine tables...

also auf der Beispielseite wird der linke Bereich ja so realisiert:

Code: PHP

#navAlpha {
	position:absolute;
	width:150px;
	top:20px;
	left:20px;
	border:1px dashed black;
	background-color:#eee;
	padding:10px;
	z-index:2;
}

Zitat von Spikx

@Lowrey: das sind keine tables...

also auf der Beispielseite wird der linke Bereich ja so realisiert:

Code: PHP

#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

Zitat von userohnenamen

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

Zitat von Spikx

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?

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

Zitat von watchout

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

also ich hab das Beispiel jetzt folgendermaßen abgeändert:

Code: PHP

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>

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026