zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit div und Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2007, 16:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2007
Beiträge: 2
deep4 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.11.2007, 16:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2007
Beiträge: 2
deep4 befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.11.2007, 20:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:30 Uhr.