TheShadow
Neues Mitglied
Hi!
Ich mache gerade für meine Band eine Homepage und dafür habe ich eine Hand als Hintergrund-Div und an den jeweiligen Fingern Menübuttons auf den Div gesetzt (mit z-index).
Das Problem ist: Bei mir werden alle Buttons perfekt am jeweiligen Finger angezeigt (Safari + Firefox!) Nun haben mir aber mehrere Leute gesagt, dass bei Ihnen die Positionierung komplett falsch ist (in mehreren Browsern!), obwohl ich meiner Meinung nach gängigen Code benutzt habe.
Das ist die Seite: Six Noises - New Wave
Das ist die index.html:
Und das ist die styles.css:
Ich weiß, dass ich das mit background-image hätte lösen sollen, aber das hat unverständlicherweise nicht funktioniert, weshalb ich auf die direkte Einbindung der Bilder umgestiegen bin.
Kann das Problem eventuell an unterschiedlichen Auflösungen liegen oder woran kann das liegen? Wie kann ich das Problem beheben, dass das Design bei allen passt?
Vielen Dank schonmal!
Gruß
P.S. Hab die </img>'s jetzt mal rausgenommen. Bei einem funktioniert das jetzt wenigstens.
Ich mache gerade für meine Band eine Homepage und dafür habe ich eine Hand als Hintergrund-Div und an den jeweiligen Fingern Menübuttons auf den Div gesetzt (mit z-index).
Das Problem ist: Bei mir werden alle Buttons perfekt am jeweiligen Finger angezeigt (Safari + Firefox!) Nun haben mir aber mehrere Leute gesagt, dass bei Ihnen die Positionierung komplett falsch ist (in mehreren Browsern!), obwohl ich meiner Meinung nach gängigen Code benutzt habe.
Das ist die Seite: Six Noises - New Wave
Das ist die index.html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Six Noises - New Wave</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id ="hintergrund">
<img src ="hand.jpg" alt ="Six Noises"></img>
</div>
<div id ="news">
<a href="lol.html"><img src ="news.jpg" alt ="News"></img></a>
</div>
<div id ="band">
<a href="lol.html"><img src ="band.jpg" alt ="Band"></img></a>
</div>
<div id ="gigs">
<a href="lol.html"><img src ="gigs.jpg" alt ="Gigs"></img></a>
</div>
<div id ="media">
<a href="lol.html"><img src ="media.jpg" alt ="Media"></img></a>
</div>
<div id ="kontakt">
<a href="lol.html"><img src ="kontakt.jpg" alt ="Kontakt"></img></a>
</div>
<div id ="shop">
<a href="lol.html"><img src ="shop.jpg" alt ="Shop"></img></a>
</div>
</body>
</html>Und das ist die styles.css:
Code:
body {
background-color: #1d2c4d;
}
img {
border: 0;
display: block;
}
#hintergrund {
width: 999px;
height: 856px;
margin: auto;
margin-top: 90px;
z-index: 1;
}
#news {
width: 99px;
height: 93px;
left: 170px;
top: 525px;
position: absolute;
z-index: 2;
}
#band {
width: 105px;
height: 94px;
left: 185px;
top: 207px;
position: absolute;
z-index: 2;
}
#gigs {
width: 79px;
height: 69px;
left: 400px;
top: 110px;
position: absolute;
z-index: 2;
}
#media {
width: 123px;
height: 64px;
left: 600px;
top: 30px;
position: absolute;
z-index: 2;
}
#kontakt{
width: 186px;
height: 64px;
left: 740px;
top: 70px;
position: absolute;
z-index: 2;
}
#shop {
width: 94px;
height: 80px;
left: 1000px;
top: 240px;
position: absolute;
z-index: 2;
}Ich weiß, dass ich das mit background-image hätte lösen sollen, aber das hat unverständlicherweise nicht funktioniert, weshalb ich auf die direkte Einbindung der Bilder umgestiegen bin.
Kann das Problem eventuell an unterschiedlichen Auflösungen liegen oder woran kann das liegen? Wie kann ich das Problem beheben, dass das Design bei allen passt?
Vielen Dank schonmal!
Gruß
P.S. Hab die </img>'s jetzt mal rausgenommen. Bei einem funktioniert das jetzt wenigstens.
