Ergebnis 1 bis 4 von 4
  1. 23-07-2004, 13:11 #1
    Avatar von dipser
    dipser
    dipser ist offline Lounge-Member
    registriert
    23-06-2002
    Ort
    Osnabrück
    Beiträge
    673

    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>
...
    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
    Angehängte Grafiken Angehängte Grafiken
    Geändert von dipser (09-08-2004 um 10:15 Uhr)
    /join <nirvana>
    » Leidenschaftlicher Mozilla Firefox Nutzer ...nur Hühner und Schafe haben Angst vor Füchsen.
    Zitieren Zitieren
  2. 29-07-2004, 18:17 #2
    Avatar von bine
    bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    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
    Zitieren Zitieren
  3. 31-07-2004, 21:39 #3
    asdfasdfasdf
    asdfasdfasdf ist offline 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!
    Zitieren Zitieren
  4. 09-08-2004, 10:22 #4
    Avatar von dipser
    dipser
    dipser ist offline Lounge-Member
    registriert
    23-06-2002
    Ort
    Osnabrück
    Beiträge
    673

    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.
    /join <nirvana>
    » Leidenschaftlicher Mozilla Firefox Nutzer ...nur Hühner und Schafe haben Angst vor Füchsen.
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. modernes layout bei heise ....
    Von womstar im Forum Fun
    Antworten: 1
    Letzter Beitrag: 16-03-2004, 14:30
  2. tabellenfreies layout
    Von jsgreenhorn im Forum Allgemeines
    Antworten: 10
    Letzter Beitrag: 12-08-2003, 02:35
  3. Probleme Layout Anpassungen in JS Datenbank
    Von fjoerdman im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 02-11-2002, 11:25
  4. formular layout
    Von sanchez im Forum Allgemeines
    Antworten: 7
    Letzter Beitrag: 01-08-2002, 16:21
  5. link aus der navigation soll sich im layout öffnen
    Von snoox im Forum JavaScript
    Antworten: 13
    Letzter Beitrag: 14-06-2002, 00:07

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln