• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Zweispaltiges Layout

dipser

dipser

Lounge-Member
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>
...

Mit diesem Quelltext hätte man schon alles, was man benötigt um ein anständiges zweiseitiges Layout erstellen zu können.
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;
}

Als nächstes müssen wir die Navigation an den rechten Rand in gleicher Höhe, wie das Inhaltsfeld bringen.

Code: 
#navigation {
	width:150px;
	float:right;
}

Nun müssen wir noch das Inhaltsfeld etwas in der Breite auf 350 Pixel beschneiden.

Code: 
#content {
	width:350px;
}

Als letzen Schritt müssen wir noch eine Kleinigkeit berücksichtigen, denn wenn einmal die Navigation länger als das Inhaltsfeld ist, zieht sich das zweispaltige Layout nicht mit, sondern die Navigation fließt drüber.
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 Spass
 

Anhänge

  • hintergrund.png
    hintergrund.png
    828 Bytes · Aufrufe: 211
Zuletzt bearbeitet:
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?
 
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!
 
@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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben