AW: PS Weiterverarbeitung CSS!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispiel</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<style type="text/css">
*{
4margin:0;
padding:0;
}
body {
background:#fff369 url(Bilder/menu_links_hg_leer.jpg) repeat-y;
}
img {
border:none;
}
hr {
border:none;
color: #fff;
background-color: #fff;
height: 1px;
}
h2 {
margin:0.5em 0;
}
#head {
background:#f00 url(Bilder/Export_css_03.jpg) no-repeat right;
height:105px;
width:100%;
border-bottom:5px solid #000;
}
#head h1 {
background:#f00 url(Bilder/Logo1.jpg) no-repeat;
width:250px;
line-height:105px;
padding:0 1em;
color:#fff;
float:left;
}
.navigation {
padding:0.5em 0;
margin-right: 250px;
text-align:center;
}
.navigation li{
display:inline;
}
#navigation {
width:250px;
background:#1a1fb1;
float:left;
}
#navigation li{
list-style-type:none;
margin:1em 3em;
color:#f00;
}
#inhalt {
margin-left: 250px;
padding:1em 250px 2em 1em;
width:auto;
background:transparent url(Bilder/Inhalt-22.jpg) no-repeat right 50px;
}
.footer {
margin:4em 1em 0 0;
text-align:right;
}
.clear {
clear:both;
}
</style>
<link href="oli.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="head">
<h1>Logo</h1>
<div id="layout">Raum für den Inhalt von id "layout"</div>
<ul class="navigation">
<li>
<img height="90" width="120" alt="Home" src="Bilder/Home_Button.jpg"/>
</li>
<li>
<img height="90" width="120" alt="Produkte" src="Bilder/Produkte_Button.jpg"/>
</li>
<li>
<img height="90" width="120" alt="Info" src="Bilder/Info_Button.jpg"/>
</li>
<li>
<img height="90" width="122" alt="Kontakt" src="Bilder/Kont_Button.jpg"/>
</li>
</ul>
</div>
<ul id="navigation">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<div id="inhalt">
<img height="193" width="527" alt="tolles Bild" src="Bilder/Export_css_20.jpg"/>
<hr/>
<h2>Willkommen auf unserer Bestellseite im WWW</h2>
<p>Nach einigen Neuerungen,. Wir legen weiterhin sehr viel Wert auf Kundenfreundlichkeit und schnellem Lieferservice. Wir haben nun 2 feste Versender aus Deutschland, welche den grtenteil unseres Sortiments direkt aus Deutschland versenden. Fr die Kunden aus Deutschland, sterreich und der Schweiz erleichtert dies die Lieferzeit um einige Tage wenn es um kleinere Bestellungen geht. Ansonsten wird weiter aus verschiedenen EU-Lndern versendet. Von Zeit zu Zeit werden wir unser Angebot noch weiter ausbauen und versuchen auf jeden Kundenwunsch einzugehen. Wir hoffen Ihr fhlt Euch bei uns vertraut und seid mit unserem Service zufrieden.</p>
<h2>Welcome to our Ordersite in the WWW</h2>
<p>Now after some innovations, safety measures and product extensions, we are there again for You. We lay furthermore a lot of value on customer friendliness and quick service of delivery. Now we have 2 steady senders from Germany who dispatch mainly of our assortment directly from Germany. For the customers from Germany, Austria and Switzerland this makes easier the delivery time on some days if it around smaller orders goes. Otherwise it is further dispatched from different EU lands. Every now and then we will develop our offer even further and try to come at every customer wish. We hope you feel close with us and are contented with our service. </p>
</div>
<div class="clear footer">
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img height="31" width="88" alt="Valid XHTML 1.0 Strict" src="http://www.w3.org/Icons/valid-xhtml10-blue"/>
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img alt="CSS ist valide!" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" style="border: 0pt none ; width: 88px; height: 31px;"/>
</a>
</p>
</div>
</body>
</html>
spreich so:
