nicht angemeldet
Hallo, ich bin neu auf dem CSS-Gebiet. Ich habe folgenden Quelltext zusammengestrickt und da bleiben noch einige Fragen offen, was einige Problemlösungen angeht...
Hier mal der komplette Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
color: black;
font-size: 80.01%;
font-family: Arial,Helvetica,sans-serif;
margin: 0;
background-color: #d8dcd3;
height: 100%;
}
.menu {text-decoration: none; color: black; font-weight: bold;}
.menu_active {text-decoration: none; color: red; font-weight: bold;}
.menu:visited {color: black}
.menu:hover {color: blue}
.angebot {text-decoration: none; border-bottom: 1px dotted #373}
.angebot:visited {background: transparent; color: #373}
.angebot:hover {background: #C9D8B3; color: black}
div#all {
width: 800px;
}
div#logo {
float: left;
width: 220px;
height: 40px;
background-color: #ffffff;
background-image: url(images/logo.png); image-width:255px; image-height:25px;
background-repeat:no-repeat;
background-position:5px 5px;
}
div#left {
float: left;
width: 220px;
background-color: #d8dcd3;
}
div#navi_top {
float: left;
height: 40px;
background-color: #d8dcd3;
width: 580px;
text-align: center;
}
div #menu {
}
#main {
float: left;
width: 450px;
background-color: #ffffff;
height: 75%;
padding: 20px;
}
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
p {
margin: 2px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}
li {
padding: 10px;
}
div#navi_top li {
padding: 10px;
padding-left: 15px;
float: left;
}
div#footer {
clear: left;
/*background-color: blue;*/
padding-top: 5px;
width: 730px;
}
div#left_footer {
float: left;
/*background-color: green;*/
width: 220px;
}
div#right_footer {
float: left;
text-align:center;
/*background-color: red;*/
width: 510px;
}
</style>
</head>
<body>
<div id="all">
<div id="top">
<div id="logo">
</div>
</div>
<div id="navi_top">
<ul>
<li><a class="menu_active" href="#">Navi 1 (aktiv)</a></li>
<li><a class="menu" href="#">Navi 2</a></li>
<li><a class="menu" href="#">Navi 3</a></li>
<li><a class="menu" href="#">Navi 4</a></li>
<li><a class="menu" href="#">Navi 5</a></li>
<li><a class="menu" href="#">Navi 6</a></li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">
<div style="text-align:center; padding-top: 10px; padding-bottom: 10px;">
<strong>Hang 12 12345 Freiburg<br />
Telefon (01234) 9876 - <font style="color:#d8dcd3;">1</font>0<br />
Telefax (01234) 9876 - 10</strong>
</div>
<div id="menu">
<ul><li><a class="menu_active" href="#">Navi 1.1 (aktiv)</a></li>
<li><a class="menu" href="#">Navi 1.2</a></li>
<li><a class="menu" href="#">Navi 1.3</a></li>
<li><a class="menu" href="#">Navi 1.4</a></li>
<li><a class="menu" href="#">Navi 1.5</a></li>
</ul>
</div>
</div>
<div id="main">
<div style="color:white; background-color: red; width: 470px; font-size: 1.8em; font-weight: bold; text-align:center;">ANGEBOT DER WOCHE</div>
<p class="centeredImage"><img src="images/angebot.jpg" border="0" height="240" width="320" alt="Bild zeigt aktuelles Angebot" /></p>
<p style="font-weight:bold;">Headline Headline Headline Headline Headline Headline Headline Headline Headline</p>
Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext </p>
<p style="font-weight:bold;">Preis: EUR 300,-</p>
<p style="margin-left:20px; text-align:center; padding-top:20px;"><a class="angebot" href="#">Angebot anfordern</a></p>
</div>
</div>
</div>
<div id="footer">
<div id="left_footer"></div>
<div id="right_footer">
<a class="angebot" href="#">Navi 7</a>
<a class="angebot" href="#">Navi 8</a>
</div>
</div>
</body>
</html>
Nun zu meinen Fragen:
(Für weitere Anregungen bin ich natürlich stets dankbar!!!)
-
ich habe das Gefühl, dass mein Logo oebn links nicht ganz zentriert wird...gibt es da bessere Möglichkeiten statt meiner bisherigen Lösung?
-
Die horizontale Navigation möchte ich gerne auch horizontal zentrieren, hier stimmen wohl ausserdem die width-Werte des div-Tags nicht so ganz im Vergleich zu den anderen Seiten
-
wie würdet ihr denn alles variabel strukturieren, sprich welche Werte für % und em sind in diesem Projekt zu empfehlen? Sind denn auch Bilder skalierbar, wenn der User die Schrift vergrössern will, dies wäre optimal für meine Bedürfnisse!
-
im IE werden die Punkte vom Link (Navi7 und Navi8) nicht angezeigt, obwohl dies bei "Angebot anfordern" richtig funktioniert...im Mozilla wird das auch richtig angezeigt
-
im Mozilla wird der weisse Text auf rotem Hintergrund falsch zentriert und wandert etwas nach rechts...wie schafft man hier Abhilfe, etwa durch display:block???
-
Auch im Mozilla werden die Footer-Links (s. Punkt 4) nicht zentriert, im IE aber schon, wie es sein sollte...
Danke für Eure Mühen!
Gruss,
larry
MudGuard