Immer noch konstruieren viele ihr HTML Design mit Tabellen.
Dabei gibt es längst eindeutige Empfehlungen, durch
barrierefreies HTML auch z. B: Blinden einen Zugang zu Webseiten zu eröffnen.
Tabellen Layouts machen das praktisch unmöglich
Wenn ein Layout gemacht werden soll, um Inhalte auf dem Bildschirm anzuordnen
kann das aber genauso gut über div - Tags erfolgen, die mit einem Style - Sheet angeordnet werden.
Ideal ist ein solches Prinzip, wenn man die Seiteninhalte mit php ohnehin aus einer Datenbank auslesen will
Hier findet ihr:
- eine kommentierte Beispielseite, die aussieht wie typisches Tabellen - Layout: layout.htm
- die kommentierte css - Datei dafür: div.css
Viel Spaß !
<html>
<!-- ################# Die Datei layout.htm ##############-->
<head>
<title>Layout mit div </title>
<!--Nicht vergessen, das Stylesheet mit korrektem Pfad hier einzubinden!
-->
<link rel="stylesheet" href="div.css" type="text/css">
<!--Nicht vergessen, das Stylesheet ,mit korrektem Pfad hier einzubinden!
-->
</head>
<body>
<div id="banner">
<!--Oben erscheint ein Banner, das bis zu 100px hoch ist und über die ganze Seitenbreite geht. Durch Änderung im stylesheet div.css kann sie höher oder flacher gemacht werden
Für das Banner sollte eine absolute Höhe in Pixeln angegeben werden
-->
<span style="text-align:center;line-height:80px;font-size:40px; letter-spacing:8.00pt;"> Platz für ein Riesenbanner</span>
</div>
<div id="navigation">
<!--Links erscheint eine Navigationsfläche, die 15% der Fensterbreite breit ist, bei Vollbild und einer Auflösung von 1024 Pixeln wären das 154 Pixel -->
<p id="link">Home</p>
<p id="link">Link 1</p>
<p id="link">Link 2</p>
<p id="link">Link 3</p>
</div>
<div id="inhalt">
<!-- Der größte Teil der Seite, 75% der Breite und die ganze Höhe abzüglich 100px des Banners steht jetzt für den Seiteninhalt zur Verfügung
ES empfiehlt sich, nur 90% der Bildschirmbreite zu verplanen, um zur erreichen, dass selbst bei kleineren Fenster Randabstände nicht zum Umbruch führen
-->
<h1>Die Überschrift</h1>
<p>Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text Der Text </p>
</div>
</body>
</html>
<!-- ################# Ende der layout.htm ##############-->
/* ######## Die Datei div.css ################*/
div
#banner
{
position: absolute;/*legt die Position von links oben aus fest */
top:0px;/*der Banner fängt ganz oben links an */
left:0px;/*ändert man hier, rückt der Banner nach rechts */
margin-top:0px; /* Überschreibt ggf. Standard-Ränder des Browsers*/
margin-left:0px;/* Überschreibt ggf. Standard-Ränder des Browsers*/
padding:2px; /*Innenabstand des Inhalts des banner-div von der Grenzlinie*/
width:100%;
height:100px; /*Höhe kann nur absolut festgelegt werden, z. B. in Pixel*/
}
#navigation
{
position: relative; /*Bestimmt die Postion vom übergeordneten Tag her*/
float:left; /*sorgt dafür, dass der div neu linksbündig nach dem banner -div anfängt*/
width:15%; /*relative Angaben passen sich der Fenstergröße an ..*/
padding:10px; /*Innenabstand des Inhalts des banner-div von der Grenzlinie */
background-color:#eeeeee;
}
#inhalt
{
position: relative;
width:80%;/*relative Angaben passen sich der Fenstergröße an ..*/
float:left; /*sorgt dafür, dass sich der Inhalt an die Navigation anschließt*/
padding:10px; /*Sonst kleben die einzelnen divs optisch aneinander*/
background-color:#eeeeff;
}
#link
{
/* Sorgt für die Abstände und Formatierung der einzelnen Links*/
margin:10px;
height:30px;
text-align: left;
vertical-align: middle;
}
/* ################# Ende der div.css ##################*/