Ergebnis 1 bis 4 von 4
Thema: Zweispaltiges Layout
-
23-07-2004, 13:11 #1
Zweispaltiges Layout
Also ich möchte euch eine Variante vorstellen, wie es möglich ist, ein zweispaltiges Layout zu erstellen, mit 2 gleichlangen Seiten.
Üblicherweise benötigt man zunächst einen Text, wenn man sich eine HTML-Seite schreiben möchte, daher ist folgendes eigentlich recht Sinnfreier Text. Also man benötigt zunächst, das HTML-Gerüst mit Bereichszusammenfassenden div-Elementen.
Code:... <body> <div id="both"> <div id="navigation"> <ul> <li><a ...>Startseite</a></li> <li><a ...>Impressum</a></li> </ul> </div> <div id="content"> <h1>Überschrift</h1> <p>Man könnte hier <abbr title="zum Beispiel">z.B.</abbr> seinen 1. Paragrafen starten. </p> </div> </div> </body> ...
Nun können wir uns dem kahlen HTML-Gerüst, mit Hilfe von CSS und einem Bild entledigen. Dazu erstellen wir erst einmal ein Bild mit der Breite der Seite und machen dies als Hintergrundbild für die ID "both" und lassen das Bild vertikal wiederholen.
Code:#both { width:500px; background:url(hintergrund.png) repeat-y; }
Code:#navigation { width:150px; float:right; }
Code:#content { width:350px; }
Daher ist es sehr nützlich am Ende des div-Elementes (both) noch folgendes zu schreiben: <br style="clear:both;"/>, damit wird das Umfließen beendet.
Viel SpassGeändert von dipser (09-08-2004 um 10:15 Uhr)
-
29-07-2004, 18:17 #2
AW: Zweispaltiges Layout
Das soll doch 2-spaltig nebeneinander oder?
also links oben die Überschrift mit dem darunter folgenden Content und rechts daneben die Navi egal wie lang.
Sowie ich das aber schreibe:
#content {
#width:350px;
}
rutscht der Überschriftsteil in der Spalte tiefer als die Navi??
Sitzt das clear:both richtig direkt vor dem /div Schliessungstag innerhalb des both divs?bine
-
31-07-2004, 21:39 #3
Grünschnabel
- registriert
- 31-07-2004
- Beiträge
- 1
AW: Zweispaltiges Layout
besser wäre auch folgendes:
oder sagen wir mal korrigiert:
Code:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- #both { width:500px; background:url(hintergrund.png) repeat-x; } #navigation { width:150px; float:left; } #content { width:350px; float:right; } LI { DISPLAY: block; } --> </style> </head> <body> <div id="both"> <div id="navigation"> <ul> <li><a href="index.php">Startseite</a></li> <li><a href="index.php">Impressum</a></li> </ul> </div> <div id="content"> <h1>Überschrift</h1> <p>Man könnte hier <abbr title="zum Beispiel">z.B.</abbr> seinen 1. Paragrafen starten. </p> </div> <br style="clear:both;"/> </div> </body> </html>
aber danke für das Tut - nun kann ich es auch!
-
09-08-2004, 10:22 #4
AW: Zweispaltiges Layout
@bine, ich habe das Tutorial mal korrigiert.
- Die 2. Raute ist natürlich schwachsinnig, muss ich beim Tippen ausversehen angestoßen haben.
@asdfasdfasdf, das geht so auch nicht, müsstest schon repeat-y nehmen, aber ich denke, dass Prinzip ist verstanden worden.
Genau nach dem Muster läuft es auch mit einem 3-spaltigem Layout. Es gibt natürlich beim 3-spaltigen Layout 2 Varianten die mir einfallen.
Ähnliche Themen
-
modernes layout bei heise ....
Von womstar im Forum FunAntworten: 1Letzter Beitrag: 16-03-2004, 14:30 -
tabellenfreies layout
Von jsgreenhorn im Forum AllgemeinesAntworten: 10Letzter Beitrag: 12-08-2003, 02:35 -
Probleme Layout Anpassungen in JS Datenbank
Von fjoerdman im Forum JavaScriptAntworten: 3Letzter Beitrag: 02-11-2002, 11:25 -
formular layout
Von sanchez im Forum AllgemeinesAntworten: 7Letzter Beitrag: 01-08-2002, 16:21 -
link aus der navigation soll sich im layout öffnen
Von snoox im Forum JavaScriptAntworten: 13Letzter Beitrag: 14-06-2002, 00:07
Lesezeichen