AW: Ausrichtung/ Hintergrundfärbung Webseite
Hallöchen zusammen,
nun hab ich dank Cebito das Ganze etwas schöner hinbekommen.
Ich habe nur ein einziges Problem. Die Navigationsleiste klebt an der linken Seite. Alles andere ist mittig positioniert. Ich bastele nun schon wieder seit Stunden rum und finde den Fehler einfach nicht. Sicher ist es wieder total einfach und ich sehs einfach nicht... wäre lieb, wenn ihr euch das mal anschauen könntet...
hier mein Quellcode (für die HTML-Datei gekürzt):
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>xxxxxxxx - STARTSEITE -</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css"/>
<script src="change.js" type="text/javascript"></script>
</head><body bgcolor="#999999" onLoad="preloadImages();">
<div id="header"></div>
<div id="navi">
<div id="home"><a href="index.html"
onMouseOver="changeImages('Startseite', 'Bilder/Startseite-over.png'); return true;"
onMouseOut="changeImages('Startseite', 'Bilder/Startseite.png'); return true;"
onMouseDown="changeImages('Startseite', 'Bilder/Startseite-over'); return true;"
onMouseUp="changeImages('Startseite', 'Bilder/Startseite-over'); return true;">
<img name="infos" src="Bilder/Startseite.png" title="Startseite" width="160" border="0" height="37"></a></div>
<div id="info"><a href="info.html"
onMouseOver="changeImages('Infos', 'Bilder/infos-over.png'); return true;"
onMouseOut="changeImages('Infos', 'Bilder/infos.png'); return true;"
onMouseDown="changeImages('Infos', 'Bilder/infos-over'); return true;"
onMouseUp="changeImages('Infos', 'Bilder/infos-over'); return true;">
<img name="infos" src="Bilder/infos.png" title="Informationen zu unserem Unternehmen"
width="160" border="0" height="37"></a></div>
<div id="leistung"><a href="products.html"
onMouseOver="changeImages('Leistungen', 'Bilder/leistungen-over.png'); return true;"
onMouseOut="changeImages('Leistungen', 'Bilder/leistungen.png'); return true;"
onMouseDown="changeImages('Leistungen', 'Bilder/Leistungen-over'); return true;"
onMouseUp="changeImages('Leistungen', 'Bilder/Leistungen-over'); return true;">
<img name="Leistungen" src="Bilder/Leistungen.png" title="Unser Leistungsangebot"
width="160" border="0" height="37"></a></div>
<div id="referenz"><a href="references.html" onMouseOver="changeImages('Referenzen', 'Bilder/Referenzen-over.png'); return true;"
onMouseOut="changeImages('Referenzen', 'Bilder/Referenzen.png'); return true;"
onMouseDown="changeImages('Referenzen', 'Bilder/Referenzen-over'); return true;"
onMouseUp="changeImages('Referenzen', 'Bilder/Referenzen-over'); return true;">
<img name="Referenzen" src="Bilder/Referenzen.png" title="Referenzen"
width="160" border="0" height="37"></a></div>
<div id="contact"><a href="contact.html"
onMouseOver="changeImages('Kontakt', 'Bilder/Kontakt-over.png'); return true;"
onMouseOut="changeImages('Kontakt', 'Bilder/Kontakt.png'); return true;"
onMouseDown="changeImages('Kontakt', 'Bilder/Kontakt-over'); return true;"
onMouseUp="changeImages('Kontakt', 'Bilder/Kontakt-over'); return true;">
<img name="Kontakt" src="Bilder/Kontakt.png" title="Nehmen Sie Kontakt mir uns auf"
width="160" border="0" height="37"></a></div>
</div>
<div id="shadow"></div>
<div id="main">
und hier meine css-Datei:
body {
background-color: #999999
margin: 0;
}
.normal {
font-weight: normal;
font-size: 12px;
font-family: Verdana;
color: #000000;
}
.ueberschrift {
font-weight: bold;
font-size: 16px;
font-family: Verdana;
color: #ff0000;
}
#header {
background-image: url(Bilder/Header.png);
margin: auto;
height: 191px;
width: 800px;
}
#navi {
padding: 0;
marging: auto;
height: 37px;
widht: 800px;
}
#home {
float: left;
height: 37px;
width: 160px;
}
#info {
float: left;
height: 37px;
width: 160px;
}
#leistung {
float: left;
height: 37px;
width: 160px;
}
#referenz {
float: left;
height: 37px;
width: 160px;
}
#contact {
float: left;
height: 37px;
width: 160px;
}
#shadow {
background-image: url(Bilder/LeisteundButtons.png);
margin: auto;
height: 26px;
width: 800px;
}
#main {
background-color:#ffffff;
margin: auto;
height: 550px;
width: 800px;
}
#left {
float: left;
padding: 15px 0 0 40px;
height: 500px;
width: 360px;
}
#right {
float: left;
padding: 15px 35px 0 0;
height: 500px;
width: 365px;
text-align: right;
}
#abstand_unten {
background-color:#ffffff;
margin: auto;
height: 45px;
width: 800px;
}
#naviunten {
padding: auto;
height: 42px;
width: 800px;
}
#impressum {
float: left;
height: 42px;
width: 160px;
}
#platzhalter {
float: left;
background-image: url(Bilder/Reihezw.Impru.Sprachen.png);
height: 42px;
width: 480px;
}
#buttonDE {
float: left;
height: 42px;
width: 48px;
}
#buttonENG {
float: left;
height: 42px;
width: 55px;
}
#buttonRO {
float: left;
height: 42px;
width: 57px;
}
#footer {
background-image: url(Bilder/Fussleiste.png);
margin: auto;
height: 36px;
width: 800px;
}
@cebito: Nochmal vielen vielen Dank für deine Hilfe.. so ist es zwar ein bissel komplizierter, aber ich habe viel gelernt...(offensichtlich noch nicht genug
). Und was noch ein riesen Vorteil ist, die dämlichen grauen Umrandungen im IE sind nun weg.
Sorry für den riesen Post, aber ich habe immer noch nicht raus, wie man die Quellcodes hier größenoptimiert postet.
Vielen Dank schon mal in Voraus!
Liebe Grüße
Smusekaterliene
