ZeroEnna
Erfahrenes Mitglied
Hallo zusammen
Ich habe ein Layout das wie folgt aufgebaut ist:
Das div Content enthält zwei weitere divs, nähmlich navigation und post_container.
Der post_container enthält noch einmal einzelne divs mit den Posts. In den Posts ist dann der schlussendliche Text.
Jetzt habe ich das Problem, dass sich weder der Hauptkontainer (content) den Höhen von navigation und post_container, noch die Posts der Höhe des Textes anpassen.
Ich habe hier im Forum schon zwei Ansätze gefunden (clearFix und Tutorial zu 100% Höhe) aber keiner hat funktioniert.
Könnt ihr euch das mal anschauen. Eventuell findet ja jemand von euch den Fehler:
Gruss
ZeroEnna
Ich habe ein Layout das wie folgt aufgebaut ist:
Das div Content enthält zwei weitere divs, nähmlich navigation und post_container.
Der post_container enthält noch einmal einzelne divs mit den Posts. In den Posts ist dann der schlussendliche Text.
Jetzt habe ich das Problem, dass sich weder der Hauptkontainer (content) den Höhen von navigation und post_container, noch die Posts der Höhe des Textes anpassen.
Ich habe hier im Forum schon zwei Ansätze gefunden (clearFix und Tutorial zu 100% Höhe) aber keiner hat funktioniert.
Könnt ihr euch das mal anschauen. Eventuell findet ja jemand von euch den Fehler:
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=UTF-8" />
<script type="text/javascript" src="fix.js"></script>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-image: url(images2/bg.gif);
background-attachment: fixed;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body, a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}
h1 {
margin: 0;
padding: 5px 0px 12px 0px;
font-size: 12pt;
}
#top {
background-image: url(images2/top_bg.gif);
background-repeat: repeat-x;
width: 100%;
height: 53px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#content {
display: block;
background-image: url(images2/content_bg.gif);
background-repeat: repeat-y;
width: 796px;
min-height: 100%;
height: 100%;
position: absolute;
left: 50%;
margin-left: -398px;
top: 0;
z-index: 2;
}
#navigation {
display: block;
background-image: url(images2/head_navi.gif);
background-position: top;
background-repeat: no-repeat;
width: 207px;
height: 100%;
min-height: 100%;
float: left;
}
#post_container {
display: block;
background-image: url(images2/head_content.gif);
background-position: top;
background-repeat: no-repeat;
width: 589px;
height: 100%;
min-height: 100%;
float: left;
}
#breadcrumbs {
color: #FFFFFF;
font-size: 8pt;
margin-top: 88px;
margin-bottom: 20px;
margin-left: 20px;
}
#breadcrums a {
color: #FFFFFF;
font-size: 8pt;
text-decoration: none;
}
#post_container .post {
display: block;
width: 532px;
clear: both;
float: none;
margin-left: 20px;
margin-bottom: 5px;
}
#post_container .post .top {
width: 532px;
height: 16px;
background-image: url(images2/post_top.gif);
background-repeat: no-repeat;
}
#post_container .post .bottom {
width: 532px;
height: 19px;
background-image: url(images2/post_bottom.gif);
background-repeat: no-repeat;
}
#post_container .post .content {
width: 532px;
height: 16px;
background-image: url(images2/post_bg.gif);
background-repeat: repeat-y;
min-height: 200px;
}
#post_container .post .content .inner {
width: 489px;
margin-left: 21px;
padding-top: 3px;
}
#bottom {
background-image: url(images2/bottom_bg.gif);
background-repeat: repeat-x;
width: 100%;
height: 53px;
position: fixed;
top: 100%;
margin-top: -45px;
left: 0;
z-index: 3;
}
#powered {
color: #FFFFFF;
font-size: 8pt;
position: absolute;
left: 15px;
top: 23px;
}
#powered a {
color: #FFFFFF;
font-size: 8pt;
}
#copyright {
color: #FFFFFF;
font-size: 8pt;
width: 150px;
position: absolute;
left: 100%;
margin-left: -115px;
top: 23px;
overflow: hidden;
}
#bottom_middle {
background-image: url(images2/bottom_middle.gif);
background-repeat: no-repeat;
width: 796px;
height: 45px;
position: absolute;
left: 50%;
margin-left: -398px;
top: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="top"></div>
<div id="content" class="clearfix">
<div id="navigation"></div>
<div id="post_container">
<div id="breadcrumbs">Home</div>
<div class="post">
<div class="top"></div>
<div class="content">
<div class="inner">
<h1>Lorem ipsum Interdam esse deleatuer</h1>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.<br /><br />
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
</div>
</div>
<div class="bottom"></div>
</div>
<div class="post">
<div class="top"></div>
<div class="content">
<div class="inner">
<h1>Lorem ipsum Interdam esse deleatuer</h1>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
</div>
</div>
<div class="bottom"></div>
</div>
<div class="post">
<div class="top"></div>
<div class="content">
<div class="inner">
<h1>Lorem ipsum Interdam esse deleatuer</h1>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
</div>
</div>
<div class="bottom"></div>
</div>
<div class="post">
<div class="top"></div>
<div class="content">
<div class="inner">
<h1>Lorem ipsum Interdam esse deleatuer</h1>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqui ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum lor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</div>
<div id="bottom">
<div id="bottom_middle"></div>
<div id="powered">Powered by <a href="http://www.wordpress.org">Wordpress</a></div>
<div id="copyright">© 2007 xy</div>
</div>
</body>
</html>
ZeroEnna