Div Höhe passt sich nicht an @ tutorials.de: Tutorials, Forum & Hilfe

ZeroEnna · 06.09.07 14:51

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:

HTML-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">
<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">&copy; 2007 xy</div>
    </div>
</body>
</html>

Gruss
ZeroEnna

Maik · 06.09.07 14:58

Hi,

wenn ich das richtig überblicke, hast du folgendes vergessen, damit die modernen Browser die nachfolgende height-Deklaration übergehen, die für den IE bestimmt ist:

Code :

#content {
  display: block;
  background: url(images2/content_bg.gif);
  background-repeat: repeat-y;
  width: 796px;
  min-height: 100%;
  [b]height:auto !important;[/b]
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -398px;
  top: 0;
  z-index: 2;
}

ZeroEnna · 06.09.07 15:05

Hi

Funktioniert leider nicht. Mit der eingefügten Zeile bricht das Layout völlig zusammen.

Gruss
ZeroEnna

Maik · 06.09.07 15:07

Die Zeile wird aber für die modernen Browser benötigt, und bei mir fällt da auch nichts zusammen.

Maik · 06.09.07 15:21

Ansonsten versuch es mal hiermit:

Code :

#content {
  display: block;
  background: url(images2/content_bg.gif);
  background-repeat: repeat-y;
  width: 796px;
  min-height: 100%;
  height:auto !important;
  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;
  [b]min-height: 100%;
  height:auto !important;
  height: 100%;[/b]
  float: left;
}
 
#post_container {
  display: block;
  background-image: url(images2/head_content.gif);
  background-position: top;
  background-repeat: no-repeat;
  width: 589px;
  [b]min-height: 100%;
  height:auto !important;
  height: 100%;
  float: right;[/b]
}

ZeroEnna · 06.09.07 15:26

Hi

Hab den Fehler gefunden. Nachdem ich etwas in die Navigationsspalte eingefügt habe, funktioniert das Layout einwandfrei. Nur wenn die Navigationsspalte leer ist, funktioniert das Layout nicht. Aber damit kann ich leben.

Vielen Dank für deine Hilfe.

Gruss
ZeroEnna

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Wrapper Klasse passt die Höhe nicht an?

DIV passt sich nicht an

InternetExplorer (6.0) passt Höhe der Tabelle nicht an

Div passt sich nicht automatisch der höhe an.

div element passt sich nicht an

E-Mail:

Abonnieren Abbestellen