Hallo,
bitte dringend um Hilfe, ich habe verzweifelt Stunden nach
dem Fehler gesucht – vergeblich
Hier die Index.html (index_test.html)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>test.de</title>
<link rel="stylesheet" type="text/css" href="test.css" media="screen"></link>
<link rel="stylesheet" href="test.css" type="text/css" />
<!-- metadata -->
</head>
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
<img src="../images/test.gif" height="194" width="956" alt="test.gif" title="Headline und Logo" />
</div>
<!-- Ende Kopfbereich -->
<div id="Navigation">
<ul>
<li id="navi01"><a href="test.html" title="Test">Test</a></li>
</ul>
</div> <!-- Ende Navigation -->
<div id="linke_spalte">
<p>
<img src="../images/test_2.jpg" height="146" width="172" alt="test_2.jpg" title="test" />
</p>
</div> <!-- Ende linke Spalte -->
<h3 class="test"><strong>Webdesign ist ein komplexes Ding <br />da
<span>eine korrekte CSS-Technik</span></a>
einiges an Erfahrung <br />benötigt.
</strong></h3>
<div id="Inhalt">
<h1>Leider funktioniert diese Seite<br />
nicht so wie sie soll
</h1>
<h3>Perem hitinve rferuptatus, sequam, te re magnihil imos eatem faccae exerempore,</h3><br />
<h3>conemquias ducipis coratquam, ad quamus untor secaborepero que voluptatus</h3>
<br />
<h3>doleser chicitatis adi re, se voluptam rem quod quunduciis voluptur minihitiscit</h3><br />
<h3>mosandebis reicates dolupta tempell ignihitam qui untis nimagnihil in ratempostrum volorit empello entium aut a qui omnis delest accat.</h3>
<br />
<h3>suntur, cullistrume con non ni quos sectoreperum earum niscitiuria consequos atur aped mintio cus et et et, adicias <br />
plibusam explit, audit auditio moditaquo min recum reris delibusantem eum quam, offictis
</h3>
</div> <!-- Ende Inhalt -->
<table id="Abb" width="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../images/test_03.png" width="110" height="237" alt="test" />
</td>
</tr>
<tr>
<td>
<a href="xxx.html"><img src="../images/test_04.png" width="110" height="23" alt="test" /></a>
</td>
</tr>
</table>
<div id="menue">
<ul>
<li><a href="index.html">xxxxx</a></li>
<li><a href="xxx.html">xxxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xx</a></li>
<li><a href="xxx.html">x</a></li>
</ul>
</div> <!-- Ende menue -->
</div><!-- Ende wrapper -->
</body>
</html>
und hier das Stylesheet dazu (test.css)
/* ==========================
1. Kalibrierung
============================= */
* { padding: 0; margin: 0; }
h1, h2, p, ol, ul { margin-bottom: 1em; }
ol, ul { margin-bottom: 0; }
/* Tab */
{ border-collapse:collapse;
border-spacing: 0;
}
img {border: 0;}
/* ==========================
2. Allgemeine Styles
============================= */
body {
background-color: #fafafa;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* =========================
Klassen, Spans und ID’s */
.pa { margin-top: -0.6em;}
span { color: #c8001e;}
.test {
position: relative;
margin-left: 254px;
margin-top: 286px;
width: 50%;
line-height: 1.32em;
font-weight: 400;
font-size: 1.18em;
color: #c8001e;
}
/*hr.footer {
width: 936px;
color: #e6e6e6;
border-left-color: #e6e6e6;
border-left-style: solid;
border-left-width: 12px;
border-top-style: solid;
border-top-width: 1px;
position: relative;
margin-left: -345px;
margin-top: 85px;
} */
#wrapper {
width: 956px;
margin: 0px auto;
}
#kopfbereich {
padding-top: 8px;
}
#linke_spalte {
position: absolute;
margin-top: 25px;
margin-left: 35px;
}
#Inhalt {
position: relative;
margin-top: -322px;
margin-left: 254px;
margin-right: 225px;
}
h1 {
color: #141414;
font-family: verdana;
font-size: 1.45em;
font-weight: bold;
line-height: 1.34em;
}
h2 {
/* color: #c8001e;
font-family: times;
font-variant: small-caps;
font-weight: 500;
letter-spacing: 0.13em;*/
font-family: verdana;
line-height: 1.32em;
}
h3 {
font-weight: normal;
font-size: 1.08em;
line-height: 1.22em;
margin-top: -.4em;
margin-bottom: -.1em;
}
#Abb {
float: right;
margin-right: 20px;
margin-top: -280px;
width: 150px;
}
strong.a { font-size: .98em;
color: #323232;
}
/* ==========================
4. Navigation
============================= */
#Navigation li {
display: inline;
list-style-type: none;
position: relative;
top: -1px;
left: 95px;
margin-right: 35px;
margin-left: 35px;
}
#Navigation ul {
background-position:left;
left: 40px;
width: 880px;
background-image: url(../images/navi.jpg);
background-repeat: No-Repeat;
margin-top: 10px;
padding-bottom: 10px; padding-left: 5px; padding-right: 5px; padding-top: 8px;
list-style-type: none;
}
#menue {
float: left;
font-size: 10px;
margin-left: 5px;
margin-top: 145px;
width: 500px;
}
#menue ul {
list-style-type: none;
}
#menue ul li {
float: left; border-right: 1px solid #919191;
}
#menue ul li a {
color: #919191; padding: 0px 4px 0px 6px; text-decoration: none;
}
a {
text-decoration: none;
outline: none;
}
a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover, a:focus
{
color: #c8001e;
text-decoration: none;
}
a:active {
color: #ffffff;
text-decoration: none;
}
/* ==========================
ENDE DES STYLESHEETS
============================= */
Wie geschrieben, in FF und Opera sowie Camino funkt. es wunderbar
mit dem Verkleinern.
Aber in Safari eben nicht.
Ganz chaotisch, sprich unbrauchbar wird es mit iCab.
DANKE schonmal im voraus.