• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Blocks auf KOMPLETTE Seitenhöhe setzen

J

jump.blueberry

New member
Hallo,

ich habe eine Seite, die vorher mit Frameset gearbeitet hat umgebaut.
Die Navi steht links und der Content soll daneben erscheinen.
Soweit so gut, habe also die Navi (bzw. den block "navifloat") auf float:left gesetzt.
Jetzt ist rechts mal ein seeeeehr langer Text drin und obwohl alle Höhen auf 100% sind fließt der Text irgendwann unter der Navi weiter.

Hier ein neutralisierte, vereinfachte Version der Seite:
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=iso-8859-1" />
<title>Komplette Höhe ausnutzen?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)" />
<style type="text/css">
/* CSS Document */
body{
margin: 0px;
background-color: #D9ECF2;
font-family:  Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight:400
}

/*elemente der navi*/
#alles{
height:100%;
width:100%; 
top:0px; 
position:absolute; 
visibility:visible;
z-index:1;
border:3px solid #00ff00;
}
#alleszentriert{
position:relative;
width:780px; 
top:0px; 
height:100%;
border: 2px solid #0000ff;
}

#content{
text-align:left;
}
#navi{
margin-right:10px;
width: 140px;
text-align:left;
background-color:#99CCFF;
overflow:hidden;
}

#navifloat{
border:1px solid #ff0000;
float:left;
height:100%;
}
.bildlinks{
float:left;
text-align:center;
margin-right:10px;
font-size:9px;
font-style:italic;
}
.bildrechts{
float:right;
text-align:center;
margin-left:10px;
font-size:9px;
font-style:italic;
}
</style>
</head>
<body onload="navi()">
<div id="alles" align="center">
  <div id="alleszentriert"> Head
    <div id="navifloat">
      <div id="navi">
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
        <a href="#">Navipunkt</a>
        <br />
      </div>
    </div>
    <div id="content">
      <h1>Artikel</h1>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 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 et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
      <div class="bildlinks">
        <img src="spacer.gif" alt="" name="Spacer" width="300" height="100" id="Spacer" />
        <br />
        Bildunterschrift</div>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 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 et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      <div class="bildrechts">
        <img src="spacer.gif" alt="" name="Spacer" width="300" height="100" id="Spacer" />
        <br />
        Bildunterschrift</div>
      suscipit lobortis nisl ut aliquip 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 et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commod
      <div id="div">
        <div id="div2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 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 et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
          <div class="bildlinks">
            <img src="spacer.gif" alt="spacer" name="Spacer" width="300" height="100" id="Spacer" />
            <br />
            Bildunterschrift</div>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 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 et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          <div class="bildrechts">
            <img src="spacer.gif" alt="spacer" name="Spacer" width="300" height="100" id="Spacer" />
            <br />
            Bildunterschrift</div>
          suscipit lobortis nisl ut aliquip 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 et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commod </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben