Hi,
Zitat:Mein Problem ist, wie funktioniert das ganze?
...das wird nicht dein einzigstes Problem bleiben. Gerade bei rein CSS basierten Layouts lernst Du die Browser erstmal kennen - und zwar in dem Punkt wie die CSS (teilw. verschieden) interpretieren.
Zitat:Steht in der css nur das Layout?
... die Anweisungen wie es aussehen soll.
Zitat:wo kommt dann der Inhalt.
...nach wie vor in der Seite selbst. Nur sollen da möglichst keine Tabellen für das Layout genommen werden sondern Div Container, oder HTML Codes für Listen, Überschriften usw.
Guck Dir mal das einfache Beispiel an:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS-Beispiel</title>
<style type="text/css">
body, html {
background-color: #f7f7f7;
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
margin: 0;
padding: 0;
}
.header {
border-top: 2px dashed black;
border-bottom: 5px double red;
background-color: #ffcc00;
padding: 5px;
margin: 5px 0px 15px 0px;
}
.menue {
border-right: 1px dashed black;
background-color: #fdf8d9;
padding: 5px;
width: 160px;
float: left;
}
.menue a {
display: block;
background-color: #ffffff;
border-bottom: 1px solid #000000;
margin-bottom: 2px;
padding: 3px;
color: #000000;
}
.menue a:hover {
background-color: #339900;
border-bottom: 1px solid #000000;
margin-bottom: 2px;
padding: 3px;
color: #ffffff;
}
.content {
margin-left: 180px;
}
</style>
</head>
<body>
<div class="header">Der Kopf der Seite, evtl mit Logo oder Banner</div>
<div class="menue">
<a href="#">Beispiellink 1</a>
<a href="#">Beispiellink 1</a>
<a href="#">Beispiellink 1</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam faucibus elementum eros. In molestie sollicitudin diam. Sed ultrices rhoncus neque. Vestibulum sodales, tellus eu porta pulvinar, felis dui rutrum enim, vel dapibus sapien pede nec elit. Nullam ante urna, rhoncus vel, fringilla sit amet, tincidunt a, velit. Vivamus sit amet enim et tortor semper ultrices. Integer sit amet nisi. Etiam nisl. Mauris fermentum consequat mauris. Nulla purus tellus, posuere a, imperdiet eu, convallis et, augue. Sed semper, augue quis viverra sodales, lacus mauris interdum felis, id dictum neque nisi in neque.
<p>Ut porta, metus ut vulputate condimentum, lacus nunc viverra sem, ac pellentesque neque velit ac ligula. Curabitur augue nisl, hendrerit sit amet, laoreet non, volutpat id, metus. Fusce pulvinar augue nec turpis. Duis vel magna. Suspendisse potenti. Fusce auctor augue sit amet turpis. Aenean pharetra aliquet mi. Nam nisl. Proin tincidunt lectus. Vivamus vitae metus. Duis fringilla sodales nisl. Vivamus commodo ligula quis sapien.
</p>
<p>Donec vitae elit ut lorem rhoncus semper. Integer lectus elit, porttitor at, varius vel, ullamcorper eu, ligula. Proin at lorem. Aenean gravida convallis mauris. Sed ultricies. Fusce interdum turpis sit amet magna. In hac habitasse platea dictumst. Curabitur sit amet metus at magna pretium commodo. Morbi feugiat, nisl eu porta imperdiet, sem velit molestie diam, vitae pharetra velit sapien a augue. Fusce gravida. Aliquam erat volutpat. Phasellus ullamcorper orci ut massa. Quisque auctor elementum nisl. Sed libero metus, pulvinar non, aliquet vitae, ultricies sed, eros. Maecenas ante erat, gravida sed, volutpat at, varius in, turpis.
</p>
</div>
</body>
</html>[/HTML]
...dann nimmste mal das raus:
[HTML]<style type="text/css">
body, html {
background-color: #f7f7f7;
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
margin: 0;
padding: 0;
}
.header {
border-top: 2px dashed black;
border-bottom: 5px double red;
background-color: #ffcc00;
padding: 5px;
margin: 5px 0px 15px 0px;
}
.menue {
border-right: 1px dashed black;
background-color: #fdf8d9;
padding: 5px;
width: 160px;
float: left;
}
.menue a {
display: block;
background-color: #ffffff;
border-bottom: 1px solid #000000;
margin-bottom: 2px;
padding: 3px;
color: #000000;
}
.menue a:hover {
background-color: #339900;
border-bottom: 1px solid #000000;
margin-bottom: 2px;
padding: 3px;
color: #ffffff;
}
.content {
margin-left: 180px;
}
</style>[/HTML]
und schaust Dir die Seite an... :shock:
Cu Helmut
![[-]](https://forum.juergens-workshops.de/images/collapse.png)
