Layout ohne Tabelle möglich? @ tutorials.de: Tutorials, Forum & Hilfe

MasterEvil · 23.03.06 20:34

Hallo ich benötige folgendes Layout und es soll ganz ohne Tabelle auskommen:

Layout - Skizze

Ich habe schon einiges probiert aber ich bekomme es nicht hin.
Den Head am Anfang und den Footer ans Ende zu bekommen ist kein Problem.
Probleme machen nur die Rahmen links und rechts, denn wenn der Inhalt leer ist möchte ich dass der Footer trotzdem am unteren Bildschirmrand erscheint und die Rahmen bis zu diesem runter gehen.

Hier seht ihr mal mein Projekt: http://ordens-ritter.com/new/

Wenn ich den Footer unten positioniere bekomm ich nicht den Content gestreched :/
Vieleicht hat ja jemand eine Idee wie man sowas realisieren könnte?

franz007 · 23.03.06 20:38

Hallo schau dir mal dieses Beispiel an

http://de.selfhtml.org/css/layouts/m....htm#kopf_fuss

MasterEvil · 23.03.06 20:47

Ja das kenne ich, das geht aber nicht weil dort der Content einfach nur so groß ist wie der Inhalt. Das fällt nicht auf wenn man keinen Rahmen hat oder Hintergrundfarbe etc. hat.

Mein Problem ist aber das ich zwei unterschiedliche Container links und rechts soweit in die Höhe maximieren muss das sie mindestens den Raum zwischen Header und Footer füllen.

Hier mal ein Beispiel wie das ganze mit einer Tabelle aussähen würde: http://ordens-ritter.com/new/beispiel.htm

[EDIT]
Doch ein anderes Beispiel als ich erst dachte aber dort ist genau der selbe Fehler den ich im Moment auch habe, es geht nicht bis untersten Punkt vom Fenster.

Maik · 23.03.06 20:50

Und wie soll sich der Footer verhalten, wenn der Inhalt länger (=höher) ist, als der vertikale Viewport: fixiert oder mitwandern?

MasterEvil · 23.03.06 20:54

Er soll mitwandern. Also immer ganz als letztes angezeigt werden.

Maik · 23.03.06 21:00

Wenn das Layout ein fixe Breite besitzt, empfiehlt sich die Faux-Columns-Technik, um die Spalten gleich hoch zu gestalten.

son gohan · 23.03.06 21:10

In dem Tutorial http://www.tutorials.de/forum/css-tu...-bloecken.html findest du ein Vorlage die du dir anpassen kannst, der Footer und Header sind immer ganz unten und oben, egal wieviel Text link, rechts oder in der mitte steht.

Maik · 23.03.06 21:13

@ son gohan: der Footer soll bei zunehmenden Inhalt mitwandern, was bei einer absoluten Positionsangabe nicht möglich ist.

MasterEvil · 23.03.06 21:24

Eure Beispiele helfen mir beide nicht wirklich weiter.
Mit Absoluter positionierung hab ich das mit dem Footer schon hinbekommen nur das maximieren des Contents macht mir noch zu schaffen.

Beispiel mit viel Inhalt

Beispiel mit wenig Inhalt

Maik · 23.03.06 21:39

Hier mal ein simples Beispiel:

HTML-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">
<title></title>

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

#content {
position: relative;
min-height: 100%;
}

* html #content { /* Für IE */
height: 100%;
}

#head {
height: 100px;
background: #efefef;
}

#footer {
position: relative;
height: 30px;
margin-top: -30px;
background: #efefef;
}
-->
</style>

</head>
<body>

<div id="content">
     <div id="head">head</div>
     content with dummy text
</div>
<div id="footer">footer</div>

</body>
</html>

Maik · 23.03.06 22:02

Und hier die zweite Lösungsvariante, in der eine Hintergrundgrafik vertikal wiederholt wird und die drei Spalten simuliert.

Das Demo (incl. Grafik) hänge ich als ZIP-Datei an.

djlein · 23.03.06 22:08

Hmm,.... suchst du evtl. etwas in dieser Art?
http://www.gabberhell.com/test/index.php?ressort=test2

MasterEvil · 23.03.06 22:36

Das simple Beispiel 2 weiter hoch war der Durchbruch *gg*
Besten Dank!!

So sieht jetzt das Ergebnis aus: http://ordens-ritter.com/new/ergebnis.htm

Wenn ich da jetzt noch nen DIV drum lege kann ich mittels Background-Image meinen Rand links und rechts bis runter zum Footer zeichnen auch wenn so gut wie kein Content vorhanden ist! Das war es was ich gesucht hatte!

Vielen Dank nochmal an alle die sich den Kopf zerbrochen haben

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Layout ohne Tabellen

pixel-genaues Layout möglich ?

CSS Layout mit position absolute und relativ möglich?

PHPMyAdmin ohne Layout

Null-Layout in SWT möglich?

E-Mail:

Abonnieren Abbestellen