✔ Layout: Navigation an absolut positionierten Content "heften"

[Fabian Frank]

Hallo,

bin grad am redesignen meiner Website.
Da spielt sich nur leider ein problem auf, auf dessen Lösung ich einfach nicht kommen will.
(Gut, kommt drauf an was man unter "Lösung" versteht. Tabellen Layout setz ich jedoch nicht darunter ;-))

Und zwar habe ich einen Content, der folgendermaßen positioniert ist:

#content {
	position: absolute;
	width: 510px;
	height: 400px;
	z-index: 3;
	left:50%;
	margin-left:-250px;
	top:154px;
	color:#FFFFFF;
	font-family: arial;
	font-size:11px;
	padding-left: 20px;
	overflow: auto;
	overflow-x: hidden;
	}

Links daneben soll eine Navigation hin (siehe angeh. Bild), bei der ich jedoch nicht weiß, wie ich sie positionieren soll, ohne dass sich der Abstand zwischen Navi und Content abhängig von der Auflösung verschiebt .

Hat jemand ne Idee, wie ich das Lösen könnte, mal abgesehen von Tabellen?
Vielen Dank,

greetz

 

[Maik]

Hi,

und wenn du einfach beide Bereiche in ein übergeordnetes Element einbettest, und dieses dann im Anzeigebereich horizontal zentriert positionierst?

 

[Maik]

Ansonsten würde das Stylesheet für's Erste folgendermaßen lauten, um die Navigation links daneben zu positionieren:

div {
        color:#FFFFFF;
        font-family: arial;
        font-size:11px;
}

#content {
        position: absolute;
        width: 510px;
        height: 400px;
        z-index: 3;
        left:50%;
        margin-left:-250px;
        top:154px;
        padding-left: 20px;
        overflow: auto;
        overflow-x: hidden;
        background: red;
        }

#navi {
        position: absolute;
        width: 200px;
        height: 400px;
        z-index: 3;
        left:50%;
        margin-left:-470px;
        top:154px;
        padding-left: 20px;
        overflow: auto;
        overflow-x: hidden;
        background: yellow;
}

und so, damit beide gemeinsam im Viewport horizontal zentriert werden:

#content {
        position: absolute;
        width: 510px;
        height: 400px;
        z-index: 3;
        left:50%;
        margin-left:-155px;
        top:154px;
        padding-left: 20px;
        overflow: auto;
        overflow-x: hidden;
        background: red;
        }

#navi {
        position: absolute;
        width: 200px;
        height: 400px;
        z-index: 3;
        left:50%;
        margin-left:-375px;
        top:154px;
        padding-left: 20px;
        overflow: auto;
        overflow-x: hidden;
        background: yellow;
}

 

[Fabian Frank]

jetzt wo Du's sagst

Stand wohl aufm Schlauch.

Danke für deine Hilfe