Drop Down und repeat-y

Hey Leute,

ich habe für einen Freund eine Clanhomepage designed und angepasst, allerdings habe ich nun 2 Probleme.

Problem eins ist, dass er ein Drop Down Menü haben wollte, was als sollches keine große Sache ist, allerdings funktioniert ein Menü nicht, obwohl es 1zu1 geschrieben ist wie die anderen.

Und mein zweites Problem ist, dass meine 2 Abstandhalter (sind 2 Bilder) sich nicht auf der y-achse strecken lassen.

[HTML]

...
    <div id="navigation">
    	<div id="navi_1"></div>
    	<ul id="main">
        	<li><a href="#"><img src="Navigation/navi_02.gif" width="80" height="30" border="0" /></a>
            	<ul>
                	<li><a href="index.php?site=news"><img src="Navigation/news.gif" width="86" height="15" border="0" /></a></li>
                    <li><a href="index.php?site=contact"><img src="Navigation/contact.gif" width="86" height="15" border="0" /></a></li>
                    <li><a href="index.php?site=imprint"><img src="Navigation/impressum.gif" width="86" height="15" border="0" /></a></li>
                </ul>
        	</li>
        </ul>
        <div id="navi_2"></div>
        <ul id="clan">
        	<li><a href="#"><img src="Navigation/navi_04.gif" width="80" height="30" border="0" /></a>
            	<ul>
                	<li><a href="index.php?site=members"><img src="Navigation/squads.gif" width="86" height="15" border="0" /></a></li>
                    <li><a href="index.php?site=rules"><img src="Navigation/rules.gif" width="86" height="15" border="0" /></a></li>
                    <li><a href="index.php?site=clanwars"><img src="Navigation/wars.gif" width="86" height="15" border="0" /></a></li>
                    <li><a href="index.php?site=history"><img src="Navigation/history.gif" width="86" height="15" border="0" /></a></li>
                </ul>
            </li>
        </ul>
        <div id="navi_3"></div>
        <ul id="com">
        	<li><a href="#"><img src="Navigation/navi_06.gif" width="80" height="30" border="0" /></a>
            	<ul>













    </div> <!-- Navigationsleiste -->
   <div class="clear"></div>
</div> <!-- Header -->

<div id="abstandhalter"></div>

<div id="inhalt">

	<div id="links_1">
    	
        <div id="head_poll"></div>
    	<div id="feld_1"></div>
        	<div id="feld_2">
				<div id="includes">...</div>
            </div>
            	<div class="clear"></div>
        <div id="feld_3"></div>
        
        <div id="shoutbox"></div>
        <div id="feld_1"></div>
        	<div id="feld_2">
            	<div id="includes">...</div>
            </div>
            	<div class="clear"></div>
        <div id="feld_3"></div>
        
        <div id="shadow"></div>
        
    </div>
    
    <div id="abstandhalter_1"></div>

	<div id="links_2">
    	
        <div id="statistik"></div>
        	<div id="feld_1"></div>
            	<div id="feld_2">
                	<div id="includes">...</div>
                </div>
                <div class="clear"></div>
            <div id="feld_3"></div>
                    
        <div id="sponsoren"></div>
        	<div id="feld_1"></div>
            	<div id="feld_2">
                	<div id="includes">...</div>
                </div>
        		<div class="clear"></div>
           <div id="feld_3"></div>
        
        <div id="shadow"></div>
        
    </div>
    
    <div id="abstandhalter_2"></div>

    <div id="content">
    	
        <div id="newswars"></div>
        	<div id="felder">
            	<div id="news">
					<div id="includes">...</div>
                </div>
        		<div id="wars">
					<div id="includes">...</div>
                </div>
			</div>
            	<div class="clear"></div>
        <div id="inhalt_2">
        	<div id="text">
        			...
            </div>
        </div>
        
    </div>
    
    <div id="abstandhalter_3"></div>
    
    <div class="clear"></div>
    
</div> <!-- Inhalt -->



<div id="footer"></div>
[/HTML]

[CODE]@charset „utf-8“;

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin:0;
}

.clear {
clear:both;
}

#wrapper {
width:1000px;
height:auto;
margin:auto;
border:#CCC 1px;
}

#headerbox {
width:1000px;
height:150px;
}

#header_1 {
width:730px;
height:120px;
background-image:url(Bilder/header_01.gif);
float:left;
}

#header_login {
width:270px;
height:120px;
float:left;
}

#header_2 {
width:270px;
height:15px;
background-image:url(Bilder/header_02.gif);
}

#login {
width:259px;
height:105px;
background-image:url(Bilder/login_bg.gif);
float:left;
}
#header_3 {
width:11px;
height:105px;
background-image:url(Bilder/header_04.gif);
float:left;
}

#navigation {
width:1000px;
height:30px;
float:left;
}

#navi_1 {
width:3px;
height:30px;
background-image:url(Navigation/navi_01.gif);
float:left;
}

#main {
width:80px;
height:30px;
padding:0;
margin:0;
list-style:none;
background-image:url(Navigation/navi_02.gif);
float:left;
}

#main ul {
width:86px;
height:auto;
padding:0;
margin:0;
list-style:none;
}

#main li ul {
display:none;
}

#main li:hover ul {
display:block;
}

#navi_2 {
width:3px;
height:30px;
float:left;
background-image:url(Navigation/navi_03.gif);
}

#clan {
width:80px;
height:30px;
padding:0;
margin:0;
position:relative;
list-style:none;
float:left;
background-image:url(Navigation/navi_04.gif);
}

#clan ul {
width:86px;
height:auto;
padding:0;
margin:0;
list-style:none;
}

#clan li ul {
display:none;
}

#clan li:hover ul {
display:block;
}

#navi_3 {
width:3px;
height:30px;
float:left;
background-image:url(Navigation/navi_05.gif);
}

#com {

}

#com ul {

}

#com li ul {

}

#com li:hover ul {

}

#navi_4 {
width:3px;
height:30px;
float:left;
background-image:url(Navigation/navi_07.gif);
}

#misc {

}

#misc ul {

}

#misc li ul {

}

#misc li:hover ul {

}

#navi_5 {
width:668px;
height:30px;
float:left;
background-image:url(Bilder/index_26.gif);
}

#abstandhalter {
width:1000px;
height:1px;
background-image:url(Bilder/abstand.gif);
}

#inhalt{
width:1000px;
height:100%;
}

#links_1 {
width:188px;
float:left;
}

#feld_1 {
width:188px;
height:15px;
background-image:url(Bilder/feld_1.gif);
}

#feld_2 {
width:188px;
height:auto;
float:inherit;
background-image:url(Bilder/feld_2.gif);
background-repeat:repeat-y;
}

#includes {
width:188px;
margin-left:10px;
height:auto;
}

#feld_3 {
width:188px;
height:19px;
background-image:url(Bilder/feld_3.gif);
}

#shadow {
width:188px;
height:9px;
background-image:url(Bilder/left1-shadow.gif);
}

#head_poll {
height:17px;
background-image:url(Bilder/poll.gif);
}

#shoutbox {
height:18px;
background-image:url(Bilder/shoutbox.gif);
}

#abstandhalter_1 {
width:2px;
height:244px;
background-image:url(Bilder/trenner_1.gif);
background-repeat:repeat-y;
float:left;
}

#links_2 {
width:188px;
float:left;
}

#statistik {
height:17px;
background-image:url(Bilder/statistik.gif);
}

#sponsoren {
height:18px;
background-image:url(Bilder/sponsoren.gif);
}

#abstandhalter_2 {
width:2px;
height:244px;
background-image:url(Bilder/trenner_2.gif);
background-repeat:repeat-y;
float:left;
}

#content {
width:px;
float:left;
}

#newswars {
width:619px;
height:17px;
background-image:url(Bilder/news-wars.gif);
}

#news {
width:310px;
height:100px;
background-image:url(Bilder/news_feld.gif);
float:left;
}

#wars {
width:308px;
height:100px;
background-image:url(Bilder/wars-feld.gif);
float:left;
}

#inhalt_2 {
width:619px;
height:auto;
}

#text {
margin:5px;
padding:5px;
}

#abstandhalter_3 {
width:1px;
height:auto;
background-image:url(Bilder/abstand2.gif);
background-repeat:repeat-y;
}

#footer {
width:1000px;
height:45px;
background-image:url(Bilder/footer.gif);
}[/CODE]

Bei meinem Problemkindern handelt es sich um die Liste mit der id „Main“ und um die Div’s mit den ID’s abstandhalter_1 und abstandhalter_2.

Zur weiteren Erläuterung, die haben den Namen, weil mir nichts besseres eingefallen ist, in beiden ist ein Bild und das soll eigentlich auf der y-achse wiederholt werden.

Hier mal die Webseite wo das ganze gerade getestet wird.

Klick mich zur Problemwebseite

Gruß

Jinnai

Ich würde dir empfehlen das Menü oben zu überdenken. Du musst nicht alles als einzelne

    -Listen definieren. Besser wäre es alles was in #navigation steht in einer Liste mit Unterlisten zu erfassen. Dann musst Du auch nicht für jede einzelne Rubrik eine eigene ID verwenden und dein CSS wäre etwas übersichtlicher.

Hey threadi,

habe das Menü jetzt in eine Liste gepackt, jetzt funktionieren auch alle Buttons wie sie sollen, allerdings hab ich jetzt ein anderes Problem und zwar sind die Bilder für die Links:

<ul> <li><a href="index.php?site=news"><img src="Navigation/news.gif" width="86" height="15" border="0" /></a></li> <li><a href="index.php?site=contact"><img src="Navigation/contact.gif" width="86" height="15" border="0" /></a></li> <li><a href="index.php?site=imprint"><img src="Navigation/impressum.gif" width="86" height="15" border="0" /></a></li> </ul>

[CODE]#navigation {
width:1000px;
height:30px;
float:left;
}

#navi, #navi ul {
padding:0;
margin:0;
list-style:none;
}

#navi li {
float:left;
position:relative;
list-style-type:none;
}

#navi li ul {
display:none;
}

#navi li:hover ul {
width:86px;
height:auto;
display:block;
}
[/CODE]

größer als die Elemente in der Liste über die man geht, wenn das Menü sich aufklappen soll. Wenn man jetzt also z.B. auf den Mainbutton geht, zerreist es mir die Navigationsleiste, weil die Buttons die dann eingeblendet sind, 6px größer sind.

Und dann ist noch das Problem, dass sich die Streifen zwischen meinen Boxen:

[CODE]

	<div id="links_1">
    	
        <div id="head_poll"></div>
    	<div id="feld_1"></div>
        	<div id="feld_2">
				<div id="includes">...</div>
            </div>
            	<div class="clear"></div>
        <div id="feld_3"></div>
        
        <div id="shoutbox"></div>
        <div id="feld_1"></div>
        	<div id="feld_2">
            	<div id="includes"></div>
            </div>
            	<div class="clear"></div>
        <div id="feld_3"></div>
        
        <div id="shadow"></div>
        
    </div>
    
    <div id="abstandhalter_1"></div>

	<div id="links_2">
    	
        <div id="statistik"></div>
        	<div id="feld_1"></div>
            	<div id="feld_2">
                	<div id="includes">...</div>
                </div>
                <div class="clear"></div>
            <div id="feld_3"></div>
                    
        <div id="sponsoren"></div>
        	<div id="feld_1"></div>
            	<div id="feld_2">
                	<div id="includes"></div>
                </div>
        		<div class="clear"></div>
           <div id="feld_3"></div>
        
        <div id="shadow"></div>
        
    </div>
    
    <div id="abstandhalter_2"></div>

    <div id="content">
    	
        <div id="newswars"></div>
        	<div id="felder">
            	<div id="news">
					<div id="includes">...</div>
                </div>
        		<div id="wars">
					<div id="includes">...</div>
                </div>
			</div>
            	<div class="clear"></div>
        <div id="inhalt_2">
        	<div id="text">
        			...
            </div>
        </div>
        
    </div>
    
    <div id="abstandhalter_3"></div>
    
    <div class="clear"></div>
    
</div> <!-- Inhalt -->[/CODE]

[CODE]#abstandhalter_1 {
width:2px;
height:244px;
background-image:url(Bilder/trenner_1.gif);
background-repeat:repeat-y;
float:left;
}

#abstandhalter_2 {
width:2px;
height:244px;
background-image:url(Bilder/trenner_2.gif);
background-repeat:repeat-y;
float:left;
}
[/CODE]

nicht strecken.

Webseitenlink

Verringere die Breite von „#navi li:hover ul“ auf 80px. Dann ruckelt es zumindest in meinem FF nicht mehr.

Damit ist ja das Problem nicht wirklich gelöst, da die Bilder dann kleiner angezeigt werden als sie sind und das sieht dann nicht mehr so gut aus.

Die Grafiken im Navigationsbereich sind 80 Pixel breit und 30 Pixel hoch. Genau das wird bei mir auch angezeigt.

Ja, die Grafiken in der Leiste sind 80px breit, aber die, die aufgeklappt werden, wenn man z.B. über Main geht, sind 86px breit.

€dit: Hab den Fehler gefunden, der das Design zerreist, hab position:absolut; beim hover vergessen. Aber das mit dem repeat-y funktioniert bei #abstandhalter_1 und #abstandhalter_2 immer noch nicht. :confused:

Also, soweit ist jetzt alles in Ordnung mit der Homepage, allerdings habe ich noch ein Problem mit der Navigation. Und zwar wenn die Navigation aufklappt, sind die Grafiken nicht direkt aneinander, sondern immer 1 oder 2 Pixel Abstand dazwischen.

Hier mal der Style der Navigation und des Dropdowns

[CODE]#navigation {
width:1000px;
height:30px;
float:left;
}

#navi, #navi ul {
margin:0;
padding:0;
list-style:none;
}

#navi li {
float:left;
position:relative;
}

#navi li ul {
display:none;
position:absolute;
}

#navi li:hover ul {
display:block;
}[/CODE]

Hoffe da kann mir jemand helfen.

Webseitenlink

Dann gib „#navi li ul“ noch ein „top: 31px;“ (könnte auch +/- 1px sein).