css -> helft dem anfänger
Verfasst: 31.05.2006 18:39
Moin!
Vorallem: Das ist meine erste CSS-Site und ich habe sie mit Hilfe von www.css4you.de erstellt :p
Aber ich nehme an, der Quelltext der CSS-Datei ist sehr unsauber, weil ja wie gesagt, das meine erste Seite mit CSS ist (Vorher habe ich immer Tabellen benuzt) ^^
Und jetzt wollte ich euch ma fragen, ob ihr evtl. Verbesserungen des Codes habt und außerdem habe ich noch die Frage: Wie schaffe ich es, dass die .titleline den Text Vertikal in der Mitte schreibt? Also das nicht ganz oben ist, sondern zentriert. vertical-align:middle; funzt irgendwie nicht ^^
Hier die Site:
index.php:
style.css:
Die Website: (zur Veranschaulichung) http://www.planet-spezial.de/new/
Vorallem: Das ist meine erste CSS-Site und ich habe sie mit Hilfe von www.css4you.de erstellt :p
Aber ich nehme an, der Quelltext der CSS-Datei ist sehr unsauber, weil ja wie gesagt, das meine erste Seite mit CSS ist (Vorher habe ich immer Tabellen benuzt) ^^
Und jetzt wollte ich euch ma fragen, ob ihr evtl. Verbesserungen des Codes habt und außerdem habe ich noch die Frage: Wie schaffe ich es, dass die .titleline den Text Vertikal in der Mitte schreibt? Also das nicht ganz oben ist, sondern zentriert. vertical-align:middle; funzt irgendwie nicht ^^
Hier die Site:
index.php:
Code: Alles auswählen
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Planet-Spezial.de</title>
</head>
<body>
<div style="width:717px; margin:5px auto; text-align:left;">
<div id="title">
<img src="design/banner.gif" style="width:717px; height:332px;" alt="Logo" />
</div>
<div id="left">
<div class="menucontainer">
<p class="titleline">Menu</p>
» <a class="menu" href="#">Hyperlink 1</a><br />
» <a class="menu" href="#">Hyperlink 2</a><br />
» <a class="menu" href="#">Hyperlink 3</a><br />
» <a class="menu" href="#">Hyperlink 4</a><br />
» <a class="menu" href="#">Hyperlink 5</a><br />
</div>
</div>
<div class="contentcontainer">
<p class="titleline">Content</p>
Hier kommt dann später der Content :)
</div>
<div class="copyright">
© 2006 by Planet-Spezial.de
</div>
</div>
</body>
</html>Code: Alles auswählen
/* CSS Document */
<!--
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
margin:0px;
}
/*für die komplette css-datei, siehe website*/
#title {
height:332px;
padding:0px;
}
#left {
width:150px;
float:left;
}
.menucontainer {
border:#e89d5c 2px solid;
border-top:none;
width:150px;
margin:1px;
float:left;
}
.contentcontainer {
border:#e89d5c 2px solid;
border-top:none;
width:553px;
margin:1px;
float:right;
}
.titleline{
height:20px;
width:100%;
border-bottom:#e89d5c 2px solid;
background-image:url(design/verlauf.gif);
font-size:12px;
font-weight:bold;
text-align:center;
margin:0px;
}
.copyright {
height:20px;
width:712px;
border:#e89d5c 2px solid;
background-image:url(design/verlauf.gif);
font-weight:bold;
text-align:center;
margin:1px;
float:left;
}
//-->
Ich möchte allerdings auch gerne vertikale (senkrechte) Zentrierung. Das es perfekt Gleichvielabstand von allen Rändern hat quasi.
