Hallo Forum,
ich entwickle gerade ein Template für ein erstes größeres Projekt.
Stand: Demo Erweiterung
HTML-Gerüst:
CSS:
Probleme:
Danke für eure Hilfe schon vorab!
derweber
ich entwickle gerade ein Template für ein erstes größeres Projekt.
Stand: Demo Erweiterung
HTML-Gerüst:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Markus Weber">
<meta http-equiv="expires" content="Sat, 18 Aug 2012 00:00:00 GMT">
<meta name="robots" content="noindex">
<title>Demo Erweiterung</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="wrapper"> <!-- "wrapper" ist ein 800px-Bereich für den Inhalt -->
<div id="titel"> <!-- "titel" Titelbereich -->
<p>Titel</p>
</div> <!-- schließt "titel" -->
<div id="steuerung"> <!-- "steuerung" Navigationsleiste links -->
<div id="valid"> <!-- Box für W3C-Grafik -->
<ul id="navi">
<li><img src="img/html.png" alt="Valid HTML 4.01 Transitional"></li>
<li><img src="img/vcss.gif" alt="Valid CSS 2.1"></li>
</ul>
</div> <!-- schließt "valid" -->
</div> <!-- schließt "steuerung" -->
<div id="main"> <!-- Hauptbereich für Inhalt -->
<h1>Test</h1>
<p>Test</p>
</div> <!-- schließt "main" -->
<div id="footer"> <!-- "footer" Fußzeile -->
<p class="footfont">© Zuidberg Frontline Systems b.v. • Buitenveld 5 • 8307 DE Ens, Holland</p>
<p class="footfont">Tel 0031 527 253550 - Fax 0031 527 253037 • <a href="mailto:[email protected]">[email protected]</a> • <a href="http://www.zuidberg.de">www.zuidberg.de</a></p>
</div> <!-- schließt "footer" -->
</div> <!-- schließt "wrapper" -->
</body>
</html>CSS:
Code:
body {
margin : 0px;
padding : 0px;
background-color : #ffffcc;
}
h1 {
font-family : Helvetica;
font-size : 300%;
color : #fffff0;
border-bottom : thin solid black;
}
p, li {
font-size : 110%;
line-height : 140%;
font-family : Helvetica;
letter-spacing : 0.1em;
word-spacing : 0.3em;
}
#wrapper {
background-color : lightblue;
width : 800px;
margin-top: 0px;
padding-top: 0px;
margin-left : auto;
margin-right : auto;
}
#titel {
margin-top : 0px;
padding-top : 0px;
background-color : red;
width : 800px;
float : left;
padding-left : 20px;
}
#steuerung {
background-color : yellow;
width : 200px;
float : left;
border-right : 1px solid blue;
}
#valid {
padding-top : 600px;
padding-left: 0px;
}
p#valid {
text-align : center;
}
ul#navi li {
list-style : none;
}
#main {
background-color : green;
margin-left : 200px;
width : 600px;
padding-left : 20px;
}
#footer {
background-color : red;
width : 800px;
float : left;
padding-left : 20px;
}
.footfont {
text-align: center;
font-size : 50%;
line-height : 60%;
font-family : Helvetica;
letter-spacing : 0.1em;
word-spacing : 0.3em;
}Probleme:
- Der div "Titel" soll oben am Browser anstehen. Ich finde den CSS-Befehl nicht, der zumindest im IE und im Firefox bewirkt, dass es das nicht tut, sondern ein Abstand entsteht.
- Der Bereich "wrapper" ist zum Test auf background-color hellblau gesetzt. verkleinere ich den "main"-Bereich, dann sieht man zwischen dem grünen Bereich und dem gelben Bereich auch den hellblauen Bereich. Ich möchte aber, dass dieser bis zum footer runtergeht. Wie stelle ich das an?
- die W3C-Grafiken sollten im gelben Bereich zentriert sein. Sind sie aber nicht. Any ideas?
- gibt es eine Möglichkeit zu definieren, dass der Footer so weit runtergesetzt wird, dass die Seite mindestens eine Bildschirmseite füllt? Also bei "zu wenig" Text im "main"-Bereich sitzt der Footer unten am Bildschirm, kommt mehr Text "verlängert" sich die Seite und der Footer verschwindet aus dem Sichtbereich. Also keine absolute Position. Erlaubte Lösungsansätze: HTML, CSS, php.
Danke für eure Hilfe schon vorab!
derweber
