Hallo,
ich habe meine erste Homepage mit Hilfe von CSS gemacht. Sieht gut auf dem Firefox Browser aus, doch leider macht der IE große und der Opera kleine Probleme.
Hier erstmal der Link: http://kakapopo.ka.funpic.de/jewelry/index.html
Hier der Code( ist noch etwas ungeordnet):
Könntet ihr mir vielleicht sagen, wie ich die Fehler beseitigen kann?
danke
mfg
ich habe meine erste Homepage mit Hilfe von CSS gemacht. Sieht gut auf dem Firefox Browser aus, doch leider macht der IE große und der Opera kleine Probleme.
Hier erstmal der Link: http://kakapopo.ka.funpic.de/jewelry/index.html
Hier der Code( ist noch etwas ungeordnet):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Goldsmith Jewelry</title>
<style type="text/css">
#body {
font: 100.01% sans-serif;
background-color:white;
}
#container {
width: 645px;
text-align: left;
margin: 0 auto;
background-color: white;
}
#header {
width: 745px;
height: 77px;
display: block;
background-repeat: no-repeat;
background-image:url(img/header.gif);
margin-top: 0;
font-size: 12px;
font-weight: bold;
}
#topnavigation {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 15px;
background-image:url(img/navigation.gif);
display:block;
width:645px;
height:44px;
}
img.bigimage{
border: 0px solid #333333;
}
img.picsright1{
border: 0px solid #333333;
position:absolute;
margin:auto auto auto 1px;
}
img.picsright2{
border: 0px solid #333333;
position:absolute;
margin:57px auto auto 1px;
}
img.picsright3{
border: 0px solid #333333;
position:absolute;
margin:114px auto auto 1px;
}
img.picsright4{
border: 0px solid #333333;
position:absolute;
margin:171px auto auto 1px;
}
img.bestsellers {
width: 410px;
border: 0px solid #333333;
position:absolute;
float:left;
margin: 1px 1px 1px 0;
}
.topnavi {
padding-top: 6px;
display:block;
color:#FFFFFF;
}
a:visited {
color:#FFFFFF;
text-decoration:none;
}
a:hover {
text-decoration:none;
color:#80072e;
}
a:link {
color:#FFFFFF;
text-decoration:none;
}
#newsletter {
background-image:url(img/newsletterspace.gif);
width: 234px;
height: 32px;
display:block;
float:right;
margin-top: 1px;
}
a:hover.aktivlink {
color: #ff8800;
}
#bigimage {
width:410px;
height: 226px;
display:block;
margin-top:1px;
}
.product123 {
width:135.7px;
display:inline;
margin: 0 1px 1px 0;
}
.product456 {
width:135.7px;
display:inline;
margin: 1px 1px 1px 0;
}
#bestsellers {
width: 410px;
display:block;
margin-top: 34px;
}
a:hover.bigimage {
text-decoration:none;
}
#block{
width: 235px;
height: 235px;
display: block;
background-color:#80072e;
position:absolute;
top: 390px;
right: 181px;
color:#FFFFFF;
text-align:center;
font-weight:bold;
}
#footer {
text-align:center;
color:#80072e;
font-size:12px;
padding-top: 10px;
}
#footer a:visited {
color:#80072e;
}
#footer a:link {
color:#80072e;
}
#footer a:hover {
text-decoration:underline;
}
#search {
color:#80072e;
background-color:white;
border: 0;
margin-left: 18px;
margin-top: 7px;
}
.submit {
background-color:#ff8800;
color: white;
border: 0;
font-weight:bold;
margin-left: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="topnavigation"><span class="topnavi"> <a href="index.html" class="aktivlink"> Home </a> <a href="index.html"> Bridal </a> <a href="index.html"> Jewelry </a> <a href="index.html"> Gifts</a></span></div>
<div id="bigimage"><a href="index.html"><img class="bigimage" src="img/bigimage.gif" alt="Special Offer"/></a><a href="index.html"><img class="picsright1" src="img/earrings.gif" alt="Earrings" /></a><a href="index.html"><img class="picsright2" src="img/necklaces&pendants.gif" alt="Necklaces&Pendants" /></a><a href="index.html"><img class="picsright3" src="img/bracelets.gif" alt="Bracelets" /></a><a href="index.html"><img class="picsright4" src="img/rings.gif" alt="Rings" /></a>
<img class="bestsellers" src="img/ourbestsellersbar.gif" alt="Best Sellers" />
</div>
<div id="newsletter"><form action="index.html" method="post">
<input type="text" name="search" id="search" size="20" maxlength="40" value=" Enter your Mail here" />
<input class="submit" type="submit" name="go" value="Send"/>
</form>
</div>
<div id="bestsellers"><img class="product123" src="img/productimage.gif" alt="Product" /><img class="product123" src="img/productimage.gif" alt="Product" /><img class="product123" src="img/productimage.gif" alt="Product" /><img class="product456" src="img/productimage.gif" alt="Product" /><img class="product456" src="img/productimage.gif" alt="Product" /><img class="product456" src="img/productimage.gif" alt="Product" /></div>
<div id="block">Whatever you want goes here</div>
<div id="footer"><a href="index.html">About Us</a> | <a href="index.html">Privacy Policy</a> | <a href="index.html">Shipping & Returns</a> | <a href="index.html">Site Map</a> | <a href="index.html">Contact Us</a> <br />
Copyright 2006 Goldsmith Jewelry Shoppe<br /> <br /><img src="img/payment.gif" alt="Payments" /></div>
</div>
</body>
</html>Könntet ihr mir vielleicht sagen, wie ich die Fehler beseitigen kann?
danke
mfg
Zuletzt bearbeitet:
