M
ms101295
Hallo ich kämpfe jetzt schon seit Tagen, aber ich finde einfach keine Lösung. Habe im Netz schon viel gelesen über die clear Funktion aber egal wo ich sie einsetze.. immer das gleiche.. er Wächst einfach nicht mit...
hier mein Code
default.htm
stlye.css
hier mein Code
default.htm
Code:
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" title="CSS" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="head">
</div>
<div id="navhead">
<ul>
<li><a href="default.htm">Home</a></li>
<li><a href="leistung/leistung.htm">Leistung</a></li>
<li><a href="service/service.htm">Service</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="main">
<div id="leftcol">
h<br />
h<br />
h<br />
h<br />
h<br />
h<br />
h<br />
h<br />
h<br />
h<br />
<br />
h</div>
<div id="rightcol">
</div>
</div>
<div id="footer">
</div>
<div id="bottom">
© 2007 Firma 123 | Letzte Aktualisierung am 06.02.2008 </div>
</div>
</body>
</html>stlye.css
Code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
body, div, h1, h2, h3, h4, p, a {
margin:0;
padding:0;
border:none;
}
body {
background-color: #f1f1ef;
font-family: 'Lucida Sans', 'Trebuchet MS', Helvetica, Arial, Sans-Serif;
font-size: 85%;
color: #666;
}
/* Typography */
h1 {
font-size:1.8em;
font-weight:bold;
margin:0.8em 0;
color:#000000;
font-variant:small-caps;
}
h2 {
font-size:1.5em;
font-weight:bold;
margin:0.8em 0;
color:#000000;
font-variant: small-caps;
}
h3 {
font-size:1.2em;
font-weight:bold;
margin:0.8em 0;
color: #000000;
font-variant:small-caps;
}
p {
line-height:1.6em;
margin:0.8em 0 1.5em 0;
}
a {
color:#FFF;
}
a:hover {
color:#FFF;
background-color:#FFCC22;
text-decoration:none;
}
/* Layout */
#wrapper {
background-color:#ffffff;
width: 850px;
margin: 20px auto;
clear: both;
}
#head {
width: 850px;
height: 169px;
background-image: url('images/header4.jpg');
left: 0px;
top: 0px;
}
#navhead {
background-image: url('images/headerbottom.jpg');
width: 850px;
height: 25px;
left: 0px;
top: 0px;
text-align: right;
}
html>body #navhead {
overflow: hidden;
}
#leftcol {
background-color: #FFFFFF;
width: 100px;
height: 100px;
float: left;
border-width: 1px;
border-style: solid;
}
#rightcol {
width: 550px;
height: 100px;
float: right;
border-width: 1px;
border-style: solid;
}
#main {
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
width: 830px;
height: 100px;
float: left;
}
#footer {
clear: both;
width: 850px;
height: 40px;
float: left;
background-image: url('images/footer.jpg');
clear: both;
}
#bottom {
width: 850px;
height: 20px;
float: left;
background-color: #f1f1ef;
font-size: xx-small;
text-align: right;
}
/* Formatvorlagen für die Navigation */
#navhead ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navhead li {
float: right;
}
#navhead a {
color: #fff;
text-decoration: none;
margin: 0 1px;
padding: 5px;
display: block;
border: 1px solid #ffffff;
}
#navhead a:hover {
border: 1px solid #b4b4b4;
background-color: #b4b4b4;
}
