| Autor |
Nachricht |
bigdeal
Threadersteller
Dabei seit: 14.07.2005
Ort: Aßlar
Alter: 40
Geschlecht: 
|
Verfasst Do 29.12.2005 11:48
Titel css, mehrspaltiges layout und angepasste höhen |
  |
|
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.
|
|
| |
   |
 |
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 29.12.2005 12:28
Titel
|
|
|
|
evtl mal forumsuche benutzen, oder google. dann nach "faux column css" suchen …
|
|
| |
|
|
|
Anzeige
|
|
|
Matze66
Dabei seit: 27.12.2005
Ort: Roßdorf/Darmstadt
Alter: 57
Geschlecht:
|
Verfasst Do 29.12.2005 12:44
Titel Re: css, mehrspaltiges layout und angepasste höhen |
|
|
| 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?
|
|
| |
|
|
bigdeal
Threadersteller
Dabei seit: 14.07.2005
Ort: Aßlar
Alter: 40
Geschlecht:
|
Verfasst Do 29.12.2005 14:45
Titel
|
|
|
| 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 =)
|
|
| |
|
|
internetkonzept
Dabei seit: 29.12.2005
Ort: Berlin
Alter: 53
Geschlecht:
|
Verfasst Do 29.12.2005 17:40
Titel
|
|
|
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
|
|
| |
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Fr 30.12.2005 20:41
Titel
|
|
|
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.
|
|
| |
|
|
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 30.12.2005 21:06
Titel
|
|
|
Das Javascript interessiert mich wohl .. insofern weil ichs grad
selber gesucht hab » <Professionelle Websites>: Download
Zuletzt bearbeitet von dastef am Fr 30.12.2005 21:16, insgesamt 1-mal bearbeitet
|
|
| |
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Sa 31.12.2005 00:27
Titel [Info] Kostenloses Buch: Professionelle Websites |
|
|
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.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Div Höhen und Hintergründe.
Anpassen von div-höhen?
[css] Frage zu dynamischen Höhen von DIVs
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
|
|
Willkommen auf dem Portal für Mediengestalter
