Tabellenbreiten
Fokko
- html
0 Thomas Luethi0 Fokko
Hi,
ich möchte gerne folgendes Layout mit Hilfe von Tabellen verwirklichen.
Tabellenbreite=100%
1. Zeile: Header mit colspan=3
2. Zeile: Menu mit Breite=60
Inhalt mit variabler Breite
Hilfe mit Breite=60
Wie kriege ich es hin das die Menus immer auf 60 bleiben und nur der Inhalt skaliert, wenn ich das Fenster kleiner oder größer mache.
Danke
Hallo,
ich möchte gerne folgendes Layout mit Hilfe von Tabellen verwirklichen.
Tabellenbreite=100%
- Zeile: Header mit colspan=3
- Zeile: Menu mit Breite=60
Inhalt mit variabler Breite
Hilfe mit Breite=60Wie kriege ich es hin das die Menus immer auf 60 bleiben und nur der Inhalt skaliert, wenn ich das Fenster kleiner oder größer mache.
Gib den Zellen links und rechts in der zweiten Zeile je die Breite 60.
A propos: 60 was? 60 Pixel scheint mir sehr, sehr wenig zu sein.
Aber sei's drum. Du kannst es ja immer noch aendern.
HTML:
<table id="layouttabelle">
<tr><td id="header" colspan="3">Header</td></tr>
<tr>
<td id="menue">Menue...</td>
<td id="inhalt">Inhalt...</td>
<td id="hilfe">Hilfe...</td>
</tr>
</table>
CSS:
table#layouttabelle { width:100%; margin-top:0; }
td#menue { width:60px; }
td#hilfe { width:60px; }
Die uebrigen IDs habe ich mal schon vorsorglich ins HTML geschrieben,
auch wenn Du sie fuer diesen Zweck eigentlich noch nicht brauchst.
---
Veraltet - mit HMTL-Attributen - wuerde die Geschichte so aussehen:
<table width="100%">
<tr><td colspan="3">Header</td></tr>
<tr>
<td width="60">Menue...</td>
<td>Inhalt...</td>
<td widht="60">Hilfe...</td>
</tr>
</table>
---
Du kannst beides (HTML + CSS) auch kombinieren (im Zweifelsfalle sollte CSS "gewinnen"),
aber ich wuerde nur noch voll auf CSS setzen.
Lektuere:
http://selfhtml.teamone.de/css/index.htm
http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm
http://www.w3.org/TR/REC-CSS2/tables.html
http://selfhtml.teamone.de/html/tabellen/gestaltung.htm#breiten_hoehen
http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinieren
Gruesse,
Thomas
Gib den Zellen links und rechts in der zweiten Zeile je die Breite 60.
A propos: 60 was? 60 Pixel scheint mir sehr, sehr wenig zu sein.
Aber sei's drum. Du kannst es ja immer noch aendern.HTML:
<table id="layouttabelle">
<tr><td id="header" colspan="3">Header</td></tr>
<tr>
<td id="menue">Menue...</td>
<td id="inhalt">Inhalt...</td>
<td id="hilfe">Hilfe...</td>
</tr>
</table>CSS:
table#layouttabelle { width:100%; margin-top:0; }
td#menue { width:60px; }
td#hilfe { width:60px; }Die uebrigen IDs habe ich mal schon vorsorglich ins HTML geschrieben,
auch wenn Du sie fuer diesen Zweck eigentlich noch nicht brauchst.
Veraltet - mit HMTL-Attributen - wuerde die Geschichte so aussehen:
<table width="100%">
<tr><td colspan="3">Header</td></tr>
<tr>
<td width="60">Menue...</td>
<td>Inhalt...</td>
<td widht="60">Hilfe...</td>
</tr>
</table>
Du kannst beides (HTML + CSS) auch kombinieren (im Zweifelsfalle sollte CSS "gewinnen"),
aber ich wuerde nur noch voll auf CSS setzen.Lektuere:
http://selfhtml.teamone.de/css/index.htm
http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm
http://www.w3.org/TR/REC-CSS2/tables.htmlhttp://selfhtml.teamone.de/html/tabellen/gestaltung.htm#breiten_hoehen
http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinierenGruesse,
Thomas
Das habe ich auch schon probiert nur leider geht es nicht.
<HTML>
<BODY leftmargin="0" topmargin="0">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3"><img src="images/header.gif" width="220"></td>
</tr>
<tr>
<td valign="top" width="120">
###MENU###
</td>
<td valign="top">
###CONTENT###
</td>
<td valign="top" width="120">
###HELP###
</td>
</tr>
</table>
</BODY>
</HTML>
mit diesem Layout haben die zelen am Rand zwar eine mindestbreite von 120 px aber wenn ich das fenster größer mache skalieren sie auch größer, ich will aber das nur der mittlere teil mit skaliert