nicht angemeldet
Liebe bealine,
hier der Link: http://www.osteopathie-tbb.de
ich habe aus Interesse einmal probiert, das Layout mit CSS-Mitteln nachzuempfinden. An Deinem Doctype habe ich nichts verändert, es ist also kein HTML5, sondern wie von Dir begonnen HTML4.01 Transitional.
Du kannst eine HTML-Datei mit folgendem Code befüllen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Privatpraxis für Osteopathie, ganzheitliche Physiotherapie und Naturheilkunde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" type="image/x-icon" href="./graphics/favicon.ico">
<style type="text/css">@import url(./templates/smith-meier-style.css) all;</style>
</head>
<body id="willkommen">
<div id="main">
<h1>Herzlich Willkommen in unserer Praxis!</h1>
<p>Als Therapeuten im Bereich Osteopathie, Naturheilkunde und Physiotherapie wollen wir Ihnen mit unserem Erfahrungsschatz, unserer fundierten Ausbildung und unserem persönlichen Engagement gerne zur Seite stehen.</p>
<p>Unser Körper vollbringt jeden Tag Höchstleistungen.<br>Schenken Sie Ihm die Beachtung, die er verdient.</p>
</div>
<div id="navi">
<ul>
<li>
<a href="index.php" rel="willkommen">begrüßen</a>
</li>
<li>
<a href="Therapeuten.php" rel="ihre Therapeuten">kennenlernen</a>
</li>
<li>
<a href="Schwerpunkte.php" rel="informieren">verstehen</a>
</li>
<li>
<a href="Behandlung.php" rel="Ablauf der Behandlung">erklären</a>
</li>
<li>
<a href="Kontakt.php" rel="Kontakt">ansprechen</a>
</li>
<li>
<a href="Anfahrt.php" rel="Anfahrt">hinfahren</a>
</li>
</ul>
<blockquote>"To find health should be the object of the osteopath. Anyone can find disease." <span>A. T. Still</span></blockquote>
<ul>
<li><a href="Links.php">links</a></li>
<li><a href="Impressum.php">impressum</a></li>
<li><a href="Downloads.php">downloads</a></li>
</ul>
</div>
<p id="header">Privatpraxis für Osteopathie, ganzheitliche Physiotherapie und Naturheilkunde</p>
<p id="footer">Privatpraxen S. Meier und C. Smith I Hauptstrasse 2 I 97941 Tauberbischofsheim I Fon: 0931/ 666 88 22 I Termine nach Vereinbarung</p>
</body>
</html>
Wenn Du das hast, dann kannst Du den Inhalt der Datei "./templates/smith-meier-style.css" durch den folgenden (restlos!) ersetzen:
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #444444;
margin: 0;
padding: 0;
}
body {
border: 20px solid #666666;
background: white url(../graphics/physio-logo.png) 235px 35px no-repeat;
color: #666666;
margin: 190px auto 0 auto;
padding: 0 10px;
position: relative;
width: 964px;
}
#header {
color: white;
display: block;
font-size: 16px;
font-weight: bold;
position: absolute;
text-align: center;
top: -36px;
width: 100%;
}
#header:after {
background: white;
content: url(../graphics/physio-logo.png);
display: block;
height: 120px;
left: -30px;
padding: 28px 17px;
position: absolute;
top: -177px;
width: 990px;
}
#footer {
clear: both;
color: white;
font-weight: bold;
margin: 0 0 -18px 0;
text-align: center;
width: 100%;
}
#navi {
background: #B8D27C;
float: left;
margin: 10px 0;
min-height: 510px;
width: 225px;
}
#navi:after {
clear: both;
content: "";
display: block;
}
#navi ul:first-child {
border: 1px solid white;
border-bottom: none;
border-collapse: collapse;
list-style: none;
margin: 40px 0 0 0;
padding: 0;
}
#navi ul:first-child li {
border-bottom: 1px solid white;
border-collapse: collapse;
display: table;
height: 30px;
position: relative;
width: 100%;
}
#navi ul:first-child a {
color: #444444;
display: table-cell;
height: 100%;
margin: 0;
padding: 0 0 0 50px;
text-decoration: none;
vertical-align: middle;
width: auto;
}
#navi ul:first-child a:before {
border-left: 1px solid white;
content: "";
height: 29px;
left: 36px;
position: absolute;
top: 0;
vertical-align: middle;
width: 0px;
}
#navi ul:first-child a:hover {
color: #D9634C;
}
#navi ul:first-child a:hover:before {
background: #B8D27C;
color: #D9634C;
content: attr(rel);
height: 16px;
padding: 7px 0 6px 14px;
width: 166px;
}
#navi ul:first-child a:hover:after {
background: #D9634C;
content: "";
height: 29px;
left: 0px;
position: absolute;
top: 0;
width: 36px;
}
#navi blockquote {
color: white;
font-family: Times, serif;
font-size: 16px;
font-weight: bold;
margin: 40px 0 0 0;
padding: 2px;
text-align: center;
}
#navi blockquote span {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
margin: 1em 0 0 0;
}
#navi ul:last-child {
list-style: none;
margin: 100px 0 0 0;
padding: 0;
text-align: center;
}
#navi ul:last-child li {
display: inline;
margin: 0;
padding: 0;
}
#navi ul:last-child li:nth-child(2):before,
#navi ul:last-child li:nth-child(2):after {
content: " | ";
}
#navi ul:last-child a {
color: #444444;
text-decoration: none;
}
#navi ul:last-child a:hover {
color: #D9634C;
text-decoration: underline;
}
#main {
background: #B8D27C;
float: right;
margin: 10px 0;
min-height: 480px;
padding: 15px;
width: 460px;
}
h1 {
font-size: 18px;
}
/* Hintergrundbilder für die verschiedenen Seiten */
#willkommen {
background-image: url(../graphics/willkommen.jpg);
}
Das Ergebnis sollte dem momentanen Ist-Zustand schon recht nahe kommen. Dabei kommt es aber völlig ohne JavaScript und Tabellen aus, sollte also zugänglicher als Dein bisheriges Konstrukt sein.
Getestet habe ich allerdings nur unter Firefox (Linux), kann also nicht dafür garantieren, dass es in einem älteren Internet Explorer einigermaßen vernünftig aussieht! Aber das darfst Du dann tun.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Matthias Apsel