Frage stellen
Ich habe ein Problem mit einem Design, dass auf DIV Containern basiert. Habe das Design nach dem Slicen vorerst an den IE 6 angepasst, danach gings dann natürlich zur Browserkompatibilität im Firefox, Opera und IE 7.
Die meisten Fehler habe ich selbst beheben können, jedoch sind noch ein paar übrig, die ich selbst nicht beseitigt kriege.
Folgende Fehler:
- wie man sieht, ist die Navi zu weit links (im IE 6 sitzt sie normal)
- der Footer fehlt (in allen Browsern. Ging vorher, habe dann was am Style Sheet verändert, seitdem geht wird der Footer nicht mehr angezeigt.)
Screenshot aus dem IE6:
http://www.blackoise.de/files/seite_ie6.jpg
Screenshot aus dem Opera 9.1:
http://www.blackoise.de/files/seite_opera.jpg
Nun die CSS Datei:
- Code: Alles auswählen
body {
margin: 0px;
padding: 0px;
text-align: center;
background-color: #EFEFEF;}
div#box_oben {
width: 835px;
margin-left: 20px;
margin-top: 20px;
margin: auto;
text-align: left; }
div#header {
height: 229px;
background-image: url(images/header.jpg);
background-repeat: no-repeat; }
div#box_content {
width: 835px;
height: 400px;
margin-left: 0px;
margin-top: 0px;
margin: auto;
background-image: url(images/main_bg.jpg);
background-repeat: y-repeat;
text-align: left; }
div#navigation {
width: 172px;
float: left; }
div#navigation img {display: block;}
div#slinks_box {
margin: 0px;
float: left;
height: 34px;
width: 172px; }
div#startseite {
margin: auto;
margin-left: 17px;
float: left;
height: 28px;
width: 122px; }
div#tankkarte {
margin: 0px;
margin-left: 17px;
float: left;
height: 29px;
width: 122px; }
div#oel_gas {
margin: 0px;
margin-left: 17px;
float: left;
height: 42px;
width: 122px; }
div#westmarkt {
margin: 0px;
margin-left: 17px;
float: left;
height: 27px;
width: 122px; }
div#futtermittel {
margin: 0px;
margin-left: 17px;
float: left;
height: 27px;
width: 122px; }
div#aktuelles {
margin: 0px;
margin-left: 17px;
float: left;
height: 25px;
width: 122px; }
div#kontakt {
margin: 0px;
margin-left: 17px;
float: left;
height: 29px;
width: 122px; }
div#agravis {
margin: 0px;
margin-left: 17px;
margin-top: 25px;
float: left;
height: 29px;
width: 122px; }
div#content {
width: 500px;
float: left;
margin: 7px;}
div#preise {
width: 144px;
height: 400px;
margin-left: 5px;
float: left;
background-image: url(images/preise_bg.jpg);
background-repeat: y-repeat; }
div#box_benzin {
margin-top: 20px;
margin-left: 13px;
height: 68px;
width: 94px;
background-image: url(images/preise/box_benzin.jpg);
background-repeat: no-repeat; }
div#box_super {
margin-top: 10px;
margin-left: 13px;
height: 68px;
width: 94px;
background-image: url(images/preise/box_super.jpg);
background-repeat: no-repeat; }
div#box_superplus {
margin-top: 10px;
margin-left: 13px;
height: 68px;
width: 94px;
background-image: url(images/preise/box_superplus.jpg);
background-repeat: no-repeat; }
div#box_diesel {
margin-top: 10px;
margin-left: 13px;
height: 68px;
width: 94px;
background-image: url(images/preise/box_diesel.jpg);
background-repeat: no-repeat; }
div#box_benzin_1 {
margin-top: 19px;
margin-left: 7px;
height: 37px;
width: 10px;
float: left;
background-image: url(images/preise/anzeige_1_1.jpg);
background-repeat: no-repeat; }
div#box_benzin_2 {
margin-top: 19px;
margin-left: 4px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_1.jpg);
background-repeat: no-repeat; }
div#box_benzin_3 {
margin-top: 19px;
margin-left: 3px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_7.jpg);
background-repeat: no-repeat; }
div#box_super_1 {
margin-top: 19px;
margin-left: 7px;
height: 37px;
width: 10px;
float: left;
background-image: url(images/preise/anzeige_1_1.jpg);
background-repeat: no-repeat; }
div#box_super_2 {
margin-top: 19px;
margin-left: 4px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_2.jpg);
background-repeat: no-repeat; }
div#box_super_3 {
margin-top: 19px;
margin-left: 3px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_1.jpg);
background-repeat: no-repeat; }
div#box_superplus_1 {
margin-top: 19px;
margin-left: 7px;
height: 37px;
width: 10px;
float: left;
background-image: url(images/preise/anzeige_1_1.jpg);
background-repeat: no-repeat; }
div#box_superplus_2 {
margin-top: 19px;
margin-left: 4px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_2.jpg);
background-repeat: no-repeat; }
div#box_superplus_3 {
margin-top: 19px;
margin-left: 3px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_6.jpg);
background-repeat: no-repeat; }
div#box_diesel_1 {
margin-top: 19px;
margin-left: 7px;
height: 37px;
width: 10px;
float: left;
background-image: url(images/preise/anzeige_1_1.jpg);
background-repeat: no-repeat; }
div#box_diesel_2 {
margin-top: 19px;
margin-left: 4px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_0.jpg);
background-repeat: no-repeat; }
div#box_diesel_3 {
margin-top: 19px;
margin-left: 3px;
height: 37px;
width: 20px;
float: left;
background-image: url(images/preise/anzeige_5.jpg);
background-repeat: no-repeat; }
div#footer {
height: 62px;
width: 835px;´
background-image: url(images/footer_bg.jpg);
background-repeat: no-repeat; }
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #006600;
text-align: justify; }
Und noch die HTML Datei (falls benötigt):
- Code: Alles auswählen
<DOCTYPE>
<html>
<head>
<meta>
<title>Dokument</title>
<link>
</head>
<body>
<p></p>
<div>
<BEGINN>
<div>
</div>
<ENDE>
</div>
<div>
<div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
<div>
<img>
</div>
</div>
<div>
<div>
<b>Impressum</b><br>
<br>
The <body> is unique because it is the parent tag of most of the elements you'll be styling. Like any good parent, its child elements inherit styling properties from it. When you style the "body" element in CSS, you're really setting default properties for the whole page (or site!). If you, say, set Tahoma as the "font-family" in your "body" element, all fonts on the page will be Tahoma unless you style the child elements differently.The <body> is unique because it is the parent tag of most of the elements you'll be styling. Like any good parent, its child elements inherit styling properties from it. When you style the "body" element in CSS, you're really setting default properties for the whole page (or site!). If you, say, set Tahoma as the "font-family" in your "body" element, all fonts on the page will be Tahoma unless you style the child elements differently.The <body> is unique because it is the parent tag of most of the elements you'll be styling. Like any good parent, its child elements inherit styling properties from it. When you style the "body" element in CSS, you're really setting default properties for the whole page (or site!). If you, say, set Tahoma as the "font-family" in your "body" element, all fonts on the page will be Tahoma unless you style the child elements differently.The <body> is unique because it is the parent tag of most of the elements you'll be styling. Like any good parent, its child elements inherit styling properties from it. When you style the "body" element in CSS, you're really setting default properties for the whole page (or site!). If you, say, set Tahoma as the "font-family" in your "body" element, all fonts on the page will be Tahoma unless you style the child elements differently.
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div></div>
</body>
</html>
Vielen Dank schonmal im Voraus!
/EDIT: Ok, also der Footer ist nun da, habe einfach noch
float: left;
und margin: auto;
hinzugefügt, jetzt ist er da und passend ausgerichtet.