Div Container vertikal untereinander mit Abstand dazwischen!

[Pyrofreak]

Hallo Leute!

Ich stehe vor einem Problem ich möchte einfach ungefähr so wie hier
auf der Startseite von: http://www.traum-projekt.com/ (links das Navigationsmenü) so ein Menü für meine Seite erstellen, genau das habe
ich auch gemacht und zwar mit einem Main der "relativ" positioniert ist
und mit zwei Seitenleisten links und rechts, von denen eben links die "Navi"
ist, unterteilt vertikal in eine Hauptnavi und dann kommen genau drunter die Unternavis sozusagen, klappt alles wunderbar im Firefox, nicht aber im IE!

Nun hab ich schon alles versucht, ich schaffs einfach nicht div Container untereinander anzuordnen also vertikal, das es in allen Browsern gleich angezeigt wird.Finde auch nirgends ne Seite,wo das beschrieben ist, wie man das macht...

Hoffe es weis jemand wie man das richtig angeht...

gr Pyro

[sejuma]

Zunächst wäre ein Link hilfreich, damit ma sich alles im Zusammenhang ansehen kann.

Wenn der IE etwas nicht richtig darstellt, gibt es viele Möglichkeiten.
Die Hauptursache ist meist ein fehlender qualifizierter Standard-Doctype.

Wozu verwendest du die relative Positionierung?

[Pyrofreak]

Hallo @sejuma!

Ich hatte die relative Positionierung und absolute verwendet weil ich dachte
das ich nur damit div Container "vertikal" untereinander anordnen kann, also
in meinem Fall links und rechts beide Seitenleisten sollen vertikal aus mehreren divs bestehen so wie hier: http://www.traum-projekt.com/ siehe linke Seite!
das war auch als Link gemeint also als Beispiel...

gr Pyro

[sejuma]

Um zwischen zwei Divs einen vertikalen Abstand herzustellen, gib dem unteren einfach

margin-top: 30px;

oder eben einen anderen Wert.
Lasss absolute und relative Positionierungen ganz weg. Das solltest du nur gezielt anwenden und brachst es normalerweise nicht.

[Pyrofreak]

Hallo @sejuma!

Ja wenn das alles so einfach wäre "margin-top" für den unteren Div Container
hab ich schon probiert, klappt nicht! Zumindest nicht alleine damit?

Ich poste dir jetzt nochmal meine Seite http://www.chat-surium.com/ als
Beispiel, der div Container wo "Sprache wählen" steht soll genau unter den
div Container "Suche" im Abstand von eben 5px oder 10px egal.
Aber den da genau drunter zu bringen, egal was ich mache, float, clear, position, relative, absolut es geht mit nix...

Habe jetzt wieder auf "floats" zurückgestellt zum xten Male

ich hoffe irgendwer weis wie man das lösen kann, denn sonst flipp ich da noch aus vor dem scheiss Kasten gg kein Witz Leute...

Hier wäre das CSS dazu:

* {
 margin: 0;
 padding: 0;           /* Alle Abstände werden auf Null gesetzt */
}
body {
 background-image: url(../Bilder/Hintergrund1.jpg);
 background-repeat: repeat-x;
 background-color: #8F3D00;
 background-attachment: scroll;
 color: black;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 78%;
 text-align: center;   /* Internet-Explorer 5.x Hack */
}
.Logo {            
 float: left;          /* Image-Logo */
 margin: 0;
 padding: 0 0 10px 0;
 text-decoration: none;
 border: none;
}
.beide {
 clear: both;
}
.Deutsch {
 position: absolute;
 top: 99px;
 left: 37px;
 border: 1px solid #8F3D00;
 margin: 0;
 padding: 0;
}
h1 {                   
 margin: 0;
 padding: 0;          /* Überschriften h1 */
 font-size: 109%;
 text-align: left;
}
h2 {
 margin: 0;
 padding: 0 0 0 3px;         /* Überschriften h2 */
 font-size: 108%;
 text-align: center;
 display: inline;
}
h3 {
 margin: 0 0 2em 0;
 padding: 0;        /* Überschriften h3 */
 font-size: 95%;
}
p {
 margin: 0;
 padding: 0 0 2.5em 0;       /* Absätze */
 text-align: left;
 line-height: 1.7em;
 position: relative;         /* Peekaboo Bug */
}
a:link {
 color: #0000FF;
 text-decoration: none;
}
a:visited {
 color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #0000FF;
 text-decoration: underline;
}
#Box {
 background-color: #FFBF47;
 margin: 15px 20px 15px 20px;
 padding: 10px;
}
#Kopfleiste-Unten {
 border-top: 1px solid #8F3D00;
 border-right: 1px solid #8F3D00;
 border-left: 1px solid #8F3D00;
 border-bottom: 4px solid #8F3D00;
 background-color: #FFDFA3;
 height: 33px;
}
#Kopfleiste-Unten ul {
 list-style-type: none;
 margin: 0;
 padding: 0.7em 35px 0.4em 0;
 text-align: right;
}
#Kopfleiste-Unten li {
 display: inline;
 color: #7C5C1E;
}
#Kopfleiste-Unten a:link, #Kopfleiste-Unten a:visited {
 text-decoration: none;
}
#Titelzeile {
 margin: 0;
 padding: 0.7em 0 0.4em 32px;
 width: 465px;
 float: left;
}
.Chat-Smiley1 {
 position: absolute;
 top: 98px;
 right: 37px;
 margin: 0;
 padding: 0;
}
#Hauptteil {
 margin-top: 4px;
 width: 100%;
 height: 1%;
}
#Inhalt {
 margin: 0 190px 0 211px;
 padding: 20px;
 border: 1px solid #8F3D00;
 background-color: #FFDFA3;
 color: black;
}
#Sprache {
 float: right;
 width: 179px;
 background-color: #FFDFA3;
 color: black;
 border: 1px solid #8F3D00;
 padding: 0;
 margin: 0;
 height: 1%;
}
.Chaticon {
 text-decoration: none;
 border: none;
}
.Flaggen {
 text-decoration: none;
 border: 1px solid #8F3D00;
}
.Chaticon1 {
 text-align: center;
 margin: 0 0 2.5em 0;
}
#Seitenleiste {
 float: right;
 width: 179px;
 background-color: #FFDFA3;
 color: black;
 border: 1px solid #8F3D00;
 margin: 0;
 padding: 0;
}
#suchform .text {
 width: 137px;
 border: 1px solid #8F3D00;
}
#suchform .suchknopf {
 text-align: right;
 margin-top: 4px;
}
#suchform .btn {
 border: 1px solid #8F3D00;
 background-color: #FFDFA3;
 color: black;
}
#Seitenleiste h3, #Sprache h3 {
 text-align: left;
 background-color: #FFDFA3;
 margin: 0 0 1.4em 0;
 padding: 0;
}
#Seitenleiste .Innen, #Sprache .Innen {
 margin: 0;
 padding: 20px;
}
#Navigation {
 float: left;
 width: 200px;
 border-top: 1px solid #8F3D00;
 border-right: 1px solid #8F3D00;
 border-left: 1px solid #8F3D00; 
 text-align: left;
 margin: 0;
 padding: 0;
}
#Navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#Navigation li {
 border-bottom: 1px solid #8F3D00;
}
#Navigation li a:link, #Navigation li a:visited {
 font-size: 100%;
 font-weight: bold;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 background-color: #FFDFA3;
 text-decoration: none;
}
#Navigation li a:hover {
 background-color: #FFBF47;
 padding: 0.4em 0 0.4em 0.5em;
}
.Navigationsüberschriften {
 margin: 0;
 padding: 0.4em 0 0.7em 0.4em;
 height: 16px;
 background-color: #FFDFA3;
 border-bottom: 1px solid #8F3D00;
}
.
.
.

gr Pyro

[theo]

vielleicht waere es wirklich besser, wenn die navi nicht mit divs aufgebaut wird. eine liste ist hier vielleicht die bessere wahl ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Join the navi (c:</title>
        <style type="text/css">
			* { margin: 0; padding: 0; }
			body {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: small;
				background-color: #fff7ce;
				color: #606060;
			}
			#navi {
				position: absolute;
				top: 20px;
				left: 20px;
				border-top: 1px solid #ddd;
				border-right: 1px solid #a2a6ad;
				border-bottom: 1px solid #a2a6ad;
				border-left: 1px solid #ddd;
				background-color: #fff;
				width: 130px;
				float: left;
			}
			ul {
				padding: 1px;
			}
			ul + ul {
				padding-top: 0;
			}
			li {
				background-color: #dedede;
				list-style: none;
				padding: 2px;
				font-weight: bold;
				border-bottom: 1px solid #d0d0d0;
			}
			li + li {
				background-color: #eee;
				padding-left: 20px;
				font-weight: normal;
				border: 0;
			}
			li > span {
				color: #ffcc33;
				margin-right: 2px;
				font-size: 1.2em;
			}
			a:link, a:visited {
				text-decoration: none;
				color: #505050;
			}
			a:hover, a:focus {
				text-decoration: underline;
				color: #ff9900;
			}
		</style>
    </head>    
    <body>
        <div id="navi">
            <ul>
                <li><span>&raquo;</span>&Uuml;berschrift 1</li>
                <li><a href="#">Punkt 1</a></li>
                <li><a href="#">Punkt 2</a></li>
                <li><a href="#">Punkt 3</a></li>
                <li><a href="#">Punkt 4</a></li>
                <li><a href="#">Punkt 5</a></li>
                <li><a href="#">Punkt 6</a></li>
                <li><a href="#">Punkt 7</a></li>
                <li><a href="#">Punkt 8</a></li>
            </ul>        	
            <ul>
                <li><span>&raquo;</span>&Uuml;berschrift 2</li>
                <li><a href="#">Punkt 1</a></li>
                <li><a href="#">Punkt 2</a></li>
                <li><a href="#">Punkt 3</a></li>
                <li><a href="#">Punkt 4</a></li>
            </ul>
            <ul>
                <li><span>&raquo;</span>&Uuml;berschrift 3</li>
                <li><a href="#">Punkt 1</a></li>
                <li><a href="#">Punkt 2</a></li>
                <li><a href="#">Punkt 3</a></li>
                <li><a href="#">Punkt 4</a></li>
                <li><a href="#">Punkt 5</a></li>
            </ul>
        </div>
    </body>
</html>

die positionierung sollte dann auch nicht sonderlich schwer fallen.

[Pyrofreak]

Hallo theo!

Naja esmuss doch irgendwie möglich sein einen divunter einen anderen div zu positionieren, warum geht das nicht in meinem Fall?
Und mit einer Liste kann man Listen erstellen das ist mir klar, diese kann ich dann
innerhalb der einzellnen divs ja immernoch anordnen was ich ja eh getan habe...

Mein Problem ist nur wie bekomm ich ein oder mehrere divs unter die beiden
seitlichen Container egal ob jetzt rechts oder links,das muss doch irgendwie gehen oder?

Noch ein Beispiel hier : http://www.torrent.to/torrent.php
Schaut euch mal links und rechts den Aufbau an genau so meine ich das, es folgt immer dazwischen ein kleiner Abstand dann kommt wieder ein Menu usw. und diese Seite wurde mit css estellt, sieht man im Quellcode, nur weis ich eben nicht wie ich das in meinem Fall angehen muss, leider!

gr Pyro

[theo]

ich hab so nach und nach den eindruck, dass dir reinweg die basics fehlen. dann schau dir doch mal das boxmodell an. wenn du verstanden hast, wie floats, rel. und absolute positionierung funktionieren, dann ist das alles hier kein problem mehr ...

[Pyrofreak]

@theo

Es kann schon sein dasich irgendetwas nicht ganz verstanden habe, dann bitte klär mich auf! Ich habe css aus zwei Büchern gelernt,wobei eines nur ein Problemlösungsbuch ist und ich dort zb.: keine Lösung für dieses Problem
gefunden habe, im anderen Buch ist genau erklärt wie man zweispaltige, drei, vier und was weis ich noch erstellt mit "floats" und eben mit "relative" "absolut"!
Hab ich alles schon gemacht und hat auch alles geklappt, aber bei meiner Seite komm ich eben nicht weiter, weil ich ein Design mit untereinander geordneten divs benötige und nicht eines mit links und rechts zwei einzellnen...
Und da ich schon zig Stunden herumprobiert habe, was soll ich noch tun?

Deshalb frage ich ja hier nach, wenn ich es schon wüsste müsste ich ja nicht mehr fragen oder?

gr Pyro

[theo]

ok ... weil du's bist ...

als erstes schaust du dir mal die das bsp. von stu an. das druefte deinem layout entsprechen. und dann packst du in der rechten seite deine div's untereinander.
ein div als blockelement nimmt eh automatisch die ganze zur verfuegung stehende breite ein. das waeren hier wohl 190px. jedes weitere wuerde sich automatisch darunter anordnen. fertig!

stu's worten kann ich mich nur anschliessen: nothing could be simpler ...!
wenn deine buecher dir das nicht beibringen konnten, dann waren sie rausgeschmissenes geld. dann lern lieber von stu oder von css4you.

[Pyrofreak]

Ja eben Sie sollten sich automatisch darunter anordnen, bei mir tun sie das aber
nicht hab wie gesagt alles probiert..aber vl hab ich eben irgendeine Kleinigkeit
übersehen, aber da es ohne absolute Positionierung auch im Firefox mit blosser
Anordnung darunter bei mir auch nicht klappte, dann muss ich wohl irgendwas falsch machen, wie gesagt ich poste hier als letzter Ausweg...

Aber danke werde mir die von dir genannte Seite ansehen und dann hoffentlich
dahinter kommen, hoffentlich wenn es eh so simpel ist...

gr Pyro

[Pyrofreak]

Ähm sorry theo entweder hab ich heute zu lange vor dem Pc verbracht, keine Ahnung es klappt einfach nicht an meiner Seite, vl könntest Du mir den Fehler
zeigen? Ich finde Ihn einfach nicht...Wenn ich das div einfach drunter reinpacke
zeigt er es immer oben an und nicht unter dem ersten div...

gr Pyro

[theo]

du bist echt ein schwerer fall

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>thanks to stu</title>
        <style type="text/css">        
			html, body { margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px; }
			.headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
			#container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
			#inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
			#left {float:left; position:relative; width:200px; left:0px;}
			#right {float:right; position:relative; width:190px; right:0px;}
				#right1{ height: 80px; background-color: #ff0000; padding: 5px; margin: 5px 0; }
				#right2{ height: 120px; background-color: #990000; padding: 5px; margin: 5px 0; }
			#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
			.clear {clear:both;}
			a:visited, a {text-decoration:underline; cursor:pointer;}
			a:hover {text-decoration:none; cursor:pointer;}
			em {font-weight:bold;}
        </style>
    </head>    
    <body>
    <div class="headfoot">Header</div>
    
    <div id="container">
        <div id="inner">
            <div id="left">
            	linke seite
            </div>
    
            <div id="right">
                <div id="right1">rechts 1</div>
                <div id="right2">rechts 2</div>
            </div>
    
            <div id="center">
            	mitte
            </div>
                
            <div class="clear"></div>
        </div>    
    </div>
    
    <div class="headfoot">Footer<br />NOTHING could be simpler...!</div>
    </body>
</html>

isses das? sag jetzt bitte "ja". falls "nein", dann musst du es irgendwie anders erklaeren. dann hab ich dich falsch verstanden ...

[Pyrofreak]

@theo Ja genau so wie du es rechts gemacht hast so meine ich das! Das kann man dann ja links und rechts so machen, denk ich mal...
Das komische is nur wenn ich deines mit meinem vergleiche finde ich den Fehler jetz so auf die schnelle aber nicht bei mir, ausser das du überall "relative" und "display: block" geschrieben hast? Das is der Fehler bei mir? Aber ich brauch doch das relative nicht oder?

gr Pyro

[Pyrofreak]

Habe es jetzt so gemacht, aber wie man sieht http://www.chat-surium.com/
zeigt er die Seite dennoch in beiden Browsern im Firefox und Explorer unterschiedlich an, man betrachte die Zwischenabstände!

lol das is ein Ding zum Haare ausrupfen



gr Pyro