Problem mit div und Höhe

deep4 · #1 (**permalink**) 13.11.2007, 16:14

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 · #2 (**permalink**) 13.11.2007, 16:15

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 · #3 (**permalink**) 13.11.2007, 20:03

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18
Div / Css Problem ( height / höhe )	bl4ck	CSS	9	04.06.2009 18:57
Absoluter Div mit 100% Höhe wird am Vieport abgeschnitten	tramper	CSS	10	14.04.2009 23:03
DIV 100% Höhe IE6 Problem	pixelpole	CSS	3	04.01.2007 12:56