Hier erkläre ich euch wie man ein Div-Layout coden kann. Hierzu benutze ich das Layout-Bild das ich in den Photoshop-Tutorials erstellt und bearbeitet habe. Dort wurde bereits eine HTML mit den einzelnen Sachen erstellt, die wir brauchen. Ich selber habe den Code noch ein wenig verändert, damit die unnötigen Codes nicht da sind.
<html>
<head>
<title>» Bite Me «</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<!-- Layout-Bild -->
<table width="760" height="520" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4"><img src="Bilder/bite_me_01.jpg" width="35" height="520"></td>
<td colspan="4"><img src="Bilder/bite_me_02.jpg" width="725" height="42"></td>
</tr>
<tr>
<td rowspan="2"><img src="Bilder/bite_me_03.jpg" width="351" height="434"></td>
<td><img src="Bilder/bite_me_04.jpg" width="22" height="158"></td>
<td><img src="Bilder/bite_me_05.jpg" width="107" height="158"></td>
<td><img src="Bilder/bite_me_06.jpg" width="245" height="158"></td>
</tr>
<tr>
<td colspan="3"><img src="Bilder/bite_me_07.jpg" width="374" height="276" border="0" usemap="#Map"></td>
</tr>
<tr>
<td colspan="4">
<img src="Bilder/bite_me_08.jpg" width="725" height="44"></td>
</tr>
</table>
<!--- Layout - Bild - ENDE --->
<!--- Maps >> Nicht entfernen!!! --->
<map name="Map">
<area shape="rect" coords="22,65,128,75" href="http://kleiner-schmetterling.net" target="_blank">
<area shape="rect" coords="22,53,128,63" href="http://hybridt-genesis.net" target="_blank">
</map>
<!--- Maps ende --->
</body>
</html>
Photoshop hat automatisch alle Margins auf 0 gesetzt, sodass das Layout regelrecht am Rand KLEBT. Wir wollen das Layout zentrieren, sodass es immer in der Browser-Mitte ist. Also stellen wir <center> vor den TABLE-Tag und schließen denselben nach dem Table-Tag! Jetzt wisst ihr wieso ich das Layout so zerschnitten habe, denn wenn man nun den Content in einem DIV positioniert hätte, wär er niemals zentriert gewesen. Man hätte das Layout also am linken Rand stehen lassen müssen.
Nun geht es an den Content. Dieser wird sich in der Tabelle befinden, da der ja als Bild vorhanden ist. Wir entfernen zunächst das Bild und stellen folgendes dort rein:
<div id="content">Hier kommt dein Inhalt hin!</div>
Mit ID definieren wir später in der CSS die restlichen Sachen, wie Größe etc.! Das gleiche machen wir nun noch mit der Navigation auch!
<div id="navi">Hier kommt dein Inhalt hin!</div>
Mit den Div-Layern sind wir also fertig, was fehlt sind die Formatierungen in CSS. Wir müssen also eine CSS-Datei in die HTML-Datei einbinden. Dies machen wir zwischen den HEAD-Tags:
<link rel="stylesheet" href="style.css" type="text/css">
Das wars dann auch schon in HTML. Ihr könnt nun die Div's mit Inhalt füllen und der Rest wird in CSS gemacht ;) War doch garnicht so schwer, oder? ^^ So sieht also das ganze dann in der fertigen HTML-Variante aus:
<html>
<head>
<title>» Bite Me «</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<!-- Layout-Bild -->
<center>
<table width="760" height="520" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4"><img src="Bilder/bite_me_01.jpg" width="35" height="520"></td>
<td colspan="4"><img src="Bilder/bite_me_02.jpg" width="725" height="42"></td>
</tr>
<tr>
<td rowspan="2" width="351" height="434">
<div id="content">Hier kommt dein Inhalt hin!</div>
</td>
<td><img src="Bilder/bite_me_04.jpg" width="22" height="158"></td>
<td width="107" height="158">
<div id="navi">Hier kommt dein Inhalt hin!</div>
</td>
<td><img src="Bilder/bite_me_06.jpg" width="245" height="158"></td>
</tr>
<tr>
<td colspan="3"><img src="Bilder/bite_me_07.jpg" width="374" height="276" border="0" usemap="#Map"></td>
</tr>
<tr>
<td colspan="4">
<img src="Bilder/bite_me_08.jpg" width="725" height="44"></td>
</tr>
</table>
</center>
<!--- Layout - Bild - ENDE --->
<!--- Maps >> Nicht entfernen!!! --->
<map name="Map">
<area shape="rect" coords="22,65,128,75" href="http://kleiner-schmetterling.net" target="_blank">
<area shape="rect" coords="22,53,128,63" href="http://hybridt-genesis.net" target="_blank">
</map>
<!--- Maps ende --->
</body>
</html>