1
hallo zusammen,
ich bin gerade dabei diese seite zu machen:
http://www.harz4-umzug.de/prooooooooooooooooobeAAAAAAAAAAAAAAAAAA.html
das drop-down-menü funktioniert soweit in allen beowsern, auch ie7/8. im ie9
klappt das untermenü zwar auf, verschwindet aber auch sofort wieder bei dem versuch mit der maus darauf zu gelangen. ich habe "line-height" des untermenüs erhöht, weil das menü sonst so gequetscht wirkt. lasse ich angaben für "line-height" weg funktioniert alles prima. ich würde aber der optik wegen schon gerne einen gewissen abstand zwischen den einzelnen unterpunkten angeben.
das ist der code zur seite:
ich bin gerade dabei diese seite zu machen:
http://www.harz4-umzug.de/prooooooooooooooooobeAAAAAAAAAAAAAAAAAA.html
das drop-down-menü funktioniert soweit in allen beowsern, auch ie7/8. im ie9
klappt das untermenü zwar auf, verschwindet aber auch sofort wieder bei dem versuch mit der maus darauf zu gelangen. ich habe "line-height" des untermenüs erhöht, weil das menü sonst so gequetscht wirkt. lasse ich angaben für "line-height" weg funktioniert alles prima. ich würde aber der optik wegen schon gerne einen gewissen abstand zwischen den einzelnen unterpunkten angeben.
das ist der code zur seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
@media screen, projection {
html, body { height:100%; margin:0; padding:0; font-size: 100.1%;}
#huelle {
height:100%;
width:100%;
min-height:600px;
min-width:800px;
position:absolute;
}
}
#navi, #navi ul {
list-style-type:none;
padding: 0;
margin: 0px;
}
#navi li {
width:128px;
float:left;
}
#navi li ul {
display:none;
}
#navi li:hover ul {
display:block;
text-decoration: none;
}
a:link {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.97em;
font-weight: bolder;
line-height: 1.7em;
}
.menuliste {
color: #FFF;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #E2E2E2;
}
a:active {
text-decoration: none;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 800px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#huelle #mitte #mitteinhaltbox #projektboxen #bilder {
height: auto;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
.textinderbox {
margin: 5%;
font-family: Verdana, Geneva, sans-serif;
font-size: 66%;
color: #000;
line-height: 130%;
}
#huelle #mitte #mitteobenabstand #mitteobenHeadline {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
font-weight: bold;
color: #000;
word-spacing: 1em;
height: 15%;
position: relative;
padding-top: 7%;
padding-right: 10%;
padding-bottom: 10%;
padding-left: 10%;
}
.bilder1 {
height: auto;
width: 22%;
margin-bottom: 2%;
margin-left: 5%;
margin-top: 5%;
}
#huelle #links {
clear: right;
float: left;
height: 100%;
width: 29%;
}
#huelle #links #linksAbstandOben {
height: 15%;
width: 100%;
}
#huelle #mitte #mitteinhaltbox #projektboxen {
height: auto;
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 5%;
-moz-border-radius:20px;
-khtml-border-radius:20px;
-webkit-border-radius:20px;
-border-radius:10px;
background-image: url(Bilder/transparent50.png);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#huelle #mitte #mitteobenabstand {
height: 15%;
width: 100%;
background-image: url(Bilder/TransparentbildBB.png);
background-repeat: repeat;
}
#huelle #mitte {
clear: right;
float: left;
height: 100%;
width: 42%;
}
#huelle #rechts {
clear: right;
float: right;
height: 100%;
width: 29%;
}
#huelle #mitte #mittezwischenrauam {
height: 2%;
width: 100%;
}
#huelle #mitte #mitteinhaltbox {
height: 83%;
width: 100%;
overflow-y: scroll;
background-image: url(Bilder/TransparentbildCC.png);
}
.textinderboxFett {
font-family: Verdana, Geneva, sans-serif;
color: #000;
font-weight: bold;
font-size: 102%;
}
#huelle #links #menuhuelle #dorisfeil {
height: auto;
width: 100%;
text-align: left;
}
.dossi {
clear: right;
float: left;
font-family: Verdana, Geneva, sans-serif;
color: #000;
font-weight: bolder;
font-size: 0.97em;
margin-left: 4%;
line-height: 1.7em;
}
.menu {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.97em;
font-weight: bolder;
color: #FFF;
margin-left: 1px;
line-height: 1.7em;
text-decoration: none;
}
#huelle #links #menuhuelle #menuinhalt {
clear: right;
float: left;
height: auto;
width: 50%;
}
</style>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img alt="full screen background image" src="Bilder/stumpfD.jpg" id="full-screen-background-image" />
<div id="huelle">
<div id="links">
<div id="linksAbstandOben"></div>
<div id="menuhuelle">
<div id="dorisfeil"><span class="dossi">DORIS.FEIL</span>
<ul id="navi">
<li><a href="#" class="menu">MENU</a>
<ul>
<li><a href="#" class="menuliste">SLIDESHOW</a></li>
<li><a href="#" class="menuliste">KUNSTPROJEKTE</a></li>
<li><a href="#" class="menuliste">VERANSTALTUNGEN</a></li>
<li><a href="#" class="menuliste">BIOGRAPHIE</a></li>
<li><a href="#" class="menuliste">KONTAKT</a></li>
<li><a href="#" class="menuliste">HOME</a></li>
</ul>
</li>
</ul></div>
</div>
</div>
<div id="mitte">
<div id="mitteobenabstand">
<div id="mitteobenHeadline">KUNSTPROJEKTE</div>
</div>
<div id="mittezwischenrauam"></div>
<div id="mitteinhaltbox">
<div id="projektboxen">
<div id="bilder"><img src="Bilder/DuneKlein.jpg" class="bilder1" /></div>
<div class="textinderbox" id="text">
<p><span class="textinderboxFett">Die große Düne</span><br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
<br />
</p>
</div>
</div>
<div id="projektboxen">
<div id="bilder"><img src="Bilder/DuneKlein.jpg" class="bilder1" /></div>
<div class="textinderbox" id="text">
<p><span class="textinderboxFett">Die große Düne</span><br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
<br />
</p>
</div>
</div>
<div id="projektboxen">
<div id="bilder"><img src="Bilder/DuneKlein.jpg" class="bilder1" /></div>
<div class="textinderbox" id="text">
<p><span class="textinderboxFett">Die große Düne</span><br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
<br />
</p>
</div>
</div>
</div>
</div>
<div id="rechts"></div>
</div>
</body>
</html>