Hallo Klammer,
ich habe ein Problem mit dem folgenden HTML, CSS Code.
Wie im Title schon beschrieben setzt sich der Footer nicht Dynamisch unter den Content, sondern setzt sich über den Content. Ich habe in der CSS nun alles versuch und komme nicht weiter.
Über eine Antwort zur Problemlösung würde ich mich sehr freuen.
Gruß Tomson
HTML
CSS
ich habe ein Problem mit dem folgenden HTML, CSS Code.
Wie im Title schon beschrieben setzt sich der Footer nicht Dynamisch unter den Content, sondern setzt sich über den Content. Ich habe in der CSS nun alles versuch und komme nicht weiter.
Über eine Antwort zur Problemlösung würde ich mich sehr freuen.
Gruß Tomson
HTML
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="layout_css.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#9D9D9D;">
<div id="container">
<div id="top">
<div id="header_"><img id="header" src="images/header.jpg" width="984" height="99" alt="" /></div>
<div id="button-links_"><img id="button_links" src="images/button_links.jpg" width="125" height="40" alt="" /></div>
<div id="button-startseite_"><img id="button_startseite" src="images/button_startseite.jpg" width="100" height="40" border="0" alt="" /></div>
<div id="button-team_"><img id="button_team" src="images/button_team.jpg" width="100" height="40" border="0" alt="" /></div>
<div id="button-leistungen_"><img id="button_leistungen" src="images/button_leistungen.jpg" width="100" height="40" border="0" alt="" /></div>
<div id="button-ihr-vorteil_"><img id="button_ihr_vorteil" src="images/button_ihr_vorteil.jpg" width="100" height="40" border="0" alt="" /></div>
<div id="button-kontakt_"><img id="button_kontakt" src="images/button_kontakt.jpg" width="100" height="40" border="0" alt="" /></div>
<div id="button-impressum_"><img id="button_impressum" src="images/button_impressum.jpg" width="100" height="40" border="0" alt="" /></div>
<div id="button-rechts_"><img id="button_rechts" src="images/button_rechts.jpg" width="259" height="40" alt="" /></div>
<div id="tops_"><img id="tops" src="images/top.jpg" width="984" height="15" alt="" /></div>
</div>
<div id="inside">
<div id="content-links_"></div>
<div id="content_">khjkhjkhjk ffgh f<br />g hfgh fh f<br /> hfghfgh fgh fgh fgh<br />dfgdfg o sdfkjdlsfklsd flkjsdfl gf hhdh</div>
<div id="content-rechts_"></div>
</div>
<div id="footer_"><img id="footer" src="images/footer.jpg" width="984" height="48" alt="" /></div>
</div>
</body>
</html>CSS
PHP:
html, body {
background: url(images/bg.jpg) repeat top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
margin:0;
}
h1, h2, h3 {
font-weight: normal;
}
h1 {
margin: 0px 10px 0px 10px;
letter-spacing: -1px;
font-size: 28px;
color: #003399;
}
h2 {
margin: 0px 10px 0px 10px;
font-size: 23px;
color: #003399;
}
h3 {
margin: 0px 10px 0px 10px;
font-size: 12px;
}
p, ul, ol {
margin: 0px 5px 0px 5px;
line-height: 26px;
font-size: 12px;
list-style-position:inside;
text-align: inherit;
}
li {
padding: 0 5px 0 5px;
list-style: inside disc;
color:#003399;
font-size: 11px;
}
a:link {
color: #003399;
text-decoration: none;
}
a:hover, a:active {
text-decoration: none;
color: #003399;
}
a:visited {
color: #ce6300;
text-decoration: none;
}
#container {
position: relative;
width:984px;
top:0px;
margin:auto;
}
#top {
position: relative;
width: 984px;
top:0px;
height: 154px;
}
#header_ {
position:absolute;
left:0px;
top:0px;
width:984px;
height:99px;
}
#button-links_ {
position:absolute;
left:0px;
top:99px;
width:125px;
height:40px;
}
#button-startseite_ {
position:absolute;
left:125px;
top:99px;
width:100px;
height:40px;
}
#button-team_ {
position:absolute;
left:225px;
top:99px;
width:100px;
height:40px;
}
#button-leistungen_ {
position:absolute;
left:325px;
top:99px;
width:100px;
height:40px;
}
#button-ihr-vorteil_ {
position:absolute;
left:425px;
top:99px;
width:100px;
height:40px;
}
#button-kontakt_ {
position:absolute;
left:525px;
top:99px;
width:100px;
height:40px;
}
#button-impressum_ {
position:absolute;
left:625px;
top:99px;
width:100px;
height:40px;
}
#button-rechts_ {
position:absolute;
left:725px;
top:99px;
width:259px;
height:40px;
}
#tops_ {
position:absolute;
left:0px;
top:139px;
width:984px;
height:15px;
}
#inside {
width: 984px;
top: auto;
}
#content-links_ {
position: absolute;
left:0px;
top:154px;
width:48px;
background: url(images/content_links.jpg) repeat top;
}
#content_ {
position: absolute;
left:48px;
top:154px;
width:893px;
background: url(images/content.jpg) repeat top;
}
#content-rechts_ {
position: absolute;
left:941px;
top:154px;
width:43px;
background: url(images/content_rechts.jpg) repeat top;
}
#footer_ {
position: absolute;
height: 47px;
width: 969px;
top:auto;
}