Einfaches Layout mit Footer

[André Griepenburg]

Hallo,

ist sicherlich für euch eine sehr einfache Sache, aber ich möchte eine Seite erstellen, die aus 3 Spalten und einem Footer besteht. Der Footer soll dabei immer der letzte block der Seite sein und HTML Links zu allen Hauptkategorien enthalten. Der Footer soll außerdem über die ganze Länge der Seite gehen.

Die "Größe" bzw. "Länge" der 3 Spalten ist variabel, dementsprechend soll sich der Footer an dem längsten orientieren.
Es ist nicht nötig, dass der Footer automatisch am unteren Fensterrand ist (wenn z.B. jemand einen sehr großen Bildschirm hat).

Hab mal angehängt, was ich mir vorstelle.
Wie setze ich das ganze Tabellenlos um?


Danke schonmal.
(Ich weiß des es simpel sein muss, nur ich steh grade total aufm Schlauch) Anhang anzeigen 2

 

[Peter Bucher]

Hallo TheGamer1701

Die richtigen Stichworte wirken wahren Wunder.
- http://www.google.ch/search?hl=de&q=css+la...th+footer&meta=

Ich nehme an, du brauchst, trotz deines Bildes einen Header?
Dann wäre z.B.
- http://www.pmob.co.uk/temp/3colfixedtest_explained.htm etwas für dich.


Gruss Peter

 

[Lanza]

http://www.intensivstation.ch/en/templates/

 

[Antoine Johannes]

Und hier der Oldtimer unter den Tutorials:
http://www.css4you.de/wslayout1/index.html
Hier hast Du eine Kollektion bis zum abwinken:
http://blog.html.it/layoutgala/

Überigens noch:
float:left,
float:right,
clear,
align:center
margin:0px auto,
margin-left:auto,
margin-right:auto,

heissen die CSS Zauberworte

Gruss Antoine

 

[carapau]

Wenns um CSS geht kann ich www.css4you.de empfehlen - da findste alles

 

[Patrick T.]

QUOTE (Antoine Johannes @ Mi 7.2.2007, 6:30) align:center


Nur um Missverständnisse im Vorfeld auszuräumen,

die CSS-Eigenschaft "align" gibt es nicht, du meintest eher "text-align".

 

[Antoine Johannes]

gaynau
QUOTE die CSS-Eigenschaft "align" gibt es nicht, du meintest eher "text-align"

und zwar im body Tag, damit der IE auch mittig ausrichten kann. Bei den andern Browser reicht {margin:0px auto}

 

[Patrick T.]

QUOTE (Antoine Johannes @ Mi 7.2.2007, 11:16) gaynau

QUOTE die CSS-Eigenschaft "align" gibt es nicht, du meintest eher "text-align"

und zwar im body Tag, damit der IE auch mittig ausrichten kann. Bei den andern Browser reicht {margin:0px auto}

Richtig. Blöde IE-Workarounds immer...

 

[muges]

In diesem Zusammenhang gleich noch 'ne Frage von mir: Es gibt viele gute Informationen zu XHTML/CSS, wie z.B. das genannte http://www.css4you.de/.

Ich suche nun gezielt nach einer Anleitung, wie ich ein fertiges Layout, das ich im PSP/Photoshop-Format, also als Grafik, vorliegen habe, nach (X)HTML/CSS umsetzen kann.

In Photoshop gibt es die Funktion, ein tabellenbasiertes Layout zu erstellen. Diese Funktion möchte ich aber nicht nutzen, weil das eine "Tabellenorgie" gibt. Ich möchte auf der Basis des vorhandenen Designs ein sauberes CSS-basiertes Layout erstellen.

Ich sehe aber im Moment den Weg nicht, wie ich das möglichst einfach hinkriege. Gibt es irgendwo ein schlaues Tutorial oder einen Artikel dazu? Oder Tipps und Anregungen von eurer Seite? Oder ist der einzige Weg wirklich der, alles von Hand neu zu erstellen?

Gruss
Sepp

 

[Antoine Johannes]

Na ja, Du kannst dir mal ein Raster aufziehen aus div. Dannach die Grafik zuschneiden und einpassen.
Da insbesondere der Müll aus Redmond unbrechenbar ist, ist das ziemlich aufwendigen.
In css4you gibt es die Abteilung positionieren, dort kannst sehen wie Du die Grafik einpassen kannst.
Ich schätze, dass ist ein halber bis ein ganzer Tag Arbeit, wenn Du es zum erstemal machst kann es sehr schnell länger gehen.
Wobei ich mir es mir nicht verkneife zu sagen:
Das Internet ist ein Medium zu Transport von Information und nicht von Grafik. Die Grafik dient nur der Kenntlichmachung der Information. Darum gibt es xhtml und xml.
gruss
Antoine

 

[muges]

Antoine, danke für deine Antwort. Ich stimme mit dir überein, was das Thema Information und Grafik betrifft. Darum will ich ja möglichst eine sauber mit XHTML strukturierte Seite erstellen, die optisch ansprechend sein soll (dazu die Grafiken), aber vor allem die Information (also den Text) verfügbar machen soll.

Eine div-Orgie anstelle einer tabellen-orgie ist auch nicht so eine tolle Lösung...

Als Softwareentwickler suche ich halt immer nach Lösungen, die sich so weit wie möglich automatisieren lassen, ist wohl so eine Art Berufskrankheit

Ich werde aber wahrscheinlich in diesem Fall nicht um die Handarbeit herumkommen. Gibt mir aber die Möglichkeit, mich etwas tiefer mit CSS zu befassen.

Gruss
Sepp

 

[Antoine Johannes]

Okay, eine Div Suppe ist übel. Ich persönlich neige zu Tabellen die mit CSS formatiert werden. Kommt auf das Projekt an. Wenn ein Layout mit Tabellen weniger KB hat als eines mit Div, stelle ich mir schon ketzerischen Fragen.
Ich meinen für 'Informations Design' xhtml und für 'grafisches Transnational html 4'.
Ausserdem gibt es die Möglichkeit des Bildes im Hintergrund, die wird bei allen 'fetten und geil' aussehenden Blogs verwendet. Du nimmst Deine Grafik und machst sie mit {background-image:url(pfad zu Grafik );} rein. Den Background kannst Du zentrieren.
Wenn Du den Künstler in Dir aufleben lassen willst, stehen z-index und transparenz zur Verfügung.
En guete
Antoine

 

[muges]

Ich habe hier ein Tutorial dazu gefunden, vielleicht nützt das noch jemandem:

From Photoshop to XHTML and CSS