• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit Gesamthöhe von Seite

Status
Für weitere Antworten geschlossen.
atrioom

atrioom

Neues Mitglied
hallo liebe leute!
ich bin nun schon eine zeit lang mit css und html beschäftigt, doch dieses problem treibt mir die krausbirnen auf die stirne:

ich habe genau drei höhenangaben für die gesamte seite:

Code: 
body{
height: 100%;
margin: 0px; 
padding:0px;
}

#wrapper {
height: inherit;
}

#content {
height: inherit;
margin-top: -60px;
margin-left: 230px;
margin-right: 50px;
padding: 15px;
background-image:url(../images/boxHG.jpg);
background-repeat:repeat-x;
background-color: #CCCCCC;
border: 1px solid black;
}

Bei extrem langem Content ist jedoch, wie das Bild im Anhang zeigt, die Box von <div id="content"></div> viel zu kurz!
Ich habe schon verschiedene Höhenangaben ausprobiert, es will sich einfach nie genau an den eigentlichen Inhalt anpassen. Der rote Rahmen, den man ebenfalls sieht ist die Outline vom Webdeveloper vom Firefox, der mir die gerade die Ausmaße des divs "content" anzeigt. Eigentlich müsste das ja bedeuten, dass das div zwar groß genug ist, sich jedoch nicht ganz mit Hintergrund füllt. Ich bin ein wenig ratlos, was diese Fehler verursacht...

Weiß jemand Rat, wie man das gescheit coden kann, bzw.: was da eigentlich vor sich geht?

Vielen Dank,
Alex

Anhang Bild:
http://www.vie.at/bilder/BOXFEHLER.png
 
Ich habe deinen Code mal ein wenig umgebaut.
Deine Methode, den Inhalt anzuzeigen, hat zB im IE gar bicht funktioniert,
So, wie ich es jetzt umgebaut habe, geht es aber konform und dein ursprüngliches Anliegen ist auch erfüllt.
Schau es dir einfach mal an...
(HTML Code kann so bleiben)


Code: 
html {
  height: 100%;
}

body{
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#wrapper {
  min-height: 100%;

  margin-left: 230px;
  margin-right: 50px;

  border: 1px solid #f00;
}

#content {
  height: 100%;
  
  padding: 15px;

  border: 1px solid black;
  background-image:url(../images/boxHG.jpg);
  background-repeat:repeat-x;
  background-color: #CCCCCC;
}
 
Zuletzt bearbeitet:
danke vorerst einmal für die antwort :)

der ie hat ein ganz eigenes stylesheet, ich hätte dazuschreiben müssen, dass es nur um die darstellung im firefox geht, sorry. Also der Firefox zickt.

Ich habe deinen Code eingefügt und es ausprobiert, aber seltsamerweise tut sich bei mir gar nix... Also der <div id="content"></div> - Container bleibt bei mir komisch abgeschnitten ohne ersichtlichen Grund...

Ich werde mir jedoch mal anschauen was self-html zu min-height und dem html-Bezeichner im CSS sagt. Vielleicht komm ich dann noch auf ein paar Ideen, wie ichs anders angehen könnte...

Danke jedenfalls trotzdem

cu Alex
 
der quellcode wird von typo3 erzeugt. das html-file ist hier:
http://www.vie.at/quellcode.rar

ich denke mir das ist der gemütlichste weg, dir das mit deinem eigenen html-editor anzusehen.


auf jeden fall super, dass dus dir ansiehst, bin gespannt, ob dir etwas auffällt!
 
Zuletzt bearbeitet:
Könntest du den Quellcode bitte noch hier posten, für alle, die
- rar-Dateien nicht entpacken können.
- keine Luste haben das jetzt zu machen.
Danke.
 
aber natürlich, mach ich sofort:

Code: 
<!DOCTYPE html
    PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


  <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e99aac0be0.css" />


  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


  <link rel="stylesheet" type="text/css" href="fileadmin/template/main/res/main.css">


  <!--[if IE]>
  <link rel="stylesheet" href="fileadmin/template/main/res/ie.css" type="text/css">
  <![endif]-->

  <title>Party</title>

  <meta name="generator" content="TYPO3 4.1 CMS" />

  <script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>

</head>

<body>

  <!-- ###DOCUMENT BODY### -->
  <div id="wrapper"><!--###wrapper### begin -->

  <div id="head"><!--###head### begin -->   <!--###head### end --></div>

  <div id="navigation"><!--###navigation### begin -->
    
      <ul id="nav"><li><div class="topnav"><a href="index.php?id=7" onfocus="blurLink(this);"  >Homepage</a></div></li><li><div class="topnav"><a href="index.php?id=6" onfocus="blurLink(this);"  >About</a></div></li><li><div class="topnav"><a href="index.php?id=5" onfocus="blurLink(this);"  >Pics</a></div></li><li><div class="subnav"><a href="index.php?id=10" onfocus="blurLink(this);"  >Party</a></div></li><li><div class="subnav"><a href="index.php?id=9" onfocus="blurLink(this);"  >Freunde</a></div></li><li><div class="subnav"><a href="index.php?id=8" onfocus="blurLink(this);"  >Urlaub</a></div></li><li><div class="topnav"><a href="index.php?id=4" onfocus="blurLink(this);"  >Kontakt</a></div></li><li><div class="topnav"><a href="index.php?id=3" onfocus="blurLink(this);"  >Portfolio</a></div></li><li><div class="topnav"><a href="index.php?id=16" onfocus="blurLink(this);"  >Privacy Policy</a></div></li><li><div class="topnav"><a href="index.php?id=15" onfocus="blurLink(this);"  >Login</a></div></li>
      </ul>

      <div id="navfoot"><!--###navfoot### begin --><!--###navfoot### end --></div>
        
      <!--###navigation### end -->
  </div>

  <div id="content">
        <!--  CONTENT ELEMENT, uid:2/textpic [begin] -->         <a id="c2"></a>
    <!--  Header: [begin] -->
    <div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">servas du oager</h1></div>
    <!--  Header: [end] -->
            
    <!--  Image block: [begin] -->
          <div class="csc-textpic csc-textpic-intext-right"><div class="csc-textpic-imagewrap"><dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:299px;"><dt><img src="uploads/pics/248_4827.JPG" width="299" height="383" border="0" alt="" /></dt></dl></div><div class="csc-textpic-text">
        <!--  Text: [begin] -->
        <p class="bodytext"><br />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. 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.
            </p>

            <p class="bodytext">&nbsp;</p>
            <p class="bodytext">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. 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.
            </p>
            <p class="bodytext">&nbsp;</p>
            <p class="bodytext">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. 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.
            </p>
            <p class="bodytext">&nbsp;</p>
            <p class="bodytext">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. 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.
            </p>
            <p class="bodytext">&nbsp;</p>
            <p class="bodytext">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. 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.</p>
        <!--  Text: [end] -->
      </div>
        </div>
    <!--  Image block: [end] -->
            
    <!--  CONTENT ELEMENT, uid:2/textpic [end] -->
  </div>



  <!--###wrapper### end -->
  </div>

</body>
</html>

ich war mir anfangs sicher, es handle sich um einen html/css fehler. vielleicht liegt es ja an typo3...
falls ja, dann tuts mir leid, dann gehört das thema nicht hierher.

bin parallel dazu in typo foren unterwegs, mal schauen was da rauskommt.
 
Zuletzt bearbeitet von einem Moderator:
problem hat sich nicht wirklich gelöst... self-html meint übrigens zum attribut "min-height" dass man keine prozentwerte angeben kann soweit ich das interpretieren konnte...
 
sorry, ist blödsinn :lol:

min-height verträgt doch prozentwerte. es ist jedoch so, dass nicht jeder browser mit min-height umgehen kann.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben