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