Hallo Freunde,
bei mir ergibt sich folgendes Problem:
ich habe eine Kopfzeile und eine Menüzeile mit Position: fixed fest verankert.
Darunter befinden sich Bilder mit einem Text darunter. Wenn ich nun die Seite scrolle, laufen Bilder und Text über die Kopfzeile und Menüzeile.
Das sieht schlecht aus und ist nicht gewollt. Ich möchte erreichen das die Bilder und der Text hinter den beiden Zeilen nach oben verschwinden.
Ich habe folgendes programmiert:
In HTML
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vorstand</title>
<link href="vorstand.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="HTML Seite/Images/Kopfzeile.jpeg" width="1000" height="100" style="border: 0px;" />
<div id="Menu">
<a href="home.html">Home</a>
<a href="kontakt.html">Kontakte</a>
<a href="#">Kontaktformular</a>
<a href="#">Anfahrt</a>
<a href="#">Gästeliste</a>
<a href="#">Chronik</a>
<a href="#">Impressum</a>
</div>
<h1>Unser Vorstand</h1>
<img id="hermann" src="HTML Seite/Images/Hermann.png" title="" width="105" height="157" style="border: 0px;" />
<ul id="vors1">
<li>1.Vorsitzender</li>
<li>Hermann v.d. Heide</li>
<li>Tel: xxx xxxxxxx</li>
<li>Parzelle </li>
<li><a href="mailto:1vorsitz@kgv-diekmoor401.de">e-Mail an<br /> 1.Vorsitzenden<a/>
</ul>
<img id="juergen" src="HTML Seite/Images/Jürgen.png" title="" width="105" height="157" style="border: 0px;" />
<ul id="vors2">
<li>2.Vorsitzender</li>
<li>Jürgen Steinbach</li>
<li>Tel: 040 38 28 85</li>
<li>Parzelle 69</li>
<li><a href="mailto:2vorsitz@kgv-diekmoor401.de">e-Mail an<br /> 2.Vorsitzenden<a/>
</ul>
</body>
<html>und in CSS
Code
img
{
position: fixed;
/*top: 15px;
left: 25px; */
margin: 0px 60px;
}
body
{
background: #008000;
height: 2000px;
}
#Menu
{
position: fixed;
width: 980px;
top: 120px;
left: 10px;
margin: 10px 60px;
padding: 2pt 5pt;
border: 1.5pt solid #448844;
background: #aaffaa;
font: bold 11pt arial, sans-serif;
font-variant: small-caps;
letter-spacing: 1pt;
text-align: center;
}
#Menu a
{
color: #000000;
text-decoration : none;
margin-right: 5pt;
padding: 2pt 2pt;
border-left: 1.5pt solid #aaffaa;
border-right: 1.5pt solid #aaffaa;
}
#Menu a:hover
{
color: #ee1111;
text-decoration: none;
background: #ffffcc;
padding: 2pt 2pt;
border-left: 1.5pt solid #448844;
border-right: 1.5pt solid #448844;
}
H1
{
position: absolute; top: 160px; left: 400px;
color: #ffffcc;
}
#hermann
{
position: absolute; top: 250px; left:10px;
padding: 0px;
}
#vors1
{
width: 200px;
padding: 0px;
position: absolute;
list-style-type: none;
font-size: 10pt;
top: 410px;
left:70px;
background: #008000;
color: #ffffcc;
}
#vors1 a:hover
{
text-decoration: none; background: #99dd99;
}
#juergen
{
position: absolute; top: 250px; left:285px;
margin: 0px ;
padding: 0px;
}
#vors2
{
width: 200px;
margin: auto;
padding: 0px;
position: absolute;
list-style-type: none;
font-size: 10pt;
top: 410px;
left:285px;
background: #008000;
color: #ffffcc;
}
#vors2 a:hover
{
text-decoration: none; background: #99dd99;
}Was habe ich übersehen oder was weiß ich nicht?
Ich hoffe eine(r) von euch hat eine Lösung für mich
LG
willytyp