✔ tabellenausrichtung oben UND unten

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Hallo zusammen!
Ich bastel grad an einer Site und habe ein Problem:

Habe die Site (per Tabellen) in drei horizontale Bereiche gegliedert:
- Head/Navi
- Content
- Fuss

Und hier liegt das Problem:
Ich möchte den Head-Bereich im Browser immer an der Oberkante bündig haben, aber gleichzeitig den Fuss am unteren Fensterrand. Im Contentbereich befinden sich mehrere Tabellen, die in der Größe variieen.
Also wenn der Content ganz klein ist soll der Fuss am unteren Fensterrand sein. Wenn der Content größer wird, dann verschiebt sich der Fuss nach unten, ggf. auch tiefer als der Fensterrand. Das Scrolling stört nicht weiter.

Den Head oben zu haben ist ja kein Problem, aber der Fuss..

Bitte helft mir, damit ich die Site termingerecht online stellen kann

Ich hab dat Ding zum Begutachten online gestellt:

http://www.2klang.net/markus/02f_existenz.html


EDIT:
Ich hab mal ne Grafik drangehängt, um mein Problem verständlicher zu machen..
 

Anhänge

  • aufbau.gif
    aufbau.gif
    4,8 KB · Aufrufe: 154
Zuletzt bearbeitet:
Mit Tabellen allein wird dies wohl schwierig zu realisieren. Wenn du jedoch auf semantische Elemente zurückgreifst – was ich dir empfehle –, dann wird dir folgender, auf A List Apart erschienener Artikel mit dem Titel „Exploring Footers“ sicherlich weiterhelfen.
 
@W-Stefan:
Jo hab ich, aber mein Kunde besteht auf Tabellen (warum auch immer..). Hab versucht es ihm auszureden, aber wat will ma machen? Money rules..

@Gumbo:
Danke für den Link! Ich kann zwar für dieses Projekt konkret nix damit anfangen, aber für spätere Arbeiten klingt das doch sehr interesant!
 
Hi,

@W-Stefan: Frames sind keine Lösung. Er wollte das sich der Footer nach unten verschiebt wenn der Content Bereich größer ist. Also, daher, entweder Layer, oder wie gewünscht Tabellen.

>>ja, das geht auch mit Tabellen. Hab ein paar Sachen irgendwo rumfliegen wo ich das auch noch mit Tabellen gelöst habe. Muss mal suchen.

Aber, ist eigentlich ja auch nicht so das Problem. Eine Tabelle mit 100% Höhe. Dann nimmst du eine weiter für den Header, eine für den Content und eine mit valign=bottm ausgerichtet für den Footer.

Aber ich schau grad mal nach.

greetz


Oh mein Gott, hab ich mir das früher umständlich gemacht, eine Tabelle, und noch eine, ah, da nehm ich auch noch eine usw.

Hab dir mal schnell was neues gecodet. Eine Tabelle, drei rows, header 100px, content variabel, footer 100px.

Hier der Code:

Code: 
<html>
<head>
<title>Table Layout</title>
 
</head> 
<body><table height="100%" width="396" border="1" cellpadding="0" cellspacing="0" >
<tr>
	<td height="100" valign="top">
header
</td>
</tr>
<tr>
	<td valign="top">
content
</td>
</tr>
<tr>
	<td height="100" valign="bottom">
footer
</td>
</tr>
</table>
</body>
</html>


So wolltest du das doch?

greetz
 
Zuletzt bearbeitet:
Hi,

versuch13 - shit mann das ist so einfach, da hätt ich eigentlich auch selber draufkönnen kommen.. Hab den Code auf jeden Fall ausprobiert und siehe da- top!
Vielen Dank dafür!


Und jetzt für Fortgeschrittene:
Ich habe im Contentbereich eine senkrechte Linie. Diese soll immer von Head zum Foot durchlaufen. Wenn ich den Content nun aber sehr klein mache, dann läuft die Linie nicht mehr bis zum Fuss durch. Sondern eben nur bis zum Ende des Contentbereichs. Wie bekomme ich diese immer bündig?
Ich behelfe mir momentan mit nem leer.gif, das ich auf entsprechende Höhe trimme. Damit ist aber die nach unten erweiterbare Tabelle für'n A... .
Vorschläge?

EDIT: zum besseren Verständnis- die senkrechte Linie ist eine col der Content-Tabelle. Dumm, denn dadurch wird sie immer mit dem content mitskaliert.
Nur: links davon ist die Side-Navi, der Strich ist unbedingt nötig als Trenner.
 
Zuletzt bearbeitet:
Ja, sorry, aber das versteh ich jetzt nicht ganz, soll die Linie nur bis zum Anfang vom Footer gehen oder bis ganz unten, also auch durch den Footer?
Oder nur durch den Content Bereich?

Am besten mal den Quelltext zeigen.

greetz
 
Hi versuch13!

Also die Linie soll vom unteren Ende des Headers bis zum oberen Ende des Footers gehen. Also durchgehend..
Ich hab den Quelltext mal drangehängt. Hab ihn soweit möglich entschlackt, alle Bilder raus usw. Ich hoffe es ist nicht zu konfus..


Code: 
<html>
    <head>
    <title>Table Layout</title>
    <link rel="stylesheet" href="images/die.css" type="text/css">
    </head>
    <body leftmargin="0" topmargin="0" bgcolor="#EFEFEF" marginheight="0" marginwidth="0" text="#000000"> 
    <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" > 
      <tr> 
 <td height="110" valign="top"><table width="100%" height="90" border="0" cellpadding="0" cellspacing="0" class="greenBG"> 
 <tr> 
 <td align="left" valign="top">Head
 </table> 
 <table width="100%"  height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="0099CC"> 
 <tr> 
 <td bgcolor="0099CC">Navi</td> 
 </tr> 
 </table></td> 
      </tr> 
      <tr> 
 <td valign="top"><table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
 <tr> 
 <td align="left" valign="top"><table width="744" border="0" cellspacing="0" cellpadding="0"> 
 <tr align="left" valign="top"> 
    				
 <!-- hier habe ich bisher die Hoehe vom content -und damit auch der Linie- festgelegt: (Damit der Foot nicht zu weit nach oben rutscht) --> 
 
  <td width="34"><img src="images/leer.gif" width="34" height="200" border="0"></td> 
 <td width="79">SideNavi</td> 
 <td width="15"><img src="images/leer.gif" width="15" border="0"></td> 
    				
 <!-- HIER IST MEIN PROBLEM: die orange Linie --> 
 
  <td width="1" class="orangeBG"><img src="images/leer.gif" width="1" border="0"></td> 
 <td width="64"><img src="images/leer.gif" width="64" border="0"></td> 
 <!--inhalte--> 
 <td><table width="483" border="0" cellspacing="0" cellpadding="0"> 
 <tr> 
 <td>Content, dieser dehnt sich beliebig weit nach unten</td> 
 </tr> 
 </table></td> 
 <!--inhalte ende--> 
 </tr> 
 </table></td> 
 </tr> 
 </table></td> 
      </tr> 
      <tr> 
 <td height="20" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="greenBG"> 
 <tr> 
 <td align="left" valign="top"> Foot</td> 
 </tr> 
 </table></td> 
      </tr> 
    </table> 
    </body>
    </html>

Hoffe Du kannst mir helfen..
 
Zuletzt bearbeitet:
Also die Linie soll vom unteren Ende des Headers bis zum oberen Ende des Footers gehen. Also durchgehend..
Zum Vergrößern anklicken....

>> Jetzt war es leider auch nicht verständlicher. Weil durchgehend? Du meinst durchgehend durch den Inhalts Bereich, also ohne Header und Footer?

So habe ich es jetzt einfach mal verstanden, und dir eine Vorlage rausgesucht die ich mir mal angefertigt hatte.
Vielleicht hilft es dir ja weiter. Aber ich denke es ist genau das was du meintest.


Code: 
 <html>
<head>
<title>Table Layout</title> 
 
<style type="text/css">
<!--
.table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #CCCCCC;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
body {
margin: 0px;
padding: 0px;
}
.tdheader {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
.tdfooter {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
.content {
padding: 10px;
}
.navi {
padding: 10px;
border-right: 1px solid #333333;
}
-->
</style>
</head>
 
<body>
<table class="table" height="100%" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" class="tdheader" height="100" valign="top">
header
</td>
</tr>
<tr>
<td class="navi" width="100px" valign="top">
Navigation
</td>
<td class="content" valign="top">
content
</td>
</tr>
<tr>
<td colspan="2" class="tdfooter" height="100" valign="bottom">
footer
</td>
</tr>
</table>
 
</body>
</html>


greetz
 
Zuletzt bearbeitet:
Hi!

Ich glaub im erklären bin ich nicht so die Leuchte..
daher häng ich jetzt mal ein Pic mit dran. Ich denke so wird es Dir am ersichtlichsten wie ich das meine.
Dein Vorschlag von vorhin.. War nahe dran, aber ich konnte ihn nicht hernehmen da der Header/footer über die gesamte Seitenbreite laufen. Der Content rutscht dadurch zu weit raus.

Zu dem Pic.. die Verhältnisse usw. stimmen hier schon. Ich hoffe Du kommst dahinter was ich mein

derDoofeStrich.jpg

Danke für Deine Geduld
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück