Div Position
Corazon
- css
Servus,
ich hab da nen kleines Problem mit position meiner div's.
Zum Problem selbst:
Ich möchte 3 Div's nebeneinander.
Navigation,Subnavi und Mainframe.
Dazu der CSS Code:
div#Inhalt{
height:1000px;
width:800px;
background-color:#000000;
z-index:1;
position:static;
}
div#Navigation{
height:250px;
background-color:#FFFF66;
float:left;
width:200px;
z-index:2;
border:1px #707070 solid;
position:static;
}
div#Subnavi{
width:50px;
height:100px;
z-index:2;
background-color:#00FFFF;
left:750px;
border:1px #707070 solid;
position:fixed;
}
div#Mainframe{
height:1000px;
background-color:#FFFF88;
z-index:2;
margin:0px 60px 0px 210px;
overflow:auto;
-moz-border-radius:30px;
border:1px #707070 solid;
position:static;
}
Und dazu der Html:
<div id="Inhalt">
<div id="Navigation">
</div>
<div id="Subnavi">
</div>
<div id="Mainframe">
</div>
</div>
Mein explizites Problem besteht darin, dass ich aus dem position an und für sich noch nicht wirklich richtig schlau werde, ich aber weiß, dass float:right; für Subnavi keine Relevanz mehr haben wird aufgrund der Position.
Somit muss ich Subnavi mit "left" positionieren, dieses bezieht als Ankerpunkt allerdings den linken Abstand zur Seite, und nicht den linken Abstand vom Inhalts div heran - womit "Subnavi" je nach Auflösung wo anders hängt.
Wo ist mein Denkfehler? =/
Mein explizites Problem besteht darin, dass ich aus dem position an und für sich noch nicht wirklich richtig schlau werde, ich aber weiß, dass float:right; für Subnavi keine Relevanz mehr haben wird aufgrund der Position.
Somit muss ich Subnavi mit "left" positionieren, dieses bezieht als Ankerpunkt allerdings den linken Abstand zur Seite, und nicht den linken Abstand vom Inhalts div heran - womit "Subnavi" je nach Auflösung wo anders hängt.Wo ist mein Denkfehler? =/
Du solltest die fixierte Navigation eher mit right ausrichten, aber dafür schauen, dass dein static content ein margin-right von der Breite der Navigation erhält.
mfg Beat
Du solltest die fixierte Navigation eher mit right ausrichten, aber dafür schauen, dass dein static content ein margin-right von der Breite der Navigation erhält.
mfg Beat
Was macht das für einen Sinn?
Wenn ich die Subnavi mit right:0px; positioniere, hängt sie an der rechten Seite anstatt am rechten Rand des Inhalt Div's - welchen ich schlecht mit margin-right zur Navigation positionieren kann, da dieser eine Ebene drunter liegt.
Margin-right auf Navigation bezweckt lediglich die Position selbigen Div's, Mainframe hat bereits nen margin-right.
Nicht, dass ich die Aussage nur anzweifle, ich hab es versucht, und es hat nicht viel gebracht, außer, dass das ganze nun rechts statt links außen hängt.
div#Inhalt{
height:1000px;
background-color:#000000;
z-index:1;
position:static;
}
div#Navigation{
height:250px;
background-color:#FFFF66;
float:left;
width:200px;
z-index:2;
border:1px #707070 solid;
position:static;
margin-right:50px;
}
div#Subnavi{
width:50px;
height:100px;
z-index:2;
background-color:#00FFFF;
right:0px;
border:1px #707070 solid;
position:fixed;
}
div#Mainframe{
height:1000px;
background-color:#FFFF88;
z-index:2;
margin:0px 60px 0px 210px;
overflow:auto;
-moz-border-radius:30px;
border:1px #707070 solid;
position:static;
}
Nur um es klar zu stellen, so solls aussehn - wobei die Subnavi mit der Seite nach unten, also fixed, scrolled
Seite:
--------------------------------
Inhalt:
-----------------------|
| | | Su|
| Navi | Mainframe| bn|
| | | av|
| | | i |
|------+ +---|
| |
------------------------
Nur um es klar zu stellen, so solls aussehn - wobei die Subnavi mit der Seite nach unten, also fixed, scrolled
Nö. Bei position:fixed hängt das Element am Viewport fixiert, und reagiert auf kein Scrolling.
Gerade deshalb solltest du den Ort, wo ein Element dauerhaft am Viewport festgenagelt ist, von statischem Inhalt freihalten. Dies erreichst du durch ein margin-right.
mfg Beat
Nur um es klar zu stellen, so solls aussehn - wobei die Subnavi mit der Seite nach unten, also fixed, scrolled
Nö. Bei position:fixed hängt das Element am Viewport fixiert, und reagiert auf kein Scrolling.
Gerade deshalb solltest du den Ort, wo ein Element dauerhaft am Viewport festgenagelt ist, von statischem Inhalt freihalten. Dies erreichst du durch ein margin-right.mfg Beat
Das Richtige gemeint, nur falsch ausgedrückt.
Die Subnavi soll am Viewport hängen, also beim scrollen mitfließen.
Daher "scrollbar".
Das ganze soll aber im Div Inhalt sein, und das ganze bekomm ich nicht wirklich mit margin-right hin.