HTML üben (Tabellenlayout)

Psycot-X · 01.12.2009, 15:48

Da mich zurzeit gähnende Langeweile plagt habe ich mal wieder angefangen mit HTML zu arbeiten.
Ich will einfach probieren und "meinen Horizont" erweitern.

Folgende Idee.
Ich möchte eine Seite mit Tabellenlayout erstellen:
Ich hab mir überlegt eine Tabelle mit 3 Spalten zu machen, in den 2 äußeren sind jeweile farbige Hintergrundfarben (^^) und die Mitte soll wegen dem Content neutraler bleiben, Menu dann immer zu oberst der 2. Spalte.

1. Frage: Wie bringe ich meinem Tabellenkonstrukt bei, dass es auch ohne Inhalt 100% des Bildschirms ausfüllt (nach unten)?
In der Breite geht das schließlich auch!

2. Frage: Wie schaffe ich es, dass er wirklich 100% des Bildschirms im Browser mit den Tabellen bestückt und nicht links, rechts und oben noch ein paar Pixel Platz lässt?

Hier der Quellcode (ist völlig unstrukturiert, etc...)

Code:

<html>
<head>
<title>Tabellenlayout</title>
</head>
<body>
<table width="100%" heigth="100px" border="0" cellspacing="0" cellpadding="4">
  <tr>

    <td width="10%" background="img/bg02.png">
    <p>LINKS<br>
    </td>

    <td width="80%" valign="top" bgcolor="#222222">
<p>CONTENTSPALTE<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
    </td>

    <td width="10%" background="img/bg02.png>
    <p>RECHTS<br>
    </td>

  </tr>
</table>
</body>
</html>

**xandros** · 01.12.2009, 15:58

zu 2) mit einer Tabelle nicht möglich, da eine Tabelle kein Layoutinstrument ist, sondern ein Strukturierungswerkzeug für tabellarische Daten.....
Eventuell ist es da besser, wenn du drei Container verwendest, die du pixelgenau positionieren kannst. In den Containern kannst du dann ja mit drei einzelnen Tabellen weiter arbeiten.
Dabei verwendest du die Tabellen aber auch wieder zweckentfremdet für das Layout. Kein guter Stil!

Psycot-X · 01.12.2009, 16:03

Ich will eben einfach erstma wieder bei HTML reinkommen und auf Frames hatte ich keine große Lust =/

Welche Möglichkeiten habe ich denn da außer Tabellen noch um so etwas zu realisieren?
(seperater Hintergrund für linken und rechten Rand, neutraler BG in der Mitte)

Ich hab hier ma gepainted wie in etwa ich mir das vorgestellt hab:
http://img189.imageshack.us/img189/8111/konzept.png

**xandros** · 01.12.2009, 16:27

Die einfachste Version:
Hintergrund für den Body-Tag definieren. Dann wird das flächendeckend für die komplette Seite dargestellt.
Darauf einen Div-Container mit Breiten- und Höhenangaben positionieren für den Content....
Wenn dann links/rechts noch weitere Sachen ergänzt werden sollen, können in den Bereichen immer noch Div-Container positioniert werden.

Psycot-X · 01.12.2009, 16:37

Also ich benutze als Referenz zur Fehlersuche meistens selfhtml, leider finde ich dort nichts über div-container...
Kennst du eine Seite, auf der ich so etwas finde?
Ich hab mich noch nie mit <div> beschäftigt.

Danke =)

PS: Ich werde mich zunächst hier mal umtun: http://www.css4you.de/wslayout1/index.html
aber falls du was besseres hast ;D

**xandros** · 01.12.2009, 17:08

dann hast du auf selfhtml etwas übersehen.
SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Allgemeine Elemente für Textbereiche

Psycot-X · 01.12.2009, 18:25

Container und Block als eins anzusehen kam mir auch nicht in den Sinn =O sorry^^

Nunja, dass mit den div-containern ist ja echt simpel.
Ich werd jetzt nur das Menu in eine Tabelle packen, mal sehn wie weit ich da komme... so ganz klappt es noch nicht^^

*e: Doofe Frage, aber wie bringe ich einen Div-Container der per

Code:

style="position:absolute;bottom:0px;margin:0px auto;padding:4px;

auf den Boden gesetzt wurde? Also fürs Impressum/Disclaimer versteht sich.
ich habe sowohl im div-Tag alle möglichen Varianten von text-align:right; ausprobiert, sowie den Spaß schon in die Stylesheet-Datei gepackt... Leider alles ohne Erfolg =/

Hier nochma der betreffende Quellcode:

Code:

<div style="position:absolute;bottom:0px;margin:0px auto;padding:4px;">
<div id="impressum">Impressum</div>
</div>

PC-Gerry · 10.12.2009, 22:20

Hey.
Also, ich habe dir mal eben auf die schnelle ein Standart dingen erstellt. Schau es dir mal und bastel daran rum. Das geht meistens besser als komplett selbst machen.

<div style="width:100%; height:200px; background-color:#333;">
<span>Hier kommt deine Headgrafik rein</span>
</div>
<div style="width:20%; height:800px; background-color:#444; float:left;">
<span>Linke Leiste für zum Beispiel ein Menü</span>
</div>
<div style="width:80%; height:800px; background-color:#CCC; float:right;">
<span>Contentbereich</span>
</div>
<div style="width:100%; height:50px; background-color:#333; clear:both;">
<span>Footer</span>
</div>

Sie betrachten gerade: HTML üben (Tabellenlayout)