✔ Layout: Navigation an absolut positionierten Content "heften"

Status
Nicht offen für weitere Antworten.
Fabian Frank

Fabian Frank

Erfahrenes Mitglied
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:
Code: 
#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 :p.

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

greetz
 

Anhänge

  • Unbenannt-6.gif
    Unbenannt-6.gif
    1,8 KB · Aufrufe: 16
Hi,

und wenn du einfach beide Bereiche in ein übergeordnetes Element einbettest, und dieses dann im Anzeigebereich horizontal zentriert positionierst?
 
Ansonsten würde das Stylesheet für's Erste folgendermaßen lauten, um die Navigation links daneben zu positionieren:

Code: 
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:

Code: 
#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;
}
:)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück