Wie mehrspalte Webseite erstellen ohne Tabelle?

Hallo.

Auf vielen Internetseiten ist ja rechts eine spalte nur werbung, dann in der Mitte eben der wirkliche Webseiteninhalt mit Text und Bild, und dann rechts wieder eine reiner Werbebalken.
Daher würde ich da sagen wäre ja eine Tabelle mit drei spalten die einfachste Variante.

Bei anderen Internetseiten ist ja so das eine Webseite Links eine Navigation on, bsp, steht oben "über uns", drunter "Unternehmensaufgabe" wieder drunter"Kontakt" usw.
Auch das würde ich sagen wäre mit Tabellen leicht umzusetzen.

Nur heutzutage lese ich ja schon das manche Firmen wert auf tabellenlose Seiten legen.

Mich würde mal interessieren wie solche Seiten aufgebaut werden.

Ich weiß das es mit CSS miithilfe der Positionierung gemacht werden kann. Da gibts ja absolute, relative Positionierung usw. Nur da wird ja meisten angegen relative Positonierung 30% usw.
Nur ich frag mich wie kann man das wissen bei welcher Prozentsatz, beispielsweise der Mittlere Teil in der Mitte steht, sodass der linke Teil ganz platz hat, aber auhc nicht zu viel Abstand zum linken Text ist.

Müssen die Webdesigner das echt manuell mithilfe dieser Css Positionierung erstellen, oder haben diese Programme mit denen man das ganz einfach machen kann?

Wäre euch dankbar wenn ihr mir antworten würdet.

liebe grüße Donna

 

Hi,

wie du schon richtig erwähnt hast, wird die Positionierung und auch das meiste der restlichen Gestaltung einer Seite mittels CSS gelöst. Tabellen sind nicht dafür gedacht komplette Seiten gestalterisch auf ihnen aufzubauen.

Man kann mittels CSS auch an die Benutzerauflösung angepasste Layouts erstellen, jedoch gibt es da soviel zu beachten dass das hier einfach den Rahmen sprengen würde. Dabei geht es dann nämlich darum fixe (also feste) Elemente mit absoluten (also flexiblen) Elternelementen zu kombinieren (oder umgekehrt). Oder man gestaltet alles flexibel.

So hat man z.B. die Möglichkeit eine Seite flexibel an den Monitor anzupassen (Hauptcontainer 100%), dann positioniert man darin 3 weitere Container. Links(20%), Mitte(60%), Rechts(20%). Damit hat man mit den 3 Spalten dann wieder ein 100% breites Layout.

Der knifflige Teil ist es die einzelnen Elemente in dem jeweiligen Container einzupassen. Hier kann man ebenfalls mit prozentualen Werten (auch bei Schriftarten) arbeiten. Die Positionierung der einzelnen Elemente innerhalb der Container erfolgt dann separat, nach einem eigenen Schema. Hier könnte man z.B. den Text linksbündig ausrichten (text-align:left), oder mittels margin-left: 10px dafür Sorgen, das sich der Inhalt immer 10 Pixel vom linken Rand "fern hält".

Es gibt noch tausende weiterer Möglichkeiten, die ich dir hier nicht alle aufzählen kann, da es wie gesagt den Rahmen sprengt. Falls du dich intensiver damit befassen möchtest oder musst, so kann ich dir 2 (meiner Meinung nach) richtig gute Bücher ans Herz legen. Buch1 und Buch2 Die sind zwar beide nicht "billig", aber jeden Cent wert den sie kosten.

 

Der knifflige Teil ist, variablen Inhalt in nebeneinander liegenden Layern auf die selbe Höhe zu bringen. So lange es dafür keine Javascript unabhängige Lösung gibt, bleiben Tabellen bei seitenumschlossenen Designs erste Wahl.

 

Wieso sollte sich das nicht ohne JS lösen lassen ?

Wenn ich den Inhalt on-Top in jedem Layer ausrichte, dann ist der doch bei allen 3 Layern auf der selben Höhe. Sollte ein Layer von den dreien sagen wir fiktiv 100 px niedriger sein, also unter den anderen beiden anfangen, dann richte ich den Inhalt dieses Layers on-Top aus und gebe bei den anderen beiden Layern, bei der on-Top Ausrichtung jeweils 100px hinzu. Schon ist der Inhalt wieder auf der gleichen Höhe. Um es jetzt mal ganz vereinfacht auszudrücken... ...oder verstehe ich dein Anliegen dahinter jetzt komplett falsch ?

 

Jaein. Es geht nicht um die Ausrichtung des Textes. Hinterlege jeden Layer mal mit einer anderen Hintergrundfarbe oder einem Rand und ändere nun die Länge des Textes (wie das ja bei jeder datenbankgenerierten Seite vorkommt) in einem Layer, bis dieser über die Höhe eines anderen läuft. Dann fällt dir bestimmt auf, was ich meine.

 

http://nopaste.info/c14a64e3e5.html

irgendwie seh ich da kein problem ....

 

Das war der einfache Teil. Nun sorge dafür, dass alle Farben auf der selben Höhe enden.

 

http://nopaste.info/533099b26c.html

Hat was gedauert, aber ich denk das sollte in etwa das sein was du meintest oder ?

Edit: URL geändert (Grund: Punktfehler im CSS Code)

 

Sorry für den Doppelpost, aber ich kann den letzten Beitrag nicht mehr editieren.

Ich sehe gerade der hat oben schon wieder /immer noch die falsche URL drin stehen.

Hier die richtige: http://nopaste.info/2fb927b8a1.html

Eventuell kann das ja ein Mod korregieren und diesen Beitrag dann löschen.

 

Ich auch nicht.