Webseite zeigen oft Inhalte in mehreren Spalten (like a magazine or newspaper) .
city Gallery
Paris
Tokio
London
London ist die Hauptstadt von England. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, mit einem Großraum von mehr als 13 Millionen Einwohnern.
Stehend auf der Themse, London wurde von den Römern eine große Siedlung für zwei Jahrtausende, seine Geschichte zu ihrer Gründung geht zurück, die es Londinium benannt.
HTML - Layout verwenden <div> Elemente
Das <div> Element wird oft als Layout - Tool verwendet, da es leicht mit CSS positioniert werden kann.
In diesem Beispiel wird vier <div> Elemente eines mehr Spalten - Layout zu erstellen:
Beispiel
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Copyright © w3ii.com
</div>
</body> Versuch es selber " Die CSS:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>Website Layout mit HTML5
HTML5 bietet neue semantische Elemente, die verschiedenen Teile einer Webseite zu definieren:
 |
|
In diesem Beispiel wird <header> , <nav> , <section> und <footer> ein mehr Spalten - Layout zu erstellen:
Beispiel
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<section>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</section>
<footer>
Copyright © w3ii.com
</footer>
</body> Versuch es selber " Die CSS:
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>HTML Layout Verwenden von Tabellen
Das <table> Element wurde nicht als Layout - Tool entwickelt.
Der Zweck des <table> Element ist tabellarische Daten anzuzeigen.
Layout kann das erreicht mit <table> Element, da Tabellenelemente können mit CSS gestylt werden:
Beispiel
<body>
<table class="lamp">
<tr>
<th>
<img src="../images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body> Versuch es selber " Die CSS:
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>Achtung: Erstellen von Layouts mit Tabellen ist nicht falsch, aber es ist nicht zu empfehlen! Vermeiden Sie Tabellen für die Erstellung von Layout.