• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mein erstes CSS

stockwerk

Neues Mitglied
Hallo

Mein erstes kleines Template das ich mit html und CSS geschrieben habe. Sieht das so sauber aus oder was ist nicht korrekt? würde mich auf feedbacks freuen. Habe irgendwie das gefühl das ich immer "float" angeben muss.

Danke :mrgreen:

HTML:
<!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" />
<title>Test</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
<div id="site">
 <ul id="navigation">
 <li><a href="#">Home</a></li>
 <li><a href="#">Dienstleistung</a></li>
 <li><a href="#">Kontakt</a></li>
 <li><a href="#">Über uns</a></li>
 <li><a href="#">Referenzen</a></li>
</ul>
<div id="box"></div>
<div id="content">
<h2>Home</h2>
<p>Das wird eine schöne Website!</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>

HTML:
*{
margin: 0px;
padding: 0px;
color: #FFFFFF;
}

html,body {
font: 12px Trebuchet MS, Arial;
margin: 40px;
background: #e9e4de;
}

h2 {
color:#FF9900;
text-align:left;
padding-left: 10px;
padding-top: 10px;
}

p {
color:#666666;
text-align:left;
padding-left: 10px;
padding-top: 10px;
}

#site {
margin: 0px auto;
background: #e9e4de;
width: 800px;
text-align: center;
}

#navigation {
width: 800px;
height: 50px;
background: url("images/menu.jpg") no-repeat;
}

#navigation li {
float: left;
list-style: none;
}

#navigation li a {
display: block;
width: 160px;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size:14px;
}

#navigation li a:hover{
color:#FF9900;
}

#content{
text-align: left;
min-height: 450px;
width: 800px;
border: 1px solid black;
border-color: #CCCCCC;
float: left;
background: #FFFFFF;
width: 500px;
margin-top: 5px;
margin-right: 5px;
}

#box {
width: 290px;
float: right;
min-height: 450px;
border: 1px solid black;
border-color: #CCCCCC;
border-style: solid;
background: #FFFFFF;
margin-top: 5px;
}

#footer {
width: 800px;
background: #666666;
height: 30px;
margin-top: 5px;
float: left;
}
 
Werbung:
Werbung:
Zurück
Oben