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

Probleme mit height: 100% in Verbindung mit position: relative;

L

lakich2001

Neues Mitglied
Hallo,
ich versuche gerade eine Homepage ohne tables zu machen. Dabei habe ich das Problem, dass bei height: 100% und position: relative die Homepage nicht richtig angezeigt wird. bei einer hohen Auflösung geht es noch, da dann der gesamte Content auf den Bildschirm passt. Bei einer Auflösung von 800x600 sieht das dann schon ganz anders aus. Dann wird der "container" nicht weit genug nach unten gezogen.

Hier meine Codes:

Index Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SGFreaks</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="menu.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="menu.js"></script>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
         var sfEls = document.getElementById("nav").getElementsByTagName("LI");
         for (var i=0; i<sfEls.length; i++) {
                  sfEls[i].onmouseover=function() {
                           this.className+=" sfhover";
                  }
                  sfEls[i].onmouseout=function() {
                           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                  }
         }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>
<div id="loginbar"><form action="login.php" method="post" style="display: inline">
        <div align="center">Name: <input type="text" name="name" size="14"> Kennwort: <input type="password" name="pwd" size="10"> <input type="submit" value="Login"> Eingeloggt bleiben: <input type="checkbox" name="eingeloggt"><a href="index.php?site=reg">Registrieren</a></div>
</form></div>
<div id="container">
         <div id="header"></div>
         <div id="randlinks"></div>
         <div id="randrechts"></div>

         <div id="content"><div class="news">
         <p><img src="gfx/top_news.jpg" width="104" height="30" border="0" alt="old_news.jpg"></p>
</div>
<div class="news_pic" style="top: 100px;">
         <img src="news/meizu_triple_big.png" width="150" height="150" border="0" alt="old_news.jpg">
</div>
<div class="news_head" style="top: 100px;">
         <div><b>Hallo das ist der Header!</b></div>
</div>
<div class="news_content" style="top: 120px;">
         <div>Und das hier ist der content der echt super ist da ich sehr vie schreiben muss um alles zu überprüfen</div>
</div>
<div class="news_weiter" style="top: 230px;">
         <div><a href="#weiter">Weiterlesen!</a></div>
</div>

<div class="news_pic" style="top: 300px;">
         <img src="news/meizu_triple_big.png" width="150" height="150" border="0" alt="old_news.jpg">
</div>
<div class="news_head" style="top: 300px;">
         <div><b>Hallo das ist der Header2!</b></div>
</div>
<div class="news_content" style="top: 320px;">
         <div>2Und das hier ist der content der echt super ist da ich sehr vie schreiben muss um alles zu überprüfen</div>
</div>
<div class="news_weiter" style="top: 430px;">
         <div><a href="#weiter">Weiterlesen!</a></div>
</div>

<div class="old_news">
         <p><img src="gfx/old_news.jpg" width="113" height="30" border="0" alt="old_news.jpg"></p>
</div>
</div>
         <div id="strich_oben"></div>
         <div id="strich_mitte"></div>
         <div id="menu_rechts">
                  <p><img src="gfx/quicklinks.jpg" width="120" height="30" border="0" alt="quicklinks.jpg"></p>
                  <p><img src="gfx/server_status.jpg" width="158" height="30" border="0" alt="server_status.jpg"></p>
                  <p><img src="gfx/news_suche.jpg" width="142" height="30" border="0" alt="news_suche.jpg"></p>
                  <p><img src="gfx/partner.jpg" width="86" height="30" border="0" alt="partner.jpg"></p>
         </div>
         <div id="menu">
                  <ul id="nav">
                           <li><a href="#"><img src="gfx/space.png" width="88" height="20" border="0" alt="space.png"></a>
                                    <ul>
                                             <li class="navi_t"><a href="index.php" class="keinlink">Home</a></li>
                                             <li class="navi_m"><a href="#" class="keinlink">Events</a></li>
                                             <li class="navi_m"><a href="#" class="keinlink">Patchs</a></li>
                                             <li class="navi_m"><a href="index.php?site=items" class="keinlink">Items</a></li>
                                             <li class="navi_m"><a href="index.php?site=wasistsg" class="keinlink">Was ist StreetGears</a></li>
                                             <li class="navi_m"><a href="index.php?site=vollversion" class="keinlink">Vollversion</a></li>
                                             <li class="navi_m"><a href="index.php?site=emotes" class="keinlink">Emotes</a></li>
                                             <li class="navi_m"><a href="index.php?site=faq" class="keinlink">Häufig gestellte Fragen</a></li>
                                             <li class="navi_m"><a href="index.php?site=gewinnspiel" class="keinlink">Gewinnspiel (Beendet)</a></li>
                                             <li class="navi_m"><a href="index.php?site=chronik" class="keinlink">SGFreaks.de Chronik</a></li>
                                             <li class="navi_d"><a href="index.php?site=sgfreaksdetv" class="keinlink">SGFreaks.de TV</a></li>
                                    </ul>
                           </li>
                           <li><a href="#"><img src="gfx/space.png" width="88" height="20" border="0" alt="space.png"></a>
                                    <ul>
                                             <li class="navi_t"><a href="#" class="keinlink">Download1</a></li>
                                             <li class="navi_m"><a href="#" class="keinlink">Download2</a></li>
                                             <li class="navi_m"><a href="#" class="keinlink">Download3</a></li>
                                             <li class="navi_m"><a href="#" class="keinlink">Download4</a></li>
                                             <li class="navi_d"><a href="#" class="keinlink">Download5</a></li>
                                    </ul>
                           </li>
                  </ul>
                  <img src="gfx/space.png" width="88" height="20" border="0" alt="space.png">
         </div>


</div>

</body>
</html>
Hier der Code der style.css (da liegt glaub ich der hund begraben):

Code: 
body {
  background: url('./gfx/bg.png');
  text-align: center;
  margin:0;
}

#loginbar {
  position: relative;
  width: 100%;
  text-align: left;
  background-color: #006cff;
}


#container {
  position: relative;
  margin: 0px auto;
  width: 913px;
  min-height: 100% !important;
  height: auto ;
  height: 100% ;
  text-align: left;
  background-color: #ffffff;
}

#header {
  position: absolute;
  height: 86px;
  left: 6px;
  right: 6px;
  width: 901px;
  background: url('./gfx/header_oben.jpg');
  background-color: #000000;
}

#randrechts {
  position: absolute;
  right: 0px;
  width: 6px;
  bottom: 0px;
  top: 0px;
  background: url('./gfx/rand.png');
}

#randlinks {
  position: absolute;
  left: 0px;
  width: 6px;
  bottom: 0px;
  top: 0px;
  background: url('./gfx/rand_links.png') repeat-y;
}

#menu  {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 86px;
  height: 46px;
  text-align: left;
  width: 901px;
  background: url('./gfx/menu.jpg');
}

#content  {
  position: absolute;
  left: 6px;
  right: 250px;
  top: 132px;
  bottom: 0px;
  text-align: left; 
  background-color: #ffffff;
}

#strich_oben  {
  position: absolute;
  left: 663px;
  width: 8px;
  top: 132px;
  height: 4px;
  text-align: left; 
  background: url('./gfx/mitte_oben.jpg');
}

#strich_mitte  {
  position: absolute;
  left: 663px;
  width: 8px;
  top: 136px;
  bottom: 0px;
  text-align: left; 
  background: url('./gfx/mitte_mitte.jpg');
}

#menu_rechts  {
  position: absolute;
  left: 671px;
  right: 6px;
  top: 132px;
  bottom: 0px;
  text-align: right; 
  background-color: #ffffff;
}

.news  {
  position: absolute;
  left: 7px;
  right: 200px;
  top: 0px;
  bottom: 0px;
  text-align: left; 
  width: 104;
  background-color: #ffffff;
}

.old_news  {
  position: absolute;
  left: 457px;
  right: 0px;
  top: 200px;
  height: 300px;
  text-align: left; 
  background-color: #ffffff;
}

.news_pic  {
  position: absolute;
  left: 7px;
  right: 500px;
  text-align: left; 
  background-color: #000000;
  height: 150px;
  top: 100px;
}

.news_head  {
 position: absolute;
  left: 172px;
  right: 300px;
  text-align: left; 
  background-color: #ffffff;
  height: 20px;
  top: 100px;
}

.news_content {
  position: absolute;
  left: 172px;
  right: 220px;
  text-align: left; 
  background-color: #ffffff;
  height: 100px;
  top: 100px;
}

.news_weiter {
  position: absolute;
  left: 172px;
  right: 220px;
  text-align: left; 
  background-color: #ffffff;
  height: 30px;
  top: 100px;
}
und der code der menu.css ist glaub ich net so wichtig und passt auch net mehr rein^^

hier könnt hier euch das ganze angucken: SGFreaks

Danke schonmal :)

ps: hab mir schon einige sachen durchgelesen hat aber nichts genützt...
 
Mit position relative hat das nichts zu tun. Das solltest du generell weglassen, ebenso wie absolute und dafür besser mit float- und margin-Angaben arbeiten.

Die 100% benötigen eine Bezugsgröße: 100 % von was?

Gib deshalb html und body mal ebenfalls height und width-Werte von 100%.
Beachte jedoch, dass margins und paddings dann zusätzlich zu den 100% hinzuzurechnen sind.
 
Danke für die Antworten :)
Ich habe mal versucht das mit margin zu machen, habe aber ein paar Probleme damit.
Die beiden Ränder werden nicht angezeigt. (nur wenn ich eine Höhe einstelle werden die angezeigt)

Und die Loginbar wird bei kleinen Fenstern nicht weit genug nach rechts gezogen.

http://img55.imageshack.us/img55/6594/pageb.jpg

Die Index:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SGFreaks</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div id="loginbar"><?include("intern.php");?></div>
<div id="container">
         <div id="randlinks"></div>
         <div id="randrechts"></div>
         <div id="header"></div>
         <div id="content"></div>
         <div id="menu"></div>
</div>

</body>
</html>
Die Sytle.css:

Code: 
html {
  margin:0px;
  padding: 0px;

}

body {
  background: url('./gfx/bg.png');
  text-align: center;
  margin:0px;
  padding: 0px;

}

#loginbar {
  margin:auto 0px;
  text-align: left;
  background-color: #006cff;
}

#container {
  margin: 0px auto 0px;
  width: 913px;
  text-align: left;
  background-color: #ffffff;
}

#header {
  margin: 0px 6px auto;
  height: 86px;
  width: 901px;
  background: url('./gfx/header_oben.jpg');
  background-color: #000000;
}

#menu  {
  text-align: left;
  margin: 0px 6px auto;
  height: 46px;
  width: 901px;
  background: url('./gfx/menu.jpg');
}

#randrechts {
  float: right;
  margin: 0px;
  width: 6px;
  background: url('./gfx/rand.png') repeat-y;;
}

#randlinks {
  margin: 0px;
  width: 6px; 
  float: left;
  background: url('./gfx/rand_links.png') repeat-y;
}
Wie man sieht kenne ich mich noch net so wirklich aus mit css also bitte nicht habt Nachsicht ;)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben