XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit div und Höhe (http://xhtmlforum.de/showthread.php?t=48870)

deep4 13.11.2007 17:14

Problem mit div und Höhe
 
Ich habe mich im Forum umgesehen, aber leider keine konkreten Anhaltspunkte zur Umsetzung meines templates gefunden.

Das Problem ist folgendermassen.
Ich versuche eine Seite so zu gestalten wie http://www.lausanne-tourisme.ch
Unten zentriert soll ein Footer ständig im Bild sein.

Der DIV welcher die Content beinhaltet soll immer bis zu diesem Footer reichen und scrollbars haben, so dass die Browserscrollbar stets ausgeblendet ist.
(Der Content-Div heisst "mainpage" und der Footer "pied")

Hier mein HTML-Code:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; table-layout:fixed;">
  <tr>
    <td rowspan="8">&nbsp;</td>
    <td width="15" rowspan="8" style="background:url(img/background_shadow.jpg) left;">&nbsp;</td>
    <td width="799" height="35" style="background:url(img/top/logo_bienvenue.jpg) left; background-repeat:no-repeat;"><div id="menu_top"></div></td>
    <td width="15" rowspan="8" style="background:url(img/background_shadow.jpg) right;">&nbsp;</td>
    <td height="3" rowspan="8">&nbsp; </td>
  </tr>
  <tr>
    <td height="3"> </td>
  </tr>
  <tr>
    <td width="799" height="14" bgcolor="00749b"><div id="menu_horizontal">M&Eacute;DIAT&Egrave;QUE<img src="img/space_menu_horizontal.gif" alt="" width="17" height="1" />FAQ<img src="img/space_menu_horizontal.gif" alt="" width="17" height="1" />INFOS PRATIQUES<img src="img/space_menu_horizontal.gif" alt="" width="17" height="1" />PUBLICATIONS<img src="img/space_menu_horizontal.gif" alt="" width="17" height="1" />NEWSLETTER</div></td>
  </tr>
  <tr>
    <td height="3"> </td>
  </tr>
  <tr>
    <td width="799" height="111" style="background:url(img/top/image_header_man.jpg) left;">&nbsp;</td>
  </tr>
  <tr>
    <td height="3" align="center" valign="top"> </td>
  </tr>
  <tr>
    <td width="799" align="left" valign="top">
    <div id="ensemble">
    <div id="leftmenu">
      <div id="top_menu_left"></div>
      <div id="bottom_menu_left"></div>
      <div id="olympique_logo"></div>
      <div id="top_menu_left"></div>
      <div id="menu_left">
        <div style="padding-left:10px;"><strong>Retour aux pages tourisme</strong></div>
      </div>
      <div id="retour"></div>
    </div>
    <div id="mainpage">
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Te Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Te Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Te Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Te Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </div>
</div>    </td>
  </tr>
  <tr>
    <td height="23" bgcolor="00749b">
    <div id="pied">
        <div style="position:absolute;">Recherche
          <input type="text" name="q1" size="20" />
          Recherche avanc&eacute;e</div>
        <div style="position:absolute; margin-top: 3px; margin-left:550px; padding: 3px;"><img src="img/gifs/gif1.gif" alt="" width="17" height="12" /><img src="img/gifs/gif2.gif" alt="" width="17" height="12" /><img src="img/gifs/gif3.gif" alt="" width="17" height="12" /><img src="img/gifs/gif4.gif" alt="" width="17" height="12" /></div>
        <div style="position:absolute; margin-top: 3px; margin-left:650px; padding: 3px;">webmaster | Copyright</div>
        </div>    </td>
  </tr>
</table>

Hoffe dass mir jemand helfen kann.

Danke im Voraus
Cristian

deep4 13.11.2007 17:15

Das zugehörige CSS beinahe vergessen
 
Und mein CSS:

Code:

@charset "utf-8";
/* CSS Document */
/* Compatible : Firefox 2, Explorer 7, Safari */
body {
font-family: Arial, serif;
font-size: 10px;
background:url(img/background.jpg);
}
html, body, table {
/*position: fixed;*/
height: 100%;
margin: 0;
padding: 0;
}

a:link {
color:#13618b;
text-decoration:none;
}
a:visited {
color:#13618b;
text-decoration:none;
}
a:hover {
color:#13618b;
text-decoration:underline;
}

/* Top page */
#header {
height:35px;
background:url(img/top/logo_bienvenue.jpg) no-repeat;
}
#header_stade {
height:35px;
background:url(img/top/logo_vide.jpg) no-repeat;
}
#menu_horizontal {
height:14px;
margin: 3px 0px 3px 0px;
padding: 4px 0px 0px 111px;
color:#fff;
background-color:#00749b;
}
#menu_top {
color:#13618b;
font-size:9px;
text-align:right;
margin:7px 13px 0px 0px;
}
/* Bottom Page */
#pied {
position:absolute;
width:799px;
height: 23px;
bottom:0px;
color:#fff;
padding:0px 0px 0px 0px;
background:#00749b;
margin: 0px auto;
z-index: 2;
}

/* Menu */
#leftmenu {
display:block;
position: absolute;
width: 111px;
height:100%;
background-repeat: no-repeat;
background-color:#00749b;
}
#top_menu_left{
height:6px;
background:url(img/left/blue_top_menu_left.jpg);
}
#menu_left{
width: 111px;
color:#fff;
background-color:#00749b;
}
#bottom_menu_left{
height:28px;
background:url(img/left/blue_bottom_menu_left.jpg);
}
#olympique_logo{
height:76px;
background:url(img/left/logo_olympique.jpg);
}

/* Content */
#mainpage {
display:block;
position: relative;
width: 688px;
min-height: 100%;
height: auto !important;  /* für moderne Browser */
height: 100%;  /*für den IE */
overflow: scroll;
background-image: url(/images/fond_contenu_context.gif);
background-repeat: repeat;
z-index: 1;
visibility: visible;
left:111px;
}

/* main page container */
#ensemble {
position: relative;
width: 799px;
min-height: 100%;
height: auto !important;  /* für moderne Browser */
height: 100%;  /*für den IE */
overflow: auto;
background: #ffffff;
text-align: left;
z-index: 1;
}


heiko_rs 13.11.2007 21:03

Siehe die beiden Links in folgendem Post: http://xhtmlforum.de/48864-css-forma...tml#post357603


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:47 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020