✔ Tabellenlayout mit Divs

Status
Nicht offen für weitere Antworten.
Senshi86

Senshi86

Erfahrenes Mitglied
Moin zusammen,

bin gerade ein wenit mit HTML / CSS am basteln und habe nun folgendes Problem:
Ich würde gerne ein Layout erstellen, bei dem ich einen Header, einen Mittelteil mit dem Inhalt und einen Footer habe.
Der Header hat Höhe x, Eigenschaft top: 0px; , der Footer hat Höhe y und hat Eigenschaft bottom: 0px;
Jetzt hätte ich gerne, dass mein mittlerer genau den Zwischenraum zwischen diesen beiden Divs aussfüllt, habe aber keine Ahnung wie ich das machen soll. Positioniert sind sie momentan alle relative.
Hat da jemand eine Idee?
Wenn nicht werde ich wohl doch bei Tabellen bleiben müssen, bei denen war das jedenfalls möglich gewesen.
 
Hi,

vielleicht hilft dir dieses Modell weiter?

Code: 
<!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="michaelsinterface">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
}

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
background: #e9e9e9;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

div#header {
height: 100px;
background: #cacaca;
}

div#footer {
position: absolute;
bottom: 0;
left: 0;
width:100%;
background: #cacaca;
}
-->
</style>

</head>
<body>

<div id="wrapper">
   <div id="header">header</div>
   <div id="content">content</div>
   <div id="footer">footer</div>
</div>

</body>
</html>
 
Moin,
hab jetzt mal ein wenig herum gespielt, bin aber noch nicht ganz zufrieden.
Gibt es auch die möglichkeit mit den Div's eine quasi Tabelle nach zu bauen?
Also ich weiß wie ich das Layout mit einer Tabelle umsetzen würde, die Tabelle mit 100% Höhe angeben, drei row's, in die obere der Header rein mit einer fixen Höhe, in die untere den Footer rein mit fixer Höhe und der Content würde sich dann in Größe immer genau zwischen der oberen und der unteren Zeile einpassen.
Bisher habe ich noch keinen Weg gefunden das Ganze mit Div's nach zu bauen =/
Vielleicht mal um eine grobe Vorstellung davon zu erhalten wie es momentan aussieht (wie es nicht funktioniert wenn ich es zusammen schiebe, da sich der Footer über den Content und den Header schiebt) und wie es aussehen sollte.

Aktuell:
http://senshi.kilu3.de/gb/index.html
CSS:
http://senshi.kilu3.de/gb/basic.css

Soll (ungefähr):
http://senshi.kilu3.de/gb/HP.jpg

Dann noch eine weitere Frage, ich hab momentan den Hovereffekt bei den Navigationsbuttons über onmouseover und JavaScript realisiert, gab es da nicht auch eine CSS Variante für so einzelne Menüpunkte mit einem Hover Effektzu versehen?
 
Hi,

mein vorgestelltes Modell erfüllt doch soweit alle Kriterien :confused:

Einen CSS-Bildertausch kannst du beispielsweise so umsetzen:

Code: 
a.nav:link,a.nav:visited {
display:block;
width:135px; /* Grafikbreite */
height:20px; /* Grafikhöhe */
background:url(pfad/zur/grafik_normal.jpg);
}

a.nav:hover {
background:url(pfad/zur/grafik_hover.jpg);
}
Oder du vereinst beide "Zustände" in einer Grafikdatei und arbeitest mit background-position, um das Hintergrundbild neu zu positionieren.
 
Bis auf die Tatsache, dass der Footer den unteren Teil des Contents unwiederruflich verdeckt ja.
Mein Problem ist jetzt folgendes:
Du siehst ja diesen "Home" Bereich in der Mitte des Layouts.
Ich weiß momentan nicht wie ich denk hinbekommen soll, da ich den mittleren Div nicht auf 100% Höhe setzen kann. Er ist immer nur so groß wie sein Inhalt.
In meinem Beispiel habe ich es hin bekommen, dass sich auch der innere Div wirklich in der Höhe anpasst. Der Nachteil, der Footer bleibt nicht mehr unten an der Content Div Box hängen sondern ist nun wirklich immer fest am Ende der Seite. Das heißt wenn ich mein Browserfenster ganz klein ziehe, dann kann ich zwar scrollen, aber der Footer überdeckt meinen Inhalt.
Ich bräuchte eigentlich sowas, dass man sagen kann, Header x Pixel hoch, Footer x Pixel hoch und der komplette Bereich dazwischen wird von einem Div ausgefüllt, welcher sich automatisch anpasst. Zumal dieser Homebereich, sprich der eigentliche Content der Seite, sich auch wieder automatisch an den mittleren Div anpassen sollte, wobei der Homebereich noch einen iFrame beinhalten wird.
Ich hoffe ich hab es geschafft mein Problem gut genug verständlich machen zu können :confused:
Notfalls muss ich wohl noch eine Skizze anfertigen.

Achja und schon mal thx für die Buttons, werde ich direkt mal ausprobieren =)
 
Senshi86 hat gesagt.:
Bis auf die Tatsache, dass der Footer den unteren Teil des Contents unwiederruflich verdeckt ja.
Zum Vergrößern anklicken....
Wende in meinem eingangs gezeigten Beispiel diese Regel auf das DIV #content an, damit der Footer bei einer Höhe von 80px den unteren Teil des Inhalts nicht überdeckt:
Code: 
div#content {
padding-bottom:80px;
}
Vielleicht hilft dir meine erweiterte Fassung meines Ausgangsmodells weiter, die ich hier als ZIP-Datei hochlade, da in diesem Demo ein Hintergrundbild zur "Visualisierung" zum Einsatz kommt.

Die Dimensionen (Breitenangaben) und Hintergrundfarben stimmen mit deinen jetzt nicht überein, aber das sollte hier ja eine untergeordnete Rolle spielen. ;)
 

Anhänge

  • demo_Senshi86.zip
    1,1 KB · Aufrufe: 19
Ok jetzt hab ich noch ein hoffentlich gutes Beispiel dazu.
Und zwar geht es um folgendes Bild:
Screen Layout
Die drei Spalten haben jeweils eine weiße Border.
Und das was man da jetzt sieht ist auch die ganze Zeit mein Problem, die Spalten sind nur so hoch wie deren Inhalt.
Das heißt ich wollte in die mittlere einen iframe einfügen der sich mit dem Div an die Höhe des Browsers anpassen, sprich 100% des Div's ausfüllen sollte. Da das Div aber nur so hoch ist wie sein Inhalt geht das ja nicht =/
Die Content Divs müssten bist runter zum Footer gehen, egal ob was bis da drin steht oder nicht.
 
In meinem letzten Beispiel habe ich dir doch demonstriert, wie sich die Spaltenhöhen unabhängig von ihrem Inhalt angleichen und in der Höhe strecken lassen - das Stichwort lautet: Fauxcolumns.

Wenn die drei Spalten jeweils einen weißen Rahmen besitzen sollen, benötigst du dann dementsprechend drei Grafiken, die die Rahmen erzeugen: eine für oben, eine für unten und eine für die Mitte.

Die obere Grafik würde im Header am unteren Elementrand, und die untere Grafik im Footer am oberen Elementrand als Hintergrundbild positioniert werden. Die mittlere Grafik wird dann, wie schon in meinem Beispiel, im Wrapper-DIV in der Vertikalen wiederholt.

Anbei noch ein kleines Beispiel, in dem sich der iFrame vom Header bis zum Footer erstreckt.
 

Anhänge

  • demo_Senshi86_2.zip
    1,9 KB · Aufrufe: 21
Sieht gut aus :)
Danke für die Tipps, werde ich mir jetzt erst mal in Ruhe zu Gemüte führen.
Ich denke das reicht dann auch um die Seite fertig zu Basteln.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück