Hallo,
ich wollte jetzt mal ein CSS Design erstellen, wo der Inhalt schön von der Aufbereitung/Präsentation getrennt ist, wie in "Webdesign mit Webstandards" beschrieben. Nur leider ibt es schon gleich am anfang Probleme. Hier der HTML-Code
Und hier das CSS:
Und dwenn ich das " " nach dem <div id="container">Webnehmen, dann verrutscht das Hintergrundbild "containerbg.gif". Kann mir jemand helfen?
ich wollte jetzt mal ein CSS Design erstellen, wo der Inhalt schön von der Aufbereitung/Präsentation getrennt ist, wie in "Webdesign mit Webstandards" beschrieben. Nur leider ibt es schon gleich am anfang Probleme. Hier der HTML-Code
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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Heiko Q.</title>
<style type="text/css">
<!--
@import url("c/style.css");
-->
</style>
</head>
<body>
<div id="container">
<div id="head">
<h1><span>Heiko Q.</span></h1>
<h2><span>Untertitel</span></h2>
</div>
<div id="body">
<div id="navi">
<ul>
<li><a href="#">Link numero 1</a></li>
<li><a href="#">Link numero 2</a></li>
</ul>
</div>
<div id="content">
<h1>Home</h1>
<p>Duis autem vel eum</p>
</div>
</div>
</div>
</body>
</html>
HTML:
/* generelles */
body {
font-family:"Lucia Grande",Verdana,Arial,sans-serif;
font-size:12px;
margin: 0;
padding: 0;
background: #ff9646 url('../im/bodyrowbg.gif') repeat-x left top;
}
img {
display: block;
}
.inline {
display: inline;
}
#head h1,
#head h2 {
display: none;
}
#container {
width: 748px;
height:670px;
background: url('../im/containerbg.gif') left top no-repeat;
}
#body {
margin-top:180px;
margin-left:120px;
width:570px;
}
#content {
display:inline;
float:right;
width:405px;
}
/*Navigation*/
#navi {
width: 165px;
margin-top:20px;
float:left;
height:330px;
background: url('../im/navibg.gif') no-repeat right top;
}
#navi ul {
margin:0;
padding:70px 0 0 0px;
}
#navi li {
list-style:none;
background: url('../im/note.gif') bottom left no-repeat;
height:20px;
padding-top:3px;
}
#navi li:hover {
background: url('../im/note.gif') top left no-repeat;
}
#navi a{
text-decoration:none;
color:#000;
font-weight:none;
font-family:Arial;
font-size:1.3em;
padding-left:25px;
}
#navi a:hover{
font-weight:bold;
}
