Ich habe auf meiner seite eine Navigation estellt die aus vier reitern bzw. icons besteht die je 64x64 px entsprechen diese icons Habe ich natürlich via <a> als text diffieniert und den jeweiligen pfart zugewiesen <a href="index.html"><img src="bilder/home"></a>diese reiter waren zuerst alle in einem container verpackt und durch letter spacing getrent so war aber nur das erste und letzte icon klickbar als ich dann in einem forum fragte bekahm ich keine antwort und dachte es könnte am letter spacing liegen also wies ich jedem icon einen eigenen container zu(reiter1;2;3;4) und positionierte sie einzelnd doch das problem hat sich dadurch nicht gelöst und ich kann mir nicht erklären warum die navigation nicht funktionier vileicht könnt ihr mir helfen danke im voraus (und entschuldigt rechtschreib fehler habe es sehr eilig
index.html:
HTML
<html>
<head>
<title>xy</title>
<script language="javascript" type="text/javascript" src="handy.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="bg-element">
</div>
<div id="inhalt">
<div class="logo">
<img src="logo.png">
</div>
<div class="bg2">
</div>
<div class="navigation">
<img src="balken.png">
</div>
<div class="reiter1">
<a href="index.html"><img src="home.png"></a></div>
<div class="reiter2"><a href="shop.html"><img src="shopping-basket%20.png"></a></div>
<div class="reiter3"><a href="#"><img src="mail.png"></a></div>
<div class="reiter4"><a href="#"><img src="picture.png"></a>
</div>
<div class="wilkommen">
<h3>Wilkommen</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="footer">
<a href="https://www.facebook.com/neues.label/"><img src="Facebook.png"></a><br>
<a href="#">Impressum;</a>
<a href="#">Agb;</a>
<a href="admin.html">Adminpanel;</a>
</div>
<div class="kommentare">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id=fb class="fb-comments" data-href="http://xy.de/" data-numposts="5"></div>
</div>
</div>
</body>
</html>style.css:
Code
a:link{text-decoration: none;color: 747474}
a:visited{text-decoration: none;color: 747474}
a:hover{text-decoration: none;background-color: azure}
@font-face {
font-family: 'alex_brushregular';
src: url('alexbrush-regular-webfont.woff2') format('woff2'),
url('alexbrush-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body
.bg2{;width: 900;margin-left: 800;height: 1500;background-color: #f2f2f2;position: absolute;
width: 900px;
height: 1500px;margin-left: -450px;
left: 50%;}
.bg-element{background-image: url(backround.png);width: 110%;height: 1780;margin-left: -32;margin-top: -42;background-attachment: fixed;position: fixed;}
.logo{z-index: 2;position: absolute;
width: 900px;
height: 250px;margin-left: -450px;
left: 50%;}
.navigation{position: absolute;
width: 900px;
height: 83px;margin-left: -450px;
left: 50%;margin-top: 250}
.wilkommen{position: absolute;left: 50%;width: 520;height: 250;margin-left: -260 ;margin-top: 250;font-size: 90;font-family: "alex_brushregular";}
.text{position: absolute;
width: 600px;
height:300px;margin-left: -450px;
left: 65%;margin-top: 500;font-size: 18}
.footer2{position: absolute;
width: 900px;
height: 100px;margin-left: -450px;
left: 50%;margin-top: 3900;text-align: center}
.kommentare{position: absolute;
width: 600px;
height: 500px;margin-left: -450px;
left: 65%;margin-top: 950 }
#inhalt{position: absolute;
width: 980px;
height: 1500px;margin-left: -490px;
left: 50%;}
.shoptext{position: absolute;width: 800;margin-left: -400;margin-top: 450;left: 50%;font-family:;font-size: 20;}
.h2shop{position: absolute;width: 200;margin-left: -100;left: 50%;margin-top: 240;font-size: 72;font-family:"alex_brushregular"}
.bildershop{position: absolute;margin-top: 600;font-size: 40;font-family: sans-serif;width: 720;margin-left: -360;left: 50%;letter-spacing: 1}
.bg2shop{width: 900;margin-left: 800;height: 1500;background-color: #f2f2f2;position: absolute;
width: 900px;
height: 4000px;margin-left: -450px;
left: 50%;}
.platzhalter{font-family: alex_brushregular;color: white;background-color: #484848;text-align: center}
.bestellformular{position: absolute;width:480px;height:800px;margin-left: -240;left: 50%;margin-top: 3000}
.footer{position: absolute;
width: 900px;
height: 100px;margin-left: -450px;
left: 50%;margin-top: 850;text-align: center}
.reiter1{position: absolute;margin-top: 260;height: 64;width: 64;left: 25%;margin-left: -128}
.reiter2{position: absolute;margin-top: 260;height: 64;width: 64;left: 50%;margin-left: -128}
.reiter3{position: absolute;margin-top: 260;height: 64;width: 64;left: 75%;margin-left: -128}
.reiter4{position: absolute;margin-top: 260;height: 64;width: 64;left: 100%;margin-left: -128}
