✔ Seite unten abgeschnitten

Status
Nicht offen für weitere Antworten.
M

ms92

Mitglied
Hier der HTML-Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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/screen.css");
        -->
        </style>
    </head>
    <body>
        <div id="container">
            <div id="head">
                <h1><span>Heiko Q.</span></h1>
                <h2><span>Trompeten und Mehr</span></h2>
            </div>
            <div id="body">
                <div id="navi">
                    <ul>
                        <li class="bordertop"><a href="#">Link numero 1</a></li>
                        <li><a href="#">Link numero 2</a></li>
                        <li><a href="#">Link numero 3</a></li>
                        <li><a href="#">Link numero 4</a></li>
                        <li><a href="#">Link numero 4</a></li>
                        <li><a href="#">Link numero 4</a></li>
                    </ul>
                </div>
                <div id="content">
                    <h1>Home</h1>
                    <p>Lorem Ipsum...</p> 
                </div>
            </div>
        </div>
    </body>
</html>
Hier CSS:
HTML: 
/* generelles */
.nobo{
border:0;
}
body {
font-family:"Lucia Grande",Verdana,Arial,sans-serif;
font-size:12px;
color:#000;
margin: 0;
padding: 0;
background: #ff9646 url('../img/bodyrowbg.gif') repeat-x left top;
}
img {
display: block;
}
.inline {
display: inline;
}
a {
color:#000;
}
#head h1,
#head h2 {
display: none;
}

#container {
width: 748px;
height:670px;
background: url('../img/containerbg.gif') left top no-repeat;
}
#body {
position:relative;
top:180px;
margin-left:120px;
width:570px;
}
/*Inhalt*/
#content {
display:inline;
float:right;
width:405px;
}
#content h1{
font-size:1.7em;
}

/*Navigation*/
#navi {
width: 165px;
margin-top:30px;
height:100%;
float:left;
background: url('../img/navibg.gif') no-repeat right top;
}
#navi ul {
margin:0;
padding:40px 0 70px 0;
}
#navi li {
list-style:none;
height:3em;
width:140px;
line-height:3em;
border-bottom:1px solid #ff7a27;
}
#navi li.bordertop {
border-top:1px solid #ff7a27;
}
#navi a{
background: url('../img/note.gif') bottom left no-repeat;
text-decoration:none;
font-weight:normal;
color:#fff;
padding:3px 0 3px 25px;
font-family:Arial;
font-size:1.3em;
padding-left:25px;
}
#navi a:hover{
font-weight:bold;
background: url('../img/note.gif') top left no-repeat;
}
Wenn ich jetzt den Text länder mache im "content", dann kann man zwar weiter runterscrollen aber der letzte <p>-Container ist dann ca. zur Hälfte weg. Auch wenn ich den TExt noch länger mache. Man kann immer weiter scrollen (je länder der TExt ist); der letzte ist aber zur Hälfte weg! Wie geht das? Hier mal ein screenshot:
 

Anhänge

  • Bild 2.jpg
    Bild 2.jpg
    8,5 KB · Aufrufe: 41
Hi,

bei mir wird die Seite zwar unten nicht abgeschnitten, wenn ich den Inhalt im DIV #content erweitere, aber es könnte an der Höhenangabe height:670px für das DIV #container liegen, oder an der Positionierung des DIVs #body zum oberen Elementrand, oder daran, dass die Floatumgebung nicht zum Abschluß "gecleart", und somit wieder der normale Textfluss im Dokument hergestellt wird.

Vielleicht ist es aber auch das Ergebnis der Kombination aller drei Möglichkeiten.
 
okay, danke. Jetzt funktioniert es: Ich habe das hier:
HTML: 
#body {
position:relative;
top:180px;
margin-left:120px;
width:570px; }
zu dem geändert:
HTML: 
#body {
position:absolute;<-- Das hier!
top:180px;
margin-left:120px;
width:570px; }
Warum hab ich zwar nicht verstanden, aber es funktioniert zu mindest :)
 
Okay, ich hab gerade mal etwas getestet, und das hier funktioniert ebenso:

Code: 
#container {
width: 748px;
min-height: 670px; /* Mindesthöhe für moderne Browser */
height: auto !important; /* !important-Regel für moderne Browser */
height:670px; /* Mindesthöhe für IE (<7) */
background: url('../img/containerbg.gif') left top no-repeat;
position: absolute;
top: 0;
}
#body {
margin-top:180px;
margin-left:120px;
width:570px;
}
Es liegt bzw. lag somit an der Positionierung des DIVs #body.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück