Layouten ganz einfach! [TEIL 1] & [TEIL 2]

[rendita]

Hallo,
meiner meinung nach finde ich das ganze irgendwie kompliziert und bedanke mich dafür.

[rendita]

Hallo,
ich muss schon zugeben, dass das sehr gut gelungen ist deine Arbeit. Es muss dir wohl viel Mühe gekostet haben um sowas anzufertigen.

[Lachsmaus]

Eine Frage
ich zentriere meine divs immer mit margin auto
vermehrt finde ich den code
position: absolut;
right 50%;
left 50%;
beides führ zum gleichen Ergebnis. Welche Lösung ist zu bevorzugen?
Danke vorab für eine Antwort

[AnnaStesia]

^ Kommt drauf an…

Generell ist margin: auto; aber durchaus die krisensichere Variante. Position: absolute; zu vermeiden, wo's geht, ist ebenfalls nicht die schlechteste Strategie. Meist ist die left: 50%; Variante ja auch noch mit negativem margin-left gekoppelt, was das Element bei zu kleinem Viewport verschwinden lässt. Das heisst aber nicht, dass sie grundsätzlich schlechter ist, es gibt auch sinnvolle Einsatzmöglichkeiten dafür.

[Lachsmaus]

Ich bedanke mich für die klare Antwort, hilft mir als Anfänger sehr!

[Peter]

^ Kommt drauf an…
was das Element bei zu kleinem Viewport verschwinden lässt.

Musste einige Webseiten umbauen deswegen, weil das auf Mobil-Phones nicht mehr navigierbar war.

[anja-achtstein]

Vorwort

Hallo und herzlich willkommen zum zweiten Teil meines Tutorials "Layouten ganz einfach!" Wer sich den ersten Teil aufmerksam durchgelesen hat sollte nun in der Lage sein, ein zentriertes Layout das sich immer in der Mitte des Bildschirms positioniert, zu erstellen. Für den zweiten Teil setze ich eigentlich nur den ersten Teil voraus. Wir werden uns nochmals das Boxmodell im Bezug auf das Attribut Border anschauen und des weiteren werden wir eine Navigation erstellen, welche ja auf keiner Homepage fehlen sollte. Natürlich gibt es in CSS noch viele weitere Attribute von denen ich euch hier noch einige weitere vorstellen werde. Was ich im Bezug auf das Programmieren mit CSS für sehr wichtig halte ist, das Sheet so klein und übersichtlich wie möglich zu halten. Mir ist nämlich des öfteren aufgefallen das sich grundlegende Probleme, in der Anwendung von CSS, auf zugemüllte Sheets zurückzuführen sind, was soviel bedeutet, das in so einem Fall unnötig mit Selektoren und Attributen jongliert wird. Wer Selektoren und Attribute gezielt und bewusst einsetzt hat nachher auch weniger Probleme, nicht nur mit den verschiedenen Browsern sonder auch mit der Übersicht des Sheets.

Im ersten Teil von "Layouten ganz einfach" habe ich krurz beschrieben was HTML ist und für unser Layout auch ein HTML - Doctype verwendet. An dieser Stelle möchte ich noch kurz auf XHTML eingehen, welches wir dann auch in unserem Layout anwenden werden.

Lange Rede, kurzer Sinn und los geht´s.

XHTML (Extensible Hypertext Markup Language)

XHTML ist W3C-Standart und bedeutet soviel wie erweiterbares HTML. Es ist eine textbasierte Auszeichnungsprache zur Darstellung von Inhalten wie Texten, Bilder und Hyperlinks. Mit XHTML wurde HTML 4 in XML 1.0 neu definiert. Einfach gesagt XHTML ist eine neue Version von HTML. Was ist nun für uns wichtig wenn wir mit XHTML arbeiten wollen.
1. Die Gross- und Kleinschreibung wird in XML nicht ignoriert, daher sollten bei XHTML alle Tag-Namen klein geschrieben werden. Also so <b></b> und nicht so <B></B>.
2. Tags ohne Inhalt sollten in XHTML unbediengt geschlossen werden oder mit einem leeren Element-Tag versehen werden. Z. B. so <br></br> oder bevorzugt aus Gründen der Kompatibilität so <br />.
3. In HTML ist das weglassen von End-Tags noch teilweise erlaubt. In XHTML sollte man immer beide (Start- und End-Tag) angeben.
4. Boolesche Attribute, Attributname als Attributwert angeben wie z. B. <input type="radio" checked="checked" />

Es gibt noch mehr Wissenswertes über XHTML. Aber das würde den Rahmen dieses Tutorials sprengen. Mehr Information über XHTML findet ihr bei SELFHTML .

Wer auch hier ein Strict Doctype wählt lernt besser CSS.

CSS

In diesem Tutorial werden wir uns noch einige wichtige Attribute zur Positionierung und Gestaltung des Layouts ansehen. Als Grundlage dafür nehmen wir das Layout aus Teil 1.
Aber zuvor noch zwei kleine Übungen um etwas Routine zu gewinnen.

1. Nimm Papier und Stift zur Hand und schau dir folgenden Quelltext an. Nun versuch mal zu zeichnen wie dieses im Fenster eines Browsers aussehen könnte. Ihr müsst kein Kunstwerk daraus machen lediglich eine kleine Skizze. Um zu prüfen ob ihr richtig gezeichnet habt findet ihr im Anhang ein Bild von dem Script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zeichnen</title>
</head>
<style type="text/css">
* { margin:0; padding:0; }

#wrap {
  height:300px;
  width:300px;
  overflow:auto;
  }

#ol {
  float:left;
  height:150px;
  width:150px;
  background-color:#99cc00;
  }
  
#or {
  float:right;
  height:150px;
  width:150px;
  background-color:#0099cc;
  }  
  
#ul {
  float:left;
  height:150px;
  width:150px;
  background-color:#0099cc;
  }
  
#ur {
  float:right;
  height:150px;
  width:150px;
  background-color:#99cc00;
  }
  
#inol {
  height:75px;
  width:75px;
  margin:35.50px 35.50px;
  background-color:#0099cc;
  }  
      
</style>
<body>

<div id="wrap">

  <div id="ol">
    <div id="inol"></div>
  </div>
  <div id="or"></div>
  <div id="ul"></div>
  <div id="ur"></div>  	
  
</div>

</body>
</html>

2. Baue die folgende Figur nach. Welche Höhen, Breiten oder Farben verwendet werden, spielt keine Rolle solange das Endprodukt das Selbe ist. Es kann aber auch das Sheet aus der ersten Übung als Grundlage verwendet werden.

Nun kommen wir aber zu dem Attribut border, das wie margin und paddin ebenfalls eine sehr wichtige Rolle des Boxmodells spielt. Aber vorher nochmal der Quelltext des Layouts (Vorsicht: dieses mal in einer XHTML-Strict Version.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layouten ganz einfach!</title>
<style type="text/css">
* {margin:0; padding:0;}

html {
  height:100%;
  font-size:100.01%;
  }

body {
  width:100%;
  display:block;
  background-color:#ffffff;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:1em;
  }  
  
#container {
  width:960px;
  margin:0 auto;
  overflow:auto;
  }
  
#header {
  width:960px;
  height:100px;
  background-color:#ffffcc;
  }
  
#topnavi {
  width:960px;
  height:25px;
  background-color:#ff9900;
  }
  
#menue_links {
  float:left;
  width:200px;
  background-color:#ffffcc;
  }
  
#menue_rechts {
  float:right;
  width:200px;
  background-color:#ffffcc;
  }
  
#content {
  overflow:auto;
  background-color:#f7f7f7;
  }
  
#footer {  
  width:960px;
  height:25px;
  background-color:#ff9900;
  }
                
</style>
</head>

<body>

<!--beginn container-->
<div id="container">

  <div id="header">Header</div><!--end header-->
  <div id="topnavi">Topnavi</div><!--end topnavi-->
  <div id="menue_links">Menü links</div><!--end menue_links-->
  <div id="menue_rechts">Menü rechts</div><!--end menue_rechts-->
  <div id="content">Content</div><!--end content-->
  <div id="footer">Footer</div><!--end footer-->

</div><!--end container-->

</body>
</html>

Nun basteln wir mal einen Rahmen um den #header. Das machen wir mit dem Attribut border , dann braucht der Rahmen noch eine Breite, eine Art und eine Farbe und das in dieser Reihenfolge. Die Deklaration sieht dann z. B. so aus: { border:10px solid #000000; }. Mit solid teilen wir CSS mit das der Rahmen eine durchgezogenen Linie sein soll. Es gibt verschiedene Arten einen Rahmen zu gestalten. Hier eine kleine Übersicht.

1. none -> kein Rahmen
2. dotted -> gepunktet
3. dashed -> gestrichelt
4. solid -> durchgezogen
5. double -> doppelt durchgezogen
6. groove -> 3D-Effekt
7. ridge -> 3D-Effekt
8. inset -> 3D-Effekt
9. outset -> 3D-Effekt

Ich habe hier einen extra breiten Rahmen zur besseren Darstellung gewählt. In der Praxis ist ein 10px breiter Rahmen eher selten der Fall, aber das ist letzten Endes Geschmacksache. Nun sehen wir das hier irgendetwas mit dem Rahmen nicht stimmt, denn er steht auf der rechten Seite über. Das liegt daran das links und rechts sowie oben und unten vom Element #header 10px mehr vorhanden sind, was soviel bedeutet das horizontal sowie vertikal insgesamt 20px mehr vorhanden sind. Wenn wir nun dem header in Höhe und Breite 20px abziehen dann passt es wieder nur diesmal mit einem Rahmen. Das Selbe probieren wir nun einmal im #content aus. Wir setzen auch hier ein border von 10px und siehe da, komischerweise wird hier nichts verschoben, denn der Rahmen wächst im Element nach innen. Die Antwort ist ganz einfach. Für den #content haben wir ja schon ein overflow:auto definiert damit die Schrift nicht über die Box hinauswächst und genau das Selbe passiert nun mit dem Rahmen. Denn mit dem Attribut overflow etablieren wir einen eigenständigen Bereich, der seine Inhalte unabhängig von der Umgebung einschliesst.

Nun ist aber gut mit Boxmodell, kommen wir nun zur Navigation. Dazu brauchen wir zuerstmal eine Liste im Topnavi Div. Das ganze könnte dann folgendermassen aussehen.

<div id="topnavi">
<ul id="tp_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div><!--end topnavi-->

Wer sich das nun im Browser anschaut wird feststellen das dies alles andere als eine Topnavigation ist. Um nun auf die Liste mittels CSS zuzugreifen brauchen wir den Selektor ul#tp_nav, mit dem wir CSS mitteilen das wir auf die Liste mit der Identität tp_nav zugreifen wollen. Um nun die Auflistungspunkte der einzelnen Listenpunkte zu entfernen benutzt man list-style-type welchem wir den Wert "none" zuweisen und dann sollten wir die Liste noch mit text-align und dem Wert "center" mittig vom Div platzieren. Nun müssen wir auf die einzelnen Listenpunkte zugreifen um diese in eine Reihe zu bekommen. Dazu verwenden wir den Selektor ul#tp_nav li und geben das Attribut display mit dem Wert "inline" an, dann das ganze noch left floaten (nicht vergessen zu clearen) und nun den einzelnen Listenpunkten noch eine Breite verpassen. Das Div "topnavi" hat eine Breite von 960px und wir haben 5 Listenpunkte, demnach eine einfache Rechnung. 960px geteilt durch 5 Listenpunkte ergibt 192px Breite für jeden Listenpunkt und nun befindet sich die Liste mittig im Div. Um nun auch wirklich noch einen Link aus der ganzen Geschichte zu machen, braucht ihr in HTML noch einenVerweis.

ul#tp_nav {
  list-style-type:none;
  text-align:center;
  overflow:auto;
  }  

ul#tp_nav li {
  display:inline;
  float:left;
  width:192px;
  }

Noch eine kleiner Hinweis. Der IE sollte bis zur Version 6 ein Problem mit overflow:auto haben. Wer sich einmal näher mit Browsern auseinandersetzt wird schnell feststellen das der IE Sonderansprüche stellt, welche man z. B. mit Browserweichen oder einem Crack beheben könnte. Das ist aber ein anderes Kapitel. Eine schnelle Lösung für unser Layout im IE6 ist, das #content mit einer Breite von 554px zu deklarieren, fertig. Eigentlich müssten es ja 560px sein, aber auch hier hat der IE6 Sonderwünsche. Aber Vorsicht. Solltet ihr mit border oder margin im #content arbeiten ändert sich der Wert der Breite wieder.

Nun zum Ende des Zweiten Teil des Tutorials nochmal der Vollständigkeit halber, das ganze Sheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layouten ganz einfach</title>
<style type="text/css">
* {margin:0; padding:0;}

html {
  height:100%;
  font-size:100.01%;
  }

body {
  width:100%;
  display:block;
  background-color:#ffffff;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:1em;
  }  
  
#container {
  width:960px;
  margin:0 auto;
  background-color:#ffffcc;
  }
  
#header {
  width:940px;
  height:80px;
  background-color:#ffffcc;
  }
  
#topnavi {
  width:960px;
  height:25px;
  background-color:#ff9900;
  }
  
ul#tp_nav {
  list-style-type:none;
  text-align:center;
  overflow:auto;
  }  

ul#tp_nav li {
  display:inline;
  float:left;
  width:192px;
  }
  
#menue_links {
  float:left;
  width:200px;
  background-color:#ffffcc;
  }
  
#menue_rechts {
  float:right;
  width:200px;
  background-color:#ffffcc;
  }
    
#content {
  overflow:auto;
  width:554px;
  background-color:#f7f7f7;
  }
  
#footer {
  width:960px;
  height:25px;
  background-color:#ff9900;
  }
                
</style>
</head>

<body>

<!--beginn container-->
<div id="container">

  <div id="header">Header</div><!--end header-->
  
  <div id="topnavi">
    <ul id="tp_nav">
	  <li>Link 1</li>
	  <li>Link 2</li>
	  <li>Link 3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
	</ul>  
  </div><!--end topnavi-->
  
  <div id="menue_links">Menü links</div><!--end menue_links-->
  <div id="menue_rechts">Menü rechts</div><!--end menue_rechts-->
  <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc non nulla eu tortor volutpat pretium. Maecenas vehicula porttitor erat. Cras lacinia dolor. Duis sem enim, placerat eget, elementum id, dignissim id, turpis. Suspendisse ut risus id nibh malesuada tincidunt. Praesent ut felis. Integer dapibus. Nulla et libero. Etiam id nisi sed neque tristique consequat. Sed nisl. Proin consectetuer facilisis erat. Mauris vitae leo imperdiet justo scelerisque dictum. Morbi porta. Nulla semper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Proin tellus turpis, fermentum a, sagittis et, consequat non, felis. Maecenas tincidunt tempor lorem. Proin adipiscing, lectus a elementum porta, dui elit ultricies lorem, a convallis leo arcu ultricies erat. Suspendisse in nisi in mauris rhoncus pellentesque. Integer aliquet, odio eu cursus scelerisque, ante urna pellentesque dui, vitae lobortis nunc mauris id orci. Cras interdum, magna vitae cursus sagittis, odio nisl rhoncus massa, eget imperdiet sem nibh non enim. Nullam molestie, odio at luctus eleifend, augue augue auctor elit, at interdum felis diam quis tellus. Fusce dui felis, ultricies id, vulputate in, consectetuer et, justo. Proin a nunc in leo dignissim scelerisque. Suspendisse neque mauris, vulputate eget, placerat et, malesuada ac, libero. Etiam fermentum, mi id adipiscing rhoncus, ante justo elementum dolor, vel tempus lorem dui eget augue. Nam dictum mauris non sem. Maecenas gravida. Morbi porttitor dignissim metus. Donec ac magna.

Quisque tincidunt. Proin tempor consectetuer lorem. Pellentesque eleifend lacus vitae felis. Curabitur at pede quis nisi ornare fermentum. Nunc mauris. Morbi faucibus. Etiam ipsum ligula, sodales eget, consectetuer non, ullamcorper at, leo. Quisque pellentesque dolor. Cras sed pede. Fusce erat. Nullam feugiat pulvinar arcu. Phasellus at quam. Quisque dignissim nisl eleifend ligula. Donec a lacus. Phasellus feugiat. Sed quam diam, tempus nec, mattis in, pellentesque quis, risus. Vestibulum laoreet luctus turpis. Fusce non erat a massa fringilla molestie. Vestibulum elementum, nunc et fringilla ultrices, eros sapien commodo massa, quis rhoncus odio nibh eu purus.</div><!--end content-->
  <div id="footer">Footer</div><!--end footer-->

</div><!--end container-->

</body>
</html>

Ich wünsche euch noch viel Spass mit eurer Homepage. Bis zum nächsten Tutorial.

nix verstanden