Box Problem

09/11/2017 23:11 Cc_Cc_Cc#1

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

HTML:

Spoiler

CSS:

Spoiler

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

Danke! und lg

09/12/2017 00:53 False#2

Quote:
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][Only registered and activated users can see links. Click Here To Register...][/IMG]

HTML:
Spoiler
HTML Code:
<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
Code:
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.

09/12/2017 11:41 -spookes-#3

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

09/12/2017 13:57 phlinther1#4

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

09/12/2017 15:40 xShizoidx#5

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 : [Only registered and activated users can see links. Click Here To Register...]

09/22/2017 15:40 mastermo#6

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

HTML Code:

<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.

[Only registered and activated users can see links. Click Here To Register...] Dort gibts etwas Doku dazu.