Umstellung von Tabellen auf Div-Layout

B

bigBigmek

Grünschnabel
so wie der threadname bereits vermuten läst will ich von Tabellen layouts auf div umsteigen.

nur gelieng es mir nicht so recht.

ich möchte das hier ummünzen
HTML: 
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="980" style="background-color:rgb(230,230,230)">
      <tr height="50">
	<td width="100%"  style="background-color:rgb(160,160,160)">
	</td>
      </tr>
      <tr height="50">
	<td width="100%"  style="background-color:rgb(190,230,190)">
	</td>
      </tr>
      <tr height="*">
	<td width="100%"  style="background-color:rgb(80,80,80)">
	</td>
      </tr>
      </tr>
    </table>

und hier was ich bereits geschaft habe

HTML: 
<div style="position:absolute;top:1024px;left:0px;height:100%;width:100%">
      <div style="position:relative;left:50%;margin-left:-490;width:980px;height:100%;background-color:rgb(230,230,230)">
	  <div style="left:0;margin-left:0;width:auto;height:50px;background-color:rgb(160,160,160)">
	  </div>
	  <div style="height:50px;position:relative;top:0;margin-left:0;width:99%;background-color:rgb(190,230,190)">
	  </div>
	  <div style="height:*;position:relative;top:0;margin-left:0;width:99%;background-color:rgb(80,80,80)">
	  </div>
      </div>

mein problem ist nun , das ich eine der drei zeilen nicht automatisch den restlichen freien Raum füllen lassen kann

im beispiel oben ist es die letzte zeile (gehe vom tabellen layout aus)
es soll aber auch möglich sein die mittere oder die obere zeile so einzustellen das automatisch den restlichen freien Raum ausfüllt.
kann mir wer helfen bin echt am verzweiflen un überlge mir ob ich nicht doch bei tabellen bleiben soll:confused:
 
Sodele, da bin ich schon wieder (mit gestärktem Magen) :)

In dieser Variante scheint es so, als wenn die untere Zeile die frei verfügbare Höhe im Viewport einnehmen würde, der Trick liegt hier aber darin, der Mutterbox (hier: #wrap) den Hintergrund dieser Zeile zuzuordnen:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-03-05">

<title>tutorials.de | demo_bigBigmek</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
#wrap {
position:relative;
left:50%;
margin-left:-490px;
width:980px;
height:100%;
background-color:rgb(80,80,80);
}
#head {
height:50px;
background-color:rgb(160,160,160);
}
#middle {
height:50px;
background-color:rgb(190,230,190);
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="head">head</div>
     <div id="middle">middle</div>
     <div id="foot">foot</div>
</div>

</body>
</html>


Und in dieser Variante spielen wir das Spiel für die mittlere Zeile durch ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-03-05">

<title>tutorials.de | demo_bigBigmek</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
#wrap {
position:relative;
left:50%;
margin-left:-490px;
width:980px;
height:100%;
background-color:rgb(190,230,190);
}
#head {
height:50px;
background-color:rgb(160,160,160);
}
#foot {
position:absolute;
bottom:0;
height:50px;
width:100%;
background-color:rgb(80,80,80);
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="head">head</div>
     <div id="middle">middle</div>
     <div id="foot">foot</div>
</div>

</body>
</html>


mfg Maik
 
wow Danke.
Ich schaue es mir gleich mal an.
1+ für die Schnelligkeit.

edit: ich verstehe den code nicht

#foot gibts ja garnicht
und wenn ich dem foot Element eine Farbe gebe erscheint nicht da es keine größe hatt
 
Zuletzt bearbeitet:
Danke, für meine Schnelligkeit bin ich hier im Forum, wie auch im "Real Life" schon berühmt :-)

Sollte das Layout bei zunehmenden Inhalt in der Höhe mitwachsen, wäre noch folgende Regelerweiterung erforderlich:

Code: 
#wrap {
position:relative;
left:50%;
margin-left:-490px;
width:980px;
min-height:100%;
height:auto !important;
height:100%;
background-color:rgb(190,230,190);
}

Bei der zweiten Variante empfiehlt sich folgende Regel, damit der Inhalt der mittleren Zeile nicht unter (hinter) dem Footerbereich verschwindet:

Code: 
#middle {
padding-bottom:60px;
}


[edit]
bigBigmek hat gesagt.:
edit: ich verstehe den code nicht

#foot gibts ja garnicht
und wenn ich dem foot Element eine Farbe gebe erscheint nicht da es keine größe hatt
Zum Vergrößern anklicken....
Wie ich schon erläutert habe, wird im ersten Beispiel der Hintergrund für #foot im DIV #wrap definiert, da nur dieser Block eine tatsächliche 100%-Höhe im Viewport besitzt. Die Höhe der übrigen Blöcke ergibt sich lediglich durch ihren Inhalt, und reicht daher im Ausgangsstadium (also ohne Inhalt) nicht bis zum unteren Fensterrand.

Würde hier für den Footer height:100% deklariert werden, um ihn vertikal zu "strecken", würde sich das komplette Layout um das Höhenmaß vom Header und mittleren Bereich verlängern, da sich diese 100%-Höhe immer auf die Höhe des Browserfensters bezieht.
[/edit]

mfg Maik
 
Hmm anders gehts nicht?

Wollte die Div Elemente dann eigentlich Dynamisch von einem PHP script mit Elementen befüllen lassen. zb (Gästebuch,Nickpage,Infos)
Und diese sollten sich dann automatisch an die größe des Div Elements anpassen.

Das funktioniert ja leider so nicht.
Dann muss ich es wohl doch leider wieder mit Tabellen machen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück