• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS - DIV soll im Body Vertical folgen.

C

Consens

Neues Mitglied
Moin moin!

Ich plage mich nun seit 2 Tagen damit rum, auszuprobieren, wie ich mein Element Vertikal dem Bildverlauf folgen lassen kann.

Folgende Codes:

HTML: 
<!DOCTYPE HTML>
<html><head>
	<link href="style.css" rel="stylesheet" media="screen" type="text/css" >
	</head>
        <body>
	     <nav style="" id="nav" >
             </nav>
        </body>
</html>

Code: 
#nav {
	width:170px;
	background-image:url(images/Navigation.png);
	height:205px;
	position:fixed;
}

body {
	background-image:url(images/Background_weich.jpg);
	background-repeat-x:inherit;
	background-repeat-y:inherit;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-position-x:50%;
	background-position-y:0%;
	background-color:#000000;
	min-height:800px;
	max-height:100%;
	width:1300px;
}

.mystyle {
}

So. Folgendes Szenario:

Mein Content-Bereich soll 1300 px breit sein, definiert im Body. Der Hintergrund soll im Browser grundsätzlich zentriert sein, das funktioniert auch.
Nun habe ich mir ein <nav> angelegt. Dieses Element soll ein Hintergrund bekommen, der ebenfalls schon definiert ist.
Jetzt möchte ich das das komplette Element <nav> (welches nachher natürlich auch noch die Buttons beinhaltet) vertikal dem Browserverlauf folgt, allerdings nur vertikal. Das klappt theoretisch auch schon, praktisch aber läuft es aus dem Body raus, sprich das Hintergrundbild des Body ist zwar zentriert, aber die Navigation ist immer Linksbündig. Ich möchte aber das es sich an dem Body ausrichtet - ich bekomme es nicht hin..

Würde mich über eine schnelle Hilfe sehr freuen!


Mit freundlichem Gruß!!
 
Weiß nich was du hast, bei mir (Firefox 4) funktioniert es. Was genau meinst du denn mit "das es sich an dem Body ausrichtet"?
 
Das Problem nochmal erklärt: mein Body hat eine fixbreite: 1300px.
Die navigationbefindet sich im Body. Wenn ich Num. Den Browser öffne und komplett groß ziehe, bilden sich Links und rechts schwarze Ränder - das ist okay. Mein Body hat beispielsweise dir Farbe grau.
Der Rest ( Links und rechts) ist wie gesagt schwarz. Nun habe ich schon das Problem, das meine Navigation nicht mehr im grauen Body, sondern schon außerhalb des Bodys im schwarzen Bereich ist..

Ich bekomm es einfach nicht hin! :/
 
Hallo.

<nav> wird von älteren Browsern nicht erkannt.

Versuch es mal ohne HTML5 vielleicht klappts dann.
Ausserdem der Navigation keine position fixed geben sondern einfach zentrieren.

Gruss
Elroy
 
Ich versuche es gerade mit 2 Browsern, einmal Safari & Firefox, beide auf dem neusten Stand.

Kannst du das mit der position nochmal erläutern? Ich muss dem doch irgendeine postition zuweisen! Oder?
 
Nein musst du nicht.

Ich nehme an du willst es vertikal zentriert haben?
Dafür reicht ein margin: 0 auto;

Wenn du position fixed verwendest musst du auch angeben wo es positioniert sein soll, was du ja nicht gemacht hast.

Gruss
Elroy
 
...

So.. ich nochmal.
Ich probier es mal anders, ich hab das Ergebnis teilweise schon hin bekommen, allerdings treten immer wieder Fehler auf. Ich geb mal mein Grundgerüst bekannt und sag wie sich was verhalten soll:

Links ein Container, der vertikal mitlaufen soll.

In der Mitte ein Container der sich automatisch verlängert.

Rechts ein Container, der vertikal mitlaufen soll.

Das Hintergrundbild soll, wenn man das Fenster vergrößert wird, zentriert werden, wenns verkleinert wird, soll es links anfangen.

Noch jemand ein Tipp?

Ich habs mit Position left 50%, margin left -(hälfte der Fenstergröße) probiert, dann verschwindet die Navigation aber irgendwann im nirgendwo, wenn man das Fenster verkleinert, und auch die Navigation soll spätestens Links bündig sein.
:-?
 
Ok, mal ne andere Frage:
ist es möglich ein DIV in einem anderen DIV am oberen Rand des Browsers auszurichten?
 
Entledige dein CSS aller Außen- und Innenabstände

Code: 
* { margin: 0;padding: 0; }

Dann sollte das Element im <body> oben links beginnen, ohne irgendwelche Abstände zu haben.
 
Tja, ich bekomms nicht hin, vielleicht drück ich mich auch nicht richtig aus oder wie auch immer.
Mein Problem ist einfach folgendes:

Ich möchte das alle Elemente mittig sind. Meine Navigation befindet sich an der Linken Seite. Wenn ich nun runter Scrolle soll sich die Navigation mit Scrollen, allerdings nur runter, in keine andere Richtung. Wenn ich nun das Fenster verkleiner, soll die Navigation trotzdem noch am Linken Bildrand zu sehen sein und alles andere soll sich daneben anordnern, auch der Hintergrund, den ich im Body definiere soll, wenn das Fenster verkleinert werden Links anhalten.

Scheinbar irgendwie nicht machbar. :(
 
Ich hab mit "position: fixed" schon jede menge rum hantiert, allerdings bisher erfolglos.
Hier habe ich übrigens mal ein Beispiel gefunden, wie es aussehen sollte:

Klick

In diesem Fall ist die Navigation Rechts.

Und ich hab mir die Codes gerade mal angesehen:

body {
position: relative; /* Make containing block for the menus */
padding: 9em 17em 5em 2em; /* Room for banner at the top */
margin: 0 } /* 17em is too much, but IE6 needs it */


div.map {
position: absolute;
width: 11em; height: auto;
top: 1em; right: 1em; bottom: 1em; left: auto;
background: #DDB url(dogsear.png) bottom right no-repeat }


Ähnlich sieht es bei mir auch aus, aber wieso bewegt sich mein nav nicht? (nav heißt in diesem Fall map)
 
Zuletzt bearbeitet:
Wenn es nur "ähnlich" aussieht, wieso sieht es nicht genauso aus? Zeig doch mal den Code an dem Du arbeitest.
 
HTML: 
<!DOCTYPE HTML>
<html><head>
	<link href="style.css" rel="stylesheet" media="screen" type="text/css" ></head><body>
	
<div style="" id="nav" >
</div>

</body>

</html>

Code: 
#nav {
	width:100px;
	height:100px;
	position:absolute;
	background-color:#000000;
	margin:inherit;
	margin-top:100px;
	top:10px;
	left:10px;
	bottom:10px;
	right:auto;
}

body {
	display:block;
	min-height:950px;
	max-height:100%;
	background-image:url(images/Background_weich.jpg);
	background-position:50% 0%;
	background-position-x:50%;
	background-position-y:0%;
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	background-color:#000000;
	width:1300px;
	visibility:visible;
	overflow:visible;
	position:relative;
	margin:0px auto 0px auto;
	padding:0;
}

.mystyle {
}


So siehts bei mir aus...

visibility:visible;
overflow:visible;
im Body waren nur ein Test..
 
So. Dadurch das die Seite nun bald online gehen muss, muss ich erst einmal darauf verzichten die Elemente mitlaufen zu lassen. Aber ich habe gleich das nächste Problem, welches wie folgt aussieht:


HTML: 
<!DOCTYPE HTML>
<html>
	<head>
		<link href="style.css" rel="stylesheet" media="screen" type="text/css" >
    </head>
    <body style="background-color:#000000; " >
	
		<div style="" class="design" id="distance" >
        </div>
        <div style="" id="container" >
        	<div style="" id="nav" >
        	</div>
        	<div style="" id="main_content" >
          		<p><?php include ("tpnews/inc/hp_teilausgabe.inc.php"); ?></p>
       		</div>
       		<div style="" id="pic_box" >
       		</div>
        	<div style="" id="top_ten" >
        	</div>
        	<div style="" id="twitter" >
        	</div>
        	<div style="" id="logo" >
        	</div>
        	<div style="" id="logo" >
        	</div>
	</div>
    </body>
</html>

Code: 
#logo {
	position:absolute;
	left:584px;
	top:45px;
	width:558px;
	height:66px;
	background-image:url(images/schriftzug_psycho.png);
}

#twitter {
	position:absolute;
	left:766px;
	top:639px;
	height:246px;
	width:368px;
	background-color:#0F0F0F;
	box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-webkit-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-o-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-moz-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	opacity:0.8;
}

#top_ten {
	position:absolute;
	width:368px;
	height:246px;
	left:766px;
	top:376px;
	background-color:#0F0F0F;
	opacity:0.8;
	box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-webkit-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-o-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-moz-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
}

#pic_box {
	position:absolute;
	left:766px;
	top:155px;
	background-color:#0F0F0F;
	opacity:0.8;
	width:368px;
	height:207px;
	box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-webkit-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-o-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-moz-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
}

#main_content {
	top:155px;
	left:170px;
	width:582px;
	background-color:#0F0F0F;
	opacity:0.8;
	box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-webkit-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-o-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	-moz-box-shadow:rgb(0, 0, 0) 5px 5px 15px;
	min-height:100px;
	max-height:100%;
	position:relative;
}

#nav {
	position:absolute;
	background-image:url(images/nav.png);
	width:170px;
	height:210px;
	left:0;
	top:155px;
}

#container {
	clear:left;
	width:1300px;
	background-image:url(images/Background_weich.jpg);
	background-position:50% 0%;
	background-position-x:50%;
	background-position-y:0%;
	position:relative;
	height:100%;
	background-color:#000000;
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	margin:0px auto 0px auto;
}

#distance {
	float:left;
	width:10px;
	margin-bottom:-700px;
	height:50%;
	background-color:rgba(0,0,0,0.000000);
}

html, body {
	width:100%;
	height:100%;
}

* {
	margin:0;
	padding:0;
}

.design {
}

In der content-box soll via PHP ein Text ausgegeben werden, das funktioniert auch. Die Box soll sich der Textlänge nach anpassen. Das funktioniert leider nur Teilweise.
Wenn ich runter Scrolle hört die Box schnell auf, die Hintergrundfarbe zu halten, der Text allerdings wird weiter ausgegeben.

Was mir da allgemein aufgefallen ist, ist das wenn ich mein Fenster verkleiner, dass dann auch mein Hintergrundbild in #container unten abgeschnitten wird, und eben auch die #content-box in der Höhe reduziert wird. Die Länge der Seite bleibt (variabel) gleich, je nach Textinhalt verlängert sich
Code: 
html, body

vielleicht hat da ja noch jemand ein Tipp für mich. ::oops:
 
Soooo... auch das wäre geschafft!

Nun bin ich aber schon wieder einige Zeit an einem anderen Problem:

z.B. meine Content-Box ist transparent. Nun habe ich in dieser Box ein weiteres Bild, welches leider ebenfalls Transparent angezeigt wird. Hat da jemand noch einen Tipp für mich? :)
 
Transparenz die per CSS gesetzt wird vererbt sich auf die darinliegenden Elemente. Umgehen kann man das per CSS nicht. Wenn Du so einen transparenten Bereich willst, verwende eine transparente Hintergrundgrafik statt die CSS-Eigenschaft.

Und zu deinem ursprünglichen Problem: bei deinem Code hier sehe ich kein "position: fixed;". Daher ist das für mich weiterhin nicht nachvollziehbar.
 
Danke für deine Antwort, dann muss ich wenigstens nicht noch ewig rum probieren, wie ich die Bilder in dem DIV "un-transparent" bekomme - ich werd die nun einfach in die content-box stecken.

Der position fixed wegen, ich hab das schon oft ausprobiert, aber nichts hat funktioniert. Nun steht das Layout der ersten Seite gleich, und vielleicht probiere ich dann noch mal die Elemente zu bewegen. Dann melde ich mich auf jeden Fall nochmal! :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben