CSS positionieren klappt nicht

maxsteel · 11.07.2010

Hi Leute ich mühe mich jetz schon den ganzen Nachmittag mit dem Problem ab das ich es nicht schaffe in einen divlayer oben unten links und rechts etwas zu positionieren.
Hier erstmal der Bady des HTML Codes:

HTML:

<body>
<div id="bereich">


    <div id="navigation">
        <div id="button1"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
    </div>
    
    <div id="galerie">
        <div id="top">
        	<div id="left">
        		<div id="right">
        			<div id="bottom">
                    hallo
                    </div>
                </div>
	        </div>
        </div>        
    </div>

</div>

</body>

und hier der CSS code:

Code:

@charset "utf-8";
/* CSS Document */
body{
	background:url(../images/bg.jpg);
}

#bereich{
	width:800px;
	height:600px;
	margin:auto;
}

#navigation{
	margin-top:20px;
	margin-left:200px;
	float:left;
}
#button1{
	width:180px;
	height:52px;
	margin-top:3px;
	background:url(../images/button_home.png);
}

#button2{
	width:180px;
	height:52px;
	margin-top:3px;
	background:url(../images/button_home.png);
}

#button3{
	width:180px;
	height:52px;
	margin-top:3px;
	background:url(../images/button_home.png);
}

#button4{
	width:180px;
	height:52px;
	margin-top:3px;
	background:url(../images/button_home.png);
}

#button5{
	width:180px;
	height:52px;
	margin-top:3px;
	background:url(../images/button_home.png);
}

#galerie{
	width:206px;
	height:300px;
	margin-top:20px;
	margin-left:20px;
	float:right;
}

#top {
	background:url(../images/galerie_oben.gif) top no-repeat;
	width:206px;
	height:6px;
}

#left {
	background:url(../images/galerie_links.gif) left repeat-y;
	width:2px;
	height:1px;
}

#right {
	background:url(../images/galerie_rechts.gif) right repeat-y;
	width:2px;
	height:1px;
}

#bottom {
	background:url(../images/galerie_unten.gif) bottom no-repeat;
	width:206px;
	height:6px;
}

Die Navigation funktioniert sehr gut, nur eben die galerie nicht. es soll eigtl so aussehen das ich ein bild bei der galerie habe für oben (top) für unten (bottom) und jeweils eins für links und rechts welches 1px hoch sind und repeatet werden auf der y achse. nun klappt das aber nicht wie ihr seht

Für mich sieht dieder teil relativ sinnlos aus:

HTML:

<div id="galerie">
        <div id="top">
        	<div id="left">
        		<div id="right">
        			<div id="bottom">
                    hallo
                    </div>
                </div>
	        </div>
        </div>        
    </div>

Da es wahlölos gewählt ist. Die anordnung, erst top dann left. Danke schonmal für die antworten.
mfg max

sokie · 11.07.2010

AW: CSS positionieren klappt nicht

vielleicht hast du eine Grafik für uns, wie das aussehen soll.
Auch wenn die Navigation funktioniert, sinnvoll strukturiert ist das jedenfalls nicht. (link LISTE)

die ständig wiederholenden regeln für die Buttons zusammenfassen:
#button1, #button2, button3 ... { regeln };

maxsteel · 11.07.2010

AW: CSS positionieren klappt nicht

sokie schrieb:
vielleicht hast du eine Grafik für uns, wie das aussehen soll.
Auch wenn die Navigation funktioniert, sinnvoll strukturiert ist das jedenfalls nicht. (link LISTE)

die ständig wiederholenden regeln für die Buttons zusammenfassen:
#button1, #button2, button3 ... { regeln };

So sollte das aussehen

rechts ist die galerie. Ich weiß das der code doof aussieht, ich strukturiere ihn auch noch, er soll nur erstmal funzen.
mfg max

maxsteel · 11.07.2010

AW: CSS positionieren klappt nicht

Ich hab ne bessere Variante gefunden.
Ich mache einfach einen top divlayer einen content welcher nur nach unten repeatet wird da er ja nicht in der breite dynamisch sein muss.. und unten noch einen bottom divlayer. das geht doch oder? ist doch am einfachsten.
mfg max

fexx · 13.07.2010

AW: CSS positionieren klappt nicht

maxsteel schrieb:
Ich hab ne bessere Variante gefunden.
Ich mache einfach einen top divlayer einen content welcher nur nach unten repeatet wird da er ja nicht in der breite dynamisch sein muss.. und unten noch einen bottom divlayer. das geht doch oder? ist doch am einfachsten.
mfg max

jup. gäbe auch andere möglichkeiten mit css3 z.b.

ist dann aber ziemlich umständlich das ganze für den IE tauglich zu machen ... aber ich würde dir auch empfehlen deine navigation als liste auszugeben.

fexx