3 Teiliges Layout mit Tabellen

Lehrling1991

Hallo Zusammen

Ich bin gerade daran eine Website zu gestalten. Sie soll ganz einfach werden. Es soll im Kopfbereich ein Logo geben, das sich der Seitengrösse anpasst. Dann soll es am linken Bildschirmrand eine Navigation geben, und daneben kommt noch der Inhaltsbereich.

Die 3 Bereiche sollten sich automatisch an die Browsergrösse anpassen. Wie schaff ich das? Habs mit Prozent probiert, aber so wie ichs im Moment habe, gehts im Firefox nicht. Finde aber das Problem nicht.

Hier mein Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>


<body style="height:100%">
<table width="100%" style="height:100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="red" colspan="2" valign="top"><img  src="logo.png" style="width:100%" alt="Das ist unser Logo"  /></td>
  </tr>
  <tr height="100%" >
    <td bgcolor="green" valign="top" min-width="500px">Navigation</td>
    <td bgcolor="blue" width="80%" valign="top">Inhalt</td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

Das Menü(nicht integriert im Moment) soll ein Dropdownmenü werden. Hab ich allerdings schon erledigt, muss nur noch integriert werden. Das Inhaltsfeld(Text/Bilder) soll mit einem eigenen Scrollbalken versehen werden, diesem Problem begegne ich ebenfalls das erste mal.

Hoffe könnt mir weiterhelfen.

Euer Lehrling1991

Bandit

http://www.css4you.de/wslayout1/ex0008.html
http://www.css4you.de/wslayout1/ex0010.html

Lehrling1991

Danke für die rasche Antwort. Hat mir sehr geholfen. konnte das Problem nun lösen.

Hast du vielleicht noch eine Idee wie ich ein Inhaltsfeld mit einem Scrollbalken versehen kann?

driver

http://www.css4you.de/overflow.html

Lehrling1991

Danke vielmals für deine Hilfe.

Allerdings hab ichs ein bisschen anderst realisiert.
Nämlich folgendermassen:

HTML

<td valign="top" align="left" width="617px" height="500px"><div style="width: 870px; height: 500px; overflow-x: hidden; overflow-y: scroll">

Wie ihr seht hab ich jetzt eine vertikale Scrollliste, aber keine horizontale.
Im Fenster soll man also nur nach unten scrollen können, nicht nach rechts.

Jetzt ist aber das Problem, das wenn der Text zu lange ist, er doch über die Seite hinausgeht, und man ihn einfach nicht lesen kann.

Wie kann ich dem entgegen wirken?

Peace out' Luca

Bandit

Wieso immer noch td bzw. Tabelle? Das ist Quatsch.

sejuma

Es ist m.E. sinnlos, dass du dich in diesem Tabellencode verstrickst.
Tabellen sind nun mal nicht für Layoutzwecke gedacht.
Beschäftige dich mit CSS und mach's richtig
.
Vom Prinzip her funktioniert der Aufbau so:
html, body und header bekommen 100% width.
Die Navi floatest du links und gibst ihr z.B. 30% Breite.
Den Content setzt du mit margin-right: 30% daneben.

Einen ähnlichen Aufbau findest du hier. Nur mit dem Unterschied, dass es sich um fixe Breiten handelt.

Lehrling1991

kann mir nicht einfach jmd hilfestellung geben?

Mit CSS ist es viel schwieriger, und ich hab mich bis jetzt nur mit tabellen beschäftigt.

Die Seite muss schnell fertig werden, da ich schon ne Weile dahinter bin, kann jetzt nicht nochmal alles umstellen.

Aber ich weiss dass das veraltet ist, und hab mir auch schon vorgenommen die nächste Seite mit HTML/CSS zu machen.

Aber diese wird noch mit Tabellen entstehen. Kann mir niemand helfen?

Danke sejuma für den Link, kann ich gut gebrauchen für meine nächste Page!

MFG Luca

!!!!!!!!!!!!EDIT!!!!!!!!!!!!!!!

Hab jetzt doch umgestellt auf CSS/HTML und hab mir so eine Vorlage gestiefelt. Hat zwar ein bisschen gedauert, aber dafür ises jetzt modern

Hab aber wieder das selbe Problem!

Beim Content Bereich hab ich eine Vertikale Scrollliste. Wenn ich aber den Text so gross mache das er über den Rand hinausgeht, ist er einfach nicht mehr zu sehen.

Wie kann ich das lösen?

Hoffe so kann mir jetzt jmd. helfen

Code sieht so aus:

HTML

<div id="content" style="overflow-x: hidden; overflow-y: scroll">

Danke euch!

Lehrling1991

Zitat von sejuma

Es ist m.E. sinnlos, dass du dich in diesem Tabellencode verstrickst.
Tabellen sind nun mal nicht für Layoutzwecke gedacht.
Beschäftige dich mit CSS und mach's richtig
.
Vom Prinzip her funktioniert der Aufbau so:
html, body und header bekommen 100% width.
Die Navi floatest du links und gibst ihr z.B. 30% Breite.
Den Content setzt du mit margin-right: 30% daneben.

Einen ähnlichen Aufbau findest du hier. Nur mit dem Unterschied, dass es sich um fixe Breiten handelt.

Alles anzeigen

Hei sejuma.

Hab nun eine Vorlage von dieser Seite abgeändert. Und bin deinem Rat gefolgt.

Jedoch hab ich genau das selbe Problem mit den div-boxen.

Der Text läuft einfach weiter... Kannst du mir denn mit diesem Aufbau helfen?

Der Code diesmal ist:

HTML

<div id="content" style="overflow: hidden; overflow-x: hidden; overflow-y: scroll">

das css dazu:

Code

#content
{
width: 650px;
height: 500px;
padding: 5px;
margin-left: 220px;
background: #D6D6D6;
}

Danke dir im Vorraus

Tags