Inita: versuch wieder mein Problem zu beschreiben ;)

SELF-Forum

versuch wieder mein Problem zu beschreiben ;)

Inita
– Informationen zu den Bewertungsregeln

Hallo,
also, wenn ihr jetzt meine Seite in IE anschaut, es funktioniert (auch wenn das content laenger als screen ist und auch wenn contont nur ein satz zB ist). Aber in Firefox, down menu funktioniert jezt nicht. Also, ihr koennt versuchen/probieren, mit langem content und kurzem content (einfach 'content big' weg nehmen, um zu sehen, wie es aussieht, wenn content kurz ist). Also, ich moechte downmenu in Frefox, Opera ect. so haben, wie IE es zeigt.

In English waer:
'The menu to just stay at the bottom of the page no matter how much content there is unless it goes to the next page'

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Help Inita</title>
<style type="text/css">
body, html {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;color:#FFF;
background-color:#333;
padding:0;
margin:0;
height: 100%;
}
#page {
width:740px;
background-color:#000;
margin: 0 auto;
padding:0;
height: 100%;}
.imenu {
font-size: 12px;
text-align:center;
width:720px;
background-color:#000000;
margin:0px;  padding:10px;
}
.imenu a {color:#FFF}
.imenu a:hover {
color:#FFC}
.center {
text-align:center}
</style>
</head>
<body>
<div id="page">
<table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr class="center" style="height:25px">
<td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td>
<td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td>
<td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td>      <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td>
</tr>
</table>

<div style="height:90%">content
<br />
<p style="padding:500px 0">content big</p><br />
funktioniert dies nicht in Firefox, auch nicht in Opera <br />
</div>

<div class="imenu">   [ <a href="#">My Name</a> ]   [ <a href="#">Autos</a> ]   [ <a href="#">Bears</a> ]   [ <a href="#">See Tree</a> ]   [ <a href="#">Contact Us</a> ]   [ <a href="#">Site Map</a> ]
</div>
</div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. versuch wieder mein Problem zu beschreiben ;)

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hello,

    'The menu to just stay at the bottom of the page no matter how much content there is unless it goes to the next page'

    Thanks

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Help Inita</title>
    <style type="text/css">
    body, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;color:#FFF;
    background-color:#333;
    padding:0;
    margin:0;
    height: 100%;
    }
    #page {
    width:740px;
    background-color:#000;
    margin: 0 auto;
    padding:0;
    height: 100%;
    }

    Unfortunately the IE takes heigth property like min-height property. For other browsers height:100% is always 100% of the containing block even if the content is higher. You have to use min-height for other browsers and a hack for the IE. I will use the "star html hack".

    The desired position for DIV.imenu will have to be reached only with absolute positioning. Therefore I set #page here on position:relative, in order to be able to position DIV.imenu later absolutely in it.

    My changes (your css in comments):

    #page {
    width:740px;
    background-color:#000;
    margin: 0 auto;
    padding:0;
    min-height: 100%;
    position: relative;
    }
    * html #page {
    height: 100%;
    }

    .imenu {
    font-size: 12px;
    text-align:center;
    width:720px;
    background-color:#000000;
    margin:0px;  padding:10px;

    position: absolute;
    bottom: 0;

    }
    .imenu a {color:#FFF}
    .imenu a:hover {
    color:#FFC}
    .center {
    text-align:center}
    </style>
    </head>
    <body>
    <div id="page">
    <table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%">
    <tr class="center" style="height:25px">
    <td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td>
    <td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td>
    <td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td>      <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td>
    </tr>
    </table>

    <div style="height:90%">content

    We let the height of the DIV undefined and only set padding-bottom to get room for the down menu.
    <div style="padding-bottom:40px;">content

    <br />
    <p style="padding:500px 0">content big</p><br />
    funktioniert dies nicht in Firefox, auch nicht in Opera <br />
    </div>

    <div class="imenu">   [ <a href="#">My Name</a> ]   [ <a href="#">Autos</a> ]   [ <a href="#">Bears</a> ]   [ <a href="#">See Tree</a> ]   [ <a href="#">Contact Us</a> ]   [ <a href="#">Site Map</a> ]
    </div>
    </div>
    </body>
    </html>

    greetings

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. versuch wieder mein Problem zu beschreiben ;)

      Inita
      – Informationen zu den Bewertungsregeln

      Vielen Lieben Dank an ALLE !!!

      Antwort auf meiner Frage :)

      Habs erfunden, was ich genau wollte ;) jetzt geht mein downmenu ueberall =)))

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html>
      <head>
         <title>Help Inita</title>

      <style type="text/css">
      body, html {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color:#FFF;
      background-color:#333;
      padding:0;
      margin:0;
      height: 100%;
      }

      #page {
       width:740px;
       background-color:#000;
       padding:0;
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 10px;
       margin-left: auto;
       position: relative;
       min-height: 100%; /* For Modern Browsers */
       height: auto !important; /* For Modern Browsers */
       height: 100%; /* For IE */

      }
      #downmenu {
       width:740px;
       margin: 0 auto;
       padding:0;
       position: absolute;
       bottom: 0 !important;
       bottom: -1px;
       height: 100px;
      }
      #content {
       margin: 15px;
       padding-bottom: 160px;
       height: auto !important;

      }

      .imenu
      {
       font-size: 12px;
       text-align:center;
       width:720px;
       background-color:#000000;
       margin:0px;
       padding:10px;
      }
      .imenu a {
      color:#FFF
      }
      .imenu a:hover {
      color:#FFC
      }
      .center {
         text-align:center
      }

      </style>
      </head>

      <body>

      <div id="page">

      <table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%">
         <tr class="center" style="height:25px">
           <td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td>
           <td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td>
           <td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td>
           <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td>
         </tr>
       </table>
      <div id="content">
      content

      </div>
      <div id="downmenu">
      <div class="imenu">
        [ <a href="#">My Name</a> ]
        [ <a href="#">Autos</a> ]
        [ <a href="#">Bears</a> ]
        [ <a href="#">See Tree</a> ]
        [ <a href="#">Contact Us</a> ]
        [ <a href="#">Site Map</a> ]
      </div>
      </div>
      </div>

      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln