mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 21:36 Benutzername: Passwort: Auto-Login

Thema: css, mehrspaltiges layout und angepasste höhen vom 29.12.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> css, mehrspaltiges layout und angepasste höhen
Autor Nachricht
bigdeal
Threadersteller

Dabei seit: 14.07.2005
Ort: Aßlar
Alter: 32
Geschlecht: Männlich
Verfasst Do 29.12.2005 10:48
Titel

css, mehrspaltiges layout und angepasste höhen

Antworten mit Zitat Zum Seitenanfang

Hi,
ich hab ein kleines Problem mit dem guten alten CSS =)

Ich habe ein Layout, welches aus Header und 3 Spalten besteht. Allerdings besitzen 2 dieser Spalten eine Hintergrundfarbe, die, egal wie lang die Spalten werden, unten abgeschlossen sein sollen.
(Zur besseren verdeutlichung, ich brauch genau ein normales Tabellenverhalten der 3 Spalten, also wie ein <tr><td><td><td></tr>).

Leider schaffe ich es nicht, die 3 Spalten passend zu verlängern, jemand eine Idee? Höhe darf nicht fest sein, da ich je nach Bedarf nach unten verlängern muss.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Do 29.12.2005 11:28
Titel

Antworten mit Zitat Zum Seitenanfang

evtl mal forumsuche benutzen, oder google. dann nach "faux column css" suchen …
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Matze66

Dabei seit: 27.12.2005
Ort: Roßdorf/Darmstadt
Alter: 50
Geschlecht: Männlich
Verfasst Do 29.12.2005 11:44
Titel

Re: css, mehrspaltiges layout und angepasste höhen

Antworten mit Zitat Zum Seitenanfang

bigdeal hat geschrieben:
Hi,
Leider schaffe ich es nicht, die 3 Spalten passend zu verlängern, jemand eine Idee? Höhe darf nicht fest sein, da ich je nach Bedarf nach unten verlängern muss.


Äh, ich kapier's noch nicht. Geht es jetzt um die Hintergrundfarbe oder die höhen der Spalten? Irgendwie stehe ich auf dem Schlauch. Hast Du den Quelltext oder eine URL zum angucken?
  View user's profile Private Nachricht senden
bigdeal
Threadersteller

Dabei seit: 14.07.2005
Ort: Aßlar
Alter: 32
Geschlecht: Männlich
Verfasst Do 29.12.2005 13:45
Titel

Antworten mit Zitat Zum Seitenanfang

beeviZ hat geschrieben:
evtl mal forumsuche benutzen, oder google. dann nach "faux column css" suchen …


Die Forumsuche brachte mich nicht weiter, aber jetzt weiss ich ja auch, nach was ich suchen muss, vielen dank =)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
internetkonzept

Dabei seit: 29.12.2005
Ort: Berlin
Alter: 45
Geschlecht: Männlich
Verfasst Do 29.12.2005 16:40
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn die Breite fest sein darf geht's relativ einfach.
Du baust um Deine drei Spalten einen DIV-Container mit einem passenden Hintergrundbild für Deine drei Spalten.
Bevor Du diesen Container schließt, setzt Du ein "Clear"-DIV, dass Dir den Container bis zum Ende der Seite verlängert.
Beispiel-HTML
Code:

<div id = "hauptcontainer">
    <div id = "linkeSpalte"></div>
    <div id = "mittlereSpalte"></div>
    <div id = "rechteSpalte"></div>
    <div class = "clear"></div>
</div>

CSS:
Code:

#hauptcontainer{
   width:900px;
   margin: 5px auto 0px auto;
   background: url("hintergrundbild.gif") repeat-y 50% 0px;
}

#linkeSpalte{
    position: relative;
    display: block;
    float: left;
    width: 200px;
}

#mittlereSpalte{
   float: left;
   width:500px;
}

#rechteSpalte{
    float: right;
    width: 200px;
}

.clear{
    clear: both;
    width: 0.1em;
    height: 0.1em;
    line-height: 0.1em;
    overflow: hidden;
}


Ist nur ein Beispiel und bei mir funktionierts ähnlich. Nur dass ich die rechte Spalte nicht überall benötige und das daher etwas anders handhabe.

Liebe Grüße

Alex
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 39
Geschlecht: Männlich
Verfasst Fr 30.12.2005 19:41
Titel

Antworten mit Zitat Zum Seitenanfang

Stefan Münz, der Autor von SelfHTML, hat jetzt ein neues Buch geschrieben.
Das heißt "Professionelle Websites" oder so ähnlich.
Eine PDF-Version davon ist kostenlos erhältlich.
In dem Buch wird irgendwo auch erklärt, wie man so ein dreispaltiges CSS-Design macht.
Da sind dazu auch Code-Beispiele.
Und das Problem mit den unterschiedlichen Höhen gibt es da natürlich auch.
Stefan Münz verwendet dort ein Javascript, um das Problem zu lösen.
Dort wird die Höhe der längsten Spalte ausgelesen und die anderen Spalten werden dann an diese Höhe angepasst.

Du könntest mal nach dem Buch googlen, es runterladen und dir dieses Script ansehen.
Vielleicht ist das ja genau das, was du braucht. Dann könntest du es einfach bei dir einbinden.
  View user's profile Private Nachricht senden
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 30.12.2005 20:06
Titel

Antworten mit Zitat Zum Seitenanfang

Das Javascript interessiert mich wohl .. insofern weil ichs grad
selber gesucht hab » <Professionelle Websites>: Download


Zuletzt bearbeitet von dastef am Fr 30.12.2005 20:16, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 39
Geschlecht: Männlich
Verfasst Fr 30.12.2005 23:27
Titel

[Info] Kostenloses Buch: Professionelle Websites

Antworten mit Zitat Zum Seitenanfang

Jep. Ist auch ein schönes Buch. Also jetzt mal ganz abgesehen von diesem kleinen Script. Da steht eine Menge nützliches Zeugs drin. Das Buch ist jetzt herausgekommen. Es stehen also zeitgemäße Sachen drin. Gerade auch einiges über CSS-Layouts.
Ich habe zwar noch nicht alles gelesen, sondern das meiste eher schnell überflogen, aber ich halte das Buch für wirklich gut. Auch gerade für Anfänger ist es sehr empfehlenswert.
Ich finde es auch klasse, daß die PDF-Version kostenlos erhältlich ist.

Für die Interessierten hier mal der Klappentext:
Zitat:
Das Web wird erwachsen und im Zuge dieser Entwicklung ändern sich auch die Anforderungen an professionelle Webauftritte. HTML hat seinen Irrweg einer Formatierungs- und Layoutierungssprache aufgegeben und ist wieder die Strukturierungssprache, als die es ursprünglich konzipiert war. Stattdessen ist es heute selbstverständlich, alle Angaben zu Formatierung und Layoutierung zentral in CSS zu notieren und in HTML einzubinden. Das vorliegende Buch zeigt konsequent den Weg weg von alten Gewohnheiten und hin zu modernem Webdesign, geprägt von sauberer Trennung zwischen Inhalt und Layout und konfrontiert mit Forderungen wie der nach Barrierefreiheit.

Professionelle Websites bestehen häufig auch aus dynamisch generierten und interaktiven Seiten. In manchen Fällen genügen dazu client-seitige Lösungen, die sich mit JavaScript in Verbindung mit dem Document Object Model (DOM) lösen lassen.

Weit wichtiger sind jedoch serverseitig dynamische Seiten. Dazu ist es erforderlich, die Serverseite zu verstehen und zu kennen. Die beliebteste Lösung dazu ist heute die so genannte LAMP-Konfiguration, bestehend aus Linux, Apache Webserver, MySQL und PHP. Genau diese Produkte, ihr Zusammenspiel und ihre Anwendungsmöglichkeiten werden im Buch ausführlich beschrieben.



Und wie ich gerade sehe, kann man von der Site auch die Listings aus dem Buch noch einzeln runterladen.
Ich habe da jetzt mal ins Inhaltsverzeichnis geschaut.
Unter "Buch-Listings" im "Kapitel 5: Seitenlayouts" findet man folgende Punkte:
# Portal-Layout: HTML
# Portal-Layout: CSS
# Portal-Layout: JavaScript
# Portal-Layout: Grafiken
Das müßten dann eigentlich die Files sein, die ich meinte. Die solltest du dir dann mal ansehen, wenn du das Script suchst. War eigentlich nur ein recht kleines und einfaches Script, wenn ich mich richtig erinnere.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [css] Frage zu dynamischen Höhen von DIVs
[CSS Layout] An Fenstergröße anpassendes Layout
Anpassen von div-höhen?
Div Höhen und Hintergründe.
css layout
CSS Layout
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.