Box Problem

[Cc_Cc_Cc]

Tag,

ich weiß nicht mehr weiter wie ich es beheben kann. Ich habe einen Article der 20% Breit ist und auf Fixed ist. Ebenso (auf Left:0 Fixiert). Das Problem ist wenn ich daneben eine Section machen möchte (Zur hauptseite) dann verschiebt es sich auf den Article.

Hier ein Vorschau Bild:

 Spoiler

[IMG=expandable: 1][/IMG]

HTML:

 Spoiler

<article id="nav_fixed">
...(Rest ist eigentlich egal da nur h1 usw folgt.)..
</article>

*main*

		<section id="titelbild">
			<img src="img/bac.jpg" alt="bacardi">
		</section>
		
		<section id="profilbild">
		<img src="img/no.png" alt="noimg">
		</section>

CSS:

 Spoiler

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size:100%;
	margin:0;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

p {
	font-family:'Roboto',sans-serif;
	line-height:1.7;
}

a {
	text-decoration:none;
}

ul {
	margin:0;
	padding:0;
}

li {
	list-style:none;
}

img {
	max-width:100%;
	height:auto;
}

hr {
	border:1px solid #72727d;
	width:83%;
}

body {
	margin:0;
	background:#eee;
}

#nav_fixed {
	position:fixed;
        display:block;
	background:#23232c;
	top:0;
	left:0;
	bottom:0;
	width:20%;
}

#titelbild {
	display:block;
	width:100%;
}
#titelbild img {
	width:100%;
	height:200px;
} 

#profilbild {
	display:block;
	width:100%;
}

#profilbild img {
	position:absolute; // Habe ich nur als Test gemacht damit man es sieht //
	width:200px;
	height:200px;
}

PS: Das Titelbild fängt ebenso an wo das Profilbild auch ist.

Danke! und lg

[False]

Originally Posted by Cc_Cc_Cc

Tag,

ich weiß nicht mehr weiter wie ich es beheben kann. Ich habe einen Article der 20% Breit ist und auf Fixed ist. Ebenso (auf Left:0 Fixiert). Das Problem ist wenn ich daneben eine Section machen möchte (Zur hauptseite) dann verschiebt es sich auf den Article.

Hier ein Vorschau Bild:

 Spoiler

[IMG=expandable: 1][/IMG]

HTML:

 Spoiler

<article id="nav_fixed">
...(Rest ist eigentlich egal da nur h1 usw folgt.)..
</article>

*main*

		<section id="titelbild">
			<img src="img/bac.jpg" alt="bacardi">
		</section>
		
		<section id="profilbild">
		<img src="img/no.png" alt="noimg">
		</section>

CSS:

 Spoiler

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size:100%;
	margin:0;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

p {
	font-family:'Roboto',sans-serif;
	line-height:1.7;
}

a {
	text-decoration:none;
}

ul {
	margin:0;
	padding:0;
}

li {
	list-style:none;
}

img {
	max-width:100%;
	height:auto;
}

hr {
	border:1px solid #72727d;
	width:83%;
}

body {
	margin:0;
	background:#eee;
}

#nav_fixed {
	position:fixed;
        display:block;
	background:#23232c;
	top:0;
	left:0;
	bottom:0;
	width:20%;
}

#titelbild {
	display:block;
	width:100%;
}
#titelbild img {
	width:100%;
	height:200px;
} 

#profilbild {
	display:block;
	width:100%;
}

#profilbild img {
	position:absolute; // Habe ich nur als Test gemacht damit man es sieht //
	width:200px;
	height:200px;
}

PS: Das Titelbild fängt ebenso an wo das Profilbild auch ist.

Danke! und lg

Kenne mich selber nicht gut mit css aus, aber posistion fixed ist dort das falsche.
Sobald ein Element fixed ist können andere sich nicht mehr dran orientieren.

Such einfach mal bei google wie man so ein Menü an der Seite macht solltest schnell fündig werden.

[-spookes-]

Deine Beschreibung ist etwas unklar. Mit genaueren Details könnte ich dir helfen.

[phlinther1]

Wenn du position:fixed verwendest, positionieren sich die Elemente nicht mehr relativ zueinander, sondern sind absolut am Bildschirm positioniert. Bei fixed bleiben die Elemente immer dort, wo du sie positionierst, auch wenn du scrollst.

Das kannst du mal ausprobieren: Diese "Hauptseite"-section auf position:absolute, left:20% und width:80% setzen, sollte so dann funktionieren

[xShizoidx]

Mach einfach ein Container, wo du alle Elemente drin platzierst außer dein fixiertes Element. Diesen Container gibst du einfach ein margin-left mit der Breite des fixierten Elements.
Beispiel :

[mastermo]

Ich würde einfach die Lösung mit CSS3 und HTML5 machen.

<div id="box">
<article>bla bla</article
<aside>blub blubb</aside>
<div class="clear"/>
</div>

#box {
display: block;
width: 100%;
max-width: 960px;
height: 200px;
}
#box article {
display: inline-block;
width: 80%;
height: auto;
float: left;
}
#box aside {
display: inline-block;
width: 20%;
height: auto;
float: right;
}
.clear {clear: both;}

article oder section geht beides. Ich habs nur auf die Schnelle gemacht, sollte aber funktionieren.
Den Header würde ich auch mit dem <header> Tag lösen.
Allgemein rate ich dir zu HTML5 und CSS3, da es mehr Möglichkeiten bietet und auch im Code sauberer aussieht.
Möglichkeiten wie das responsive Design bieten sich dadurch auch an.

Dort gibts etwas Doku dazu.