versuch13
Erfahrenes Mitglied
Ja, he Leute, bisher hab ich meine Layouts immer per tabellen realisiert. Nun dachte ich mir, langsam wird es doch mal Zeit dazu komplett auf CSS umzusteigen.
Jetzt hab ich mir hier mal ein Template erstellt und wollte nur mal hören ob das sauber gecodet ist ode vielleicht auch viel zu umständlich. Hier der Code:
vielen Dank im voraus.
MfG
Jetzt hab ich mir hier mal ein Template erstellt und wollte nur mal hören ob das sauber gecodet ist ode vielleicht auch viel zu umständlich. Hier der Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #666666;
margin:auto;
height:700px;
width:600px;
border-color: #000000;
border-style: solid;
border: 1px;
background-color: #FFFFFF;
}
.header {
background-color: #CCCCCC;
height: 100px;
}
.content {
height: 600px;
}
.nav {
padding-top: 6px;
padding-bottom: 4px;
background-color: #999999;
border-top: 1px solid black;
}
.left {
height: 100%;
width: 300px;
float: left;
background-color: #CCCCCC;
border-top: 1px solid black;
}
.right {
background-color: #CCCCCC;
width: 50%;
color: #FFFFFF;
float: left;
height: 100%;
border-top: 1px solid black;
}
.conleft {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
height: 250px;
width: 280px;
margin-left: 10px;
margin-top: 10px;
}
.conleft2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
height: 250px;
width: 280px;
margin-left: 10px;
}
.conright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
height: 250px;
width: 280px;
margin-left: 10px;
margin-top: 10px;
}
.conright2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
height: 250px;
width: 280px;
margin-left: 10px;
}
a.menu:link, a.menu:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-color: #999999;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
padding-right: 10px;
border-right: 1px solid black;
}
a.menu:hover, a.menu:visited {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="main">
<div class="header">Raum für den Inhalt des neuen Div-Tags</div>
<div class="nav"><a href="link1.htm" class="menu">LINK 1</a><a href="link2.htm" class="menu">LINK 2</a><a href="link3.htm" class="menu">LINK 3</a><a href="link4.htm" class="menu">LINK 4</a><a href="link5.htm" class="menu">LINK 5</a><a href="link6.htm" class="menu">LINK 6</a></div>
<div class="content">
<div class="left">
<div class="conleft">Raum für den Inhalt des neuen Div-Tags</div>
<div class="conleft2">Raum für den Inhalt des neuen Div-Tags</div>
</div>
<div class="right">
<div class="conright">Raum für den Inhalt des neuen Div-Tags</div>
<div class="conright2">Raum für den Inhalt des neuen Div-Tags</div>
</div>
</div>
</div>
</body>
</html>vielen Dank im voraus.
MfG
Zuletzt bearbeitet:
