display: none funktioniert nicht in einer (Selfhtml-)NaviLeiste
maybe
- css
Ich habe versucht mit der Methode die auf Selfhtml vorgestellt wird eine Navigationsleiste mit submenus zu erstellen. Allerdings verschwinden die untergeordneten Einträge nicht, bis man über sie mit der maus fährt, sondern bleiben einfach versetzt stehen. Ich bin ziemlich müde und kann das Problem jetzt auch nicht besser beschreiben. Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.
body {
background-image:url(images/hintergrund.gif)
}
#seite { /*Zentraler Tag für die mittige Zentrierung*/
text-align: left;
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px;
padding: 1em;
background-color:#ffffff;
min-height: 1050px;
}
#seite div {
}
#titel {
width: 100%;
background-color:#ffffff;
text-align: center;
}
#menu{
width: 170px;
margin-top:50px
}
ul#Navigation {
float: left;
width: 170px;
margin: 0; padding: 1px;
background-color: #616a2b;
}
ul#Navigation li {
list-style: none;
width: 160px;
float: left;
position: relative;
margin: 3px;
margin-left: 5px;
padding: 0;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 1.6em;
left: -1em;
display: none;
}
ul#Navigation li ul li {
list-style: none;
width: 160px;
float:none;
display:block;
margin-bottom: 2px;
}
ul#Navigation a {
display:block;
color:#eadd88;
font-size:20px;
font-family:"Bookman Old Style";
font-weight: normal;
text-decoration:none;
background-color: #424421;
text-align: center;
width:160px;
height:25px;
}
ul#Navigation a:hover {
color: #424421;
background-color: #eadd88;
}
ul#Navigation a:active {
color:#000000;
background-color: #424421;
}
ul#Navigation span {
display:block;
font-size:20px;
font-family:"Bookman Old Style";
color:#424421;
background-color:#eadd88;
text-align: center;
}
#Info {
float: right; width: 130px;
margin: 0; padding: 5px;
border: 1px solid silver;
}
#Info p {
margin: 0;
}
#text {
margin-left:174px;
border: 1px solid silver;
width: 478px;
}
#text p {
font-family: arial;
text-align:left;
margin: 1em;
color:#000000;
}
img {
border: 0;
}
Hier noch der Quelltext meiner Startseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Webseite</title>
<link rel="shortcut icon" href="images/symbol.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="seite">
<div id="titel">
<img src="images/revolution.gif" width="663" height="94" alt="Willkommen" />
</div>
<div id="menu">
<ul id="Navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="ordner1/index.htm">Link1</a></li>
<li><a href="ordner2/index.htm">Link2</a></li>
<ul>
<li><a href="ordner2/bilder.htm">Link2a</a></li>
<li><a href="ordner2/text.htm">Link2b</a></li>
</ul>
<li><a href="ueber-mich.htm">Über Mich</a><li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="Info">
<p>Text
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!" />
</a>
</p>
</div>
<div id="text">
<p>
Willkommenstext
</p>
</div>
</div>
</body>
</html>
Danke im Vorraus
PS: Ja ich habe die SuFu bemüht!!
Hi,
Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.
gerne. Der HTML-Code ist invalide; behebe dies zunächst.
Cheatah
Hi,
»» Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.
gerne. Der HTML-Code ist invalide; behebe dies zunächst.
Cheatah
So jetzt ist der Code valide
body {
background-image:url(images/hintergrund.gif)
}
#seite { /*Zentraler Tag für die mittige Zentrierung*/
text-align: left;
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px;
padding: 1em;
background-color:#ffffff;
min-height: 1050px;
}
#seite div {
}
#titel {
width: 100%;
background-color:#ffffff;
text-align: center;
}
#menu{
width: 170px;
margin-top:50px;
float: left;
}
ul#Navigation {
float: left;
width: 170px;
margin: 0; padding: 1px;
background-color: #616a2b;
}
ul#Navigation li {
list-style: none;
width: 160px;
float: left;
position: relative;
margin: 3px;
margin-left: 5px;
padding: 0;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 1.6em;
left: -1em;
display: none;
}
ul#Navigation li ul li {
list-style: none;
width: 160px;
float:none;
display:block;
margin-bottom: 2px;
}
ul#Navigation a {
display:block;
color:#eadd88;
font-size:20px;
font-family:"Bookman Old Style";
font-weight: normal;
text-decoration:none;
background-color: #424421;
text-align: center;
width:160px;
height:25px;
}
ul#Navigation a:hover {
color: #424421;
background-color: #eadd88;
}
ul#Navigation a:active {
color:#000000;
background-color: #424421;
}
ul#Navigation span {
display:block;
font-size:20px;
font-family:"Bookman Old Style";
color:#424421;
background-color:#eadd88;
text-align: center;
}
#Info {
margin-top:50px;
float: right; width: 130px;
margin: 0; padding: 5px;
border: 1px solid silver;
}
#Info p {
margin: 0;
}
#text {
margin-left:174px;
margin-top: 50px;
border: 1px solid silver;
width: 478px;
}
#text p {
font-family: arial;
text-align:left;
margin: 1em;
color:#000000;
}
img {
border: 0;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Pats Webseite</title>
<link rel="shortcut icon" href="images/symbol.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="seite">
<div id="titel">
<img src="images/titel.gif" width="663" height="94" alt="Willkommen">
</div>
<div id="menu">
<ul id="Navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="ordner/index.htm">Videos</a></li>
<li>
<a href="ornder1/index.htm">Satire</a>
<ul>
<li><a href="ordner1/bilder.htm">Bilder</a></li>
<li><a href="ordner1/text.htm">Texte</a></li>
</ul>
</li>
<li><a href="ueber-mich.htm">Über Mich</a><li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="Info">
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!">
</a>
</p>
</div>
<div id="text">
<p>
text
</p>
</div>
</div>
</body>
</html>
Geholfen hats aber nichts :(
!!Richtige Version!!
So jetzt ist der Code valide, Kleiner Fehler behoben. (li:hover ul)
body {
background-image:url(images/hintergrund.gif)
}
#seite { /*Zentraler Tag für die mittige Zentrierung*/
text-align: left;
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px;
padding: 1em;
background-color:#ffffff;
min-height: 1050px;
}
#seite div {
}
#titel {
width: 100%;
background-color:#ffffff;
text-align: center;
}
#menu{
width: 170px;
margin-top:50px;
float: left;
}
ul#Navigation {
float: left;
width: 170px;
margin: 0; padding: 1px;
background-color: #616a2b;
}
ul#Navigation li {
list-style: none;
width: 160px;
float: left;
position: relative;
margin: 3px;
margin-left: 5px;
padding: 0;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 1.6em;
left: -1em;
display: none;
}
u#Navigation li:hover ul {
display:block;
}
ul#Navigation li ul li {
list-style: none;
width: 160px;
float:none;
display:block;
margin-bottom: 2px;
}
ul#Navigation a {
display:block;
color:#eadd88;
font-size:20px;
font-family:"Bookman Old Style";
font-weight: normal;
text-decoration:none;
background-color: #424421;
text-align: center;
width:160px;
height:25px;
}
ul#Navigation a:hover {
color: #424421;
background-color: #eadd88;
}
ul#Navigation a:active {
color:#000000;
background-color: #424421;
}
ul#Navigation span {
display:block;
font-size:20px;
font-family:"Bookman Old Style";
color:#424421;
background-color:#eadd88;
text-align: center;
}
#Info {
margin-top:50px;
float: right; width: 130px;
margin: 0; padding: 5px;
border: 1px solid silver;
}
#Info p {
margin: 0;
}
#text {
margin-left: 174px;
margin-top: 50px;
border: 1px solid silver;
width: 478px;
}
#text p {
font-family: arial;
text-align:left;
margin: 1em;
color:#000000;
}
img {
border: 0;
}
Geholfen hats aber nichts :(
Hi,
Geholfen hats aber nichts :(
Online-Beispiele haben den Vorteil, dass ich keine Copy&Paste-Orgie starten muss, um dein Problem nachzuvollziehen.
MfG ChrisB
Grundlage für Zitat #1423.
Hi,
»» Geholfen hats aber nichts :(
Online-Beispiele haben den Vorteil, dass ich keine Copy&Paste-Orgie starten muss, um dein Problem nachzuvollziehen.
MfG ChrisB
Die Website ist noch nicht hochgeladen, sorry!
Ich kann höchstens einen sreenshot meiner website verlinken.