Hallo,
ich versuche schon einige Zeit eine Webseite zu gestalten,
doch es tauchen immer wieder Probleme auf,
die ich nicht überwinden kann. Mit den Augen rollen
Ich habe zwei Grafiken mit abgerundeten Ecken,
die mir immer wieder unter die Navigation rutschen Böse
Im Intenetexplorer 7 sieht es aus wie es aussehen soll,
im Firefox und Opera allerdings nicht.
Ich finde auch keinen Weg das zu ändern,
jetzt hoffe ich auf Hilfe.
Die Css und Html hänge ich hier mal an.
Html:
<DOCTYPE><html>
<head>
<title>Sotha2009</title>
<meta>
<link>
</head>
<body>
<div>
<div>
<div>
<h1>
<br>
Überschrift bla schwall bla <br>
Weitere Überschrift bla schwetz schwall <br>
</h1>
<br>
<h2>
"Erleuterung zur unterschrift <br>
usw bla bla"
</h2>
</div>
<div>
<p>
<marquee> Infokrams in laufschrift </marquee>
</p>
</div>
</div>
<div>
<ul>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
<li><a> Hauptseite </a></li>
</ul>
</div>
<div>
<h3>Hier kommt noch die Willkommensüberschrift.</h3>
<p>
Mit reichlich Wilkommenstext <br>
und vielleicht ein paar Bildchen.<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>
<div>
<div>
<p>bla Copyreigt etc.</p>
</div>
</div>
</div>
</body>
</html>
Css:
body
{
background-color: #ffffff;
font-size: 0.8em;
font-family: Arial;
color: #000000;
padding: 0;
margin: 0;
}
a { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #ffffff; }
a:active { color: #000000; }
p
{
padding: 5px;
margin:0;
}
h1
{
color: #ffffff;
padding: 0;
margin:0;
font-size: 1.2em;
font-weight: bold;
}
h2
{
padding: 0;
margin:0;
font-size: 1.4em;
font-weight: bold;
}
h3
{
padding: 5px;
margin:0;
font-size: 1.8em;
font-weight: bold;
}
h4
{
padding: 5px;
margin:0;
font-size: 1.6em;
font-weight: lighter;
}
#navi
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid;
border-color: #ffdaaa;
width: 150px;
}
#navi li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid;
border-color: #ffdaaa;
}
#navi li a
{
text-decoration: none;
}
#center
{
width: 900px;
margin: 0 auto;
padding: 0;
background-color: #d2c7e8;
}
#banner
{
height: 250px;
margin: 0;
padding: 0;
background-color: #d2c7e8;
background-image: url(designbilder/top.jpg);
background-repeat: no-repeat;
background-position: center;
}
#btext
{
text-align: center;
margin-top: 30px;
margin-left: 255px;
padding: 0;
width: 560px;
height: 110px;
}
#info
{
margin-top: 44px;
margin-left: 233px;
width: 538px;
height: 25px;
padding: 0;
background-color: #d2c7e8;
}
#content
{
min-height:600px;
background-color: #ffdaaa;
padding: 20px;
margin: 0 0 0 150px;
}
#links
{
float: left;
width: 150px;
margin: 0;
padding: 15px 0 0 0;
color: #ffffff;
background-color: #d2c7e8;
}
#fuszeile
{
clear: left;
height: 40px;
background-image: url(designbilder/fus.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: #d2c7e8;
padding: 0;
margin: 0;
}
#ftext
{
color: #ffdaaa;
text-align: right;
margin-top: -4px;
margin-left: 10px;
padding: 0;
width: 880px;
height: 25px;
}
div.rund
{
margin: 0;
width: 600px;
background: url(ul.jpg) no-repeat bottom left;
}
div.rund h3
{
margin: 0;
padding: 20px;
background: url(ol.jpg) no-repeat top left;
text-align: center;
font-size:1.2em;
}
div.rund p
{
margin: 0;
padding: 20px;
}