✔ Inhalt verschiebt sich, sobald ich Lesezeichen öffne?!

[Kalma]

Hallo,

ich bin dabei ein Administrator Menü zu schreiben.
Das ganze mit Div's 2 spaltig.

Das klappt gut, solange die Lesezeichen nicht eingeblendet sind (siehe Anhang), wenn sie jedoch eingeschaltet sind, liegt der Inhalt Bereich über der Navigation (siehe Anhang).

Hängt das damit zusammen, dass ich die Angaben %ual gemacht habe? Sonst krieg ich das nämlich nich auf volle Seitenbreite :-\

 

[Maik]

Hi,

nachdem du hier zwei Screenshots angehängt hast, solltest du auch den Quellcode (HTML + CSS) nachreichen, damit man einen Einblick gewinnt, wie das Layout überhaupt konzipiert ist, und dir einen Tipp geben kann, was sich daran verändern lässt.

 

[Gumbo]

Vermutlich hat der linke Bereich eine fixe oder zur Schriftgröße relative Breite während der rechte Bereich durch eine zur Gesamtbreite prozentuale Breite. In dem Fall sollten beide Breiten auf derselben Größe (Gesamtbreite, Schriftgröße) basieren.

 

[Kalma]

Hier ist mal mein css:

html, body {
	background-color:#ffffff;
	height:100%;
	font-family:"Arial", Verdana, sans-serif;
	font-size:small;
	color:#000000;
	margin:0px;
	padding:0px;
}

a:link, a:visited {
	color:#590707;
	text-decoration:underline;
}

a:hover {
	color:#890a0a;
	text-decoration:underline;
}

#wrapper {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

#header {
	background-color:#ddd7cd;
	height:44px;
	font-size:large;
	font-style:italic;
	margin:0px;
	padding:4px 0px 0px 10px;
}

#header_underline {
	font-size:x-small;
}

#content_holder {
	width:auto;
	margin:0px;
	padding:0px;
}

#main_nav {
	background-color:#e6e1d9;
	width:214px;
	min-height:93%;
	height:auto !important;
	height:93%;
	border-right:1px solid #c2b194;
	margin:0px;
	padding:0px;
}

#content {
	width:85%;
	margin:0px;
	padding:0px;
	float:right;
}

 

[Maik]

Versuch es mal hiermit:

#content {
	margin-left:215px;
	padding:0px;
}

 

[Kalma]

Hatte ich auch schon probiert allerdigns setzt sich dann die Navigation weitern nach unten. Genau bis da, bis wo das Ende vom Inhalt ist

 

[Maik]

#main_nav {
        background-color:#e6e1d9;
        width:214px;
        min-height:93%;
        height:auto !important;
        height:93%;
        border-right:1px solid #c2b194;
        margin:0px;
        padding:0px;
        float:left;
}

 

[Kalma]

Ne,

das funktioniert auch nich.
Siehe screen

 

[Maik]

Mit dem dazugehörigen Markup funktioniert es bei mir erwartungsgemäß einwandfrei:

<div id="wrapper">
     <div id="header">header</div>
     <div id="content_holder">
          <div id="main_nav">main_nav</div>
          <div id="content">content</div>
     </div>
</div>

 

[Gumbo]

Probier mal Folgendes:

html, body {
	height: 100%;
	margin: 0;
}
#wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
}
#header {
	background-color: #ddd7cd;
	height: 44px;
	padding: 4px 0px 0px 10px;
}
#main_nav {
	position: absolute;
	top: 48px;
	left: 0;
	bottom: 0;
	background-color: #e6e1d9;
	width: 214px;
	border-right: 1px solid #c2b194;
}
#content {
	position: absolute;
	left: 215px;
	right: 0;
}