"We are back" « oc.at

Frage zu CSS Positionierung

userohnenamen 11.04.2005 - 11:24 935 9
Posts

userohnenamen

leider kein name
Avatar
Registered: Feb 2004
Location: -
Posts: 15878
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
click to enlarge

ich bekomms aber einfach nicht hin

derzeit sieht es so aus:
click to enlarge

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
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13496
position:absolute; top:0px; bottom:0px;
(also 0 Pixel Abstand oben und unten zum Elternelement)

Lowrey

Bloody Newbie
Registered: Mar 2005
Location: Asten
Posts: 7
hast schon mal valign=bottom probiert ?
und den spalte hast e auf height="100%" oder?

mfg
Lowrey

Spikx

My Little Pwny
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13496
@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
Bearbeitet von Spikx am 11.04.2005, 11:38

userohnenamen

leider kein name
Avatar
Registered: Feb 2004
Location: -
Posts: 15878
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

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
click to enlarge

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
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13496
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
click to enlarge
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? :D

Eigentlich sollte es im IE schon funktionieren... sicher, dass du da die neueste Version erwischt hast?

userohnenamen

leider kein name
Avatar
Registered: Feb 2004
Location: -
Posts: 15878
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? :D

Eigentlich sollte es im IE schon funktionieren... sicher, dass du da die neueste Version erwischt hast?

neueste version? :D
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

Legend
undead
Avatar
Registered: Nov 2000
Location: Off the grid.
Posts: 6845
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
Avatar
Registered: Feb 2004
Location: -
Posts: 15878
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 ;)

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
Avatar
Registered: Jan 2002
Location: Scotland
Posts: 13496
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>
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
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz