Dropdown Menu - CSS Problem

TheSuddenFlash

Hallo,

habe schon seit einigen Tagen einen "Grafikfehler" in meinem dropdown menü. Bin relativ neu im Thema programmieren und hoffe das mir jemand weiterhelfen kann :-(...

MfG L.

HTML-Code:
<!Doctype Html>
<html>
<head>

</head>

<body>

<nav>

<ul>
<li>Home</li>
<li> <a href = "../ÜberMich/ÜberMich.html"> Über mich </a> </li>
<li> <a href = "../Tipps/Tipps.html"> Tipps </a>
<ul>
<li> <a href = "../Tipps/Kaufempfehlungen.html"> Kaufempfehlungen </a> </li>
<li> <a href = "../Tipps/Tricks.html"> Tricks </a> </li>
<li> <a href = "../Tipps/Tests.html"> Tests </a> </li>
<li> <a href = "../Tipps/Sonstiges.html"> Sonstiges </a> </li>
</ul>
</li>
<li> <a href = "../News/News.html"> News </a> </li>
<li> <a href = "../Blog/Blog.html"> Blog </a> </li>
</ul>

</nav>

<div id="Bild" style="position:absolute; top:150px; left:725px;">
<img src="Bild.bmp">
</div>

<div id="Text" style="width:600px; height:250px; position:absolute; top: 500px; left:680px;">
</div>

</body>
</html>

und die css dazu:
HTML-Code:
body {
background:url(background.png);
}

nav {
position:absolute;
top:40px;
left:750px;
}

nav ul {
margin:0;
width:auto;
float:left;
box-shadow:0px 0px 32px 0px #111;
border-radius:10px;
padding:0;
border-top:1px solid #222;
border-bottom:1px solid #222;

}

nav ul li {
position:relative;
padding:10px;
float:left;
list-style:none;
color:#FFF;
background:#187F46;
width:70px;
text-align:center;
border-right:1px solid #222;
}

nav ul li:hover {
background:#0EF676;
}

nav ul li:last-child {
border-radius:0 10px 10px 0;
}

nav ul li:first-child {
border-radius:10px 0 0 10px;
}

nav ul li:hover ul {
height:auto; opacity:1;
}

nav ul li ul {
position:absolute;
top:45px;
left:0;
background-color:#222;
color: #0EF676;
z-index:2;
height:0;
overflow:hidden;
}
nav ul li ul li:last-child {
border-radius:0 0 10px 10px;
}
nav ul li ul li {
width:150px;
text-align:left;
}
nav ul li ul li:first-child {
border-radius:10px 10px 0 0;
}

nav ul li a {
text-decoration: none ;
color:white;
}

#Box {
margin-left:auto;
margin-right:auto;
background-color:white;
width:980px;
height: 1000px;
box-shadow:0px 0px 32px 0px #111;
}

#Text {
color:#000;
font-family:Arial,Helvetica;
}

MrMurphy

Hallo

es wäre schön wenn du dir bei der Fragestellung etwas mehr Mühe geben würdest.

Setze den Quellcode zunächst in die dafür vorgesehenen Code-Tags. Ab besten ist aber immer ein Link zu der betroffenen Seite. Und ja - es gibt Freeware-Provider wie bplaced.net.

Auf das Bild haben wir weder Zugriff noch irgendwelche sonstigen Angaben - was sollen wir damit anfangen?

Und das entscheidende:

Zitat

habe schon seit einigen Tagen einen "Grafikfehler" in meinem dropdown menü

Das ist keine Problembeschreibung mit der wir etwas anfangen können. Zumal grade in HTML und CSS viele Anfänger das ganz normale und vorgesehene Verhalten als Fehler oder Problem ansehen.

In das Menü sind hover-Effekte eingebaut. Wie soll das Menü sich bei Touchscreens (Smartphones, Tablets und andere) verhalten - die kennen den hover-Effekt ja nicht.

Gruss

MrMurphy

TheSuddenFlash

Hallo,

setze den Quellcode jetzt nochmal in Code-Tags. Mein genaues Problem ist das unter Tipps und News ein schwarzer Balken zu sehen ist der anscheinend durch das Dropdown Menü entsteht..bekomme es aber einfach nicht hin diesen Balken zu entfernen. Außerdem muss ich die Website nicht online stellen brauche sie nur für mich.

HTML

<!Doctype Html>
<html>
<head>




<link rel="stylesheet" type="text/css" href="style.css">




<meta charset="utf-8">
<title>Longboarden</title>




</head>




<body>




<div id="Box">
</div>




<nav>


<ul>
<li>Home</li>
<li> <a href = "../ÜberMich/ÜberMich.html"> Über mich </a> </li>
<li> <a href = "../Tipps/Tipps.html"> Tipps </a>
<ul>
<li> <a href = "../Tipps/Kaufempfehlungen.html"> Kaufempfehlungen </a> </li>
<li> <a href = "../Tipps/Tricks.html"> Tricks </a> </li>
<li> <a href = "../Tipps/Tests.html"> Tests </a> </li>
<li> <a href = "../Tipps/Sonstiges.html"> Sonstiges </a> </li>
</ul>
</li>
<li> <a href = "../News/News.html"> News </a> </li>
<li> <a href = "../Blog/Blog.html"> Blog </a> </li>
</ul>


</nav>


<div id="Bild" style="position:absolute; top:150px; left:725px;">
<img src="Bild.bmp">
</div>


<div id="Text" style="width:600px; height:250px; position:absolute; top: 500px; left:680px;">
</div>


</body>
</html>

Alles anzeigen

Und die CSS dazu:

HTML

body {
background:url(background.png);
}




nav { 
position:absolute;
top:40px; 
left:750px;
}




nav ul { 
margin:0;
width:auto; 
float:left; 
box-shadow:0px 0px 32px 0px #111;
border-radius:10px; 
padding:0; 
border-top:1px solid #222;
border-bottom:1px solid #222;




}




nav ul li { 
position:relative; 
padding:10px; 
float:left; 
list-style:none; 
color:#FFF; 
background:#187F46; 
width:70px; 
text-align:center; 
border-right:1px solid #222; 
}




nav ul li:hover { 
background:#0EF676;
}




nav ul li:last-child { 
border-radius:0 10px 10px 0;
}




nav ul li:first-child { 
border-radius:10px 0 0 10px;
}




nav ul li:hover ul { 
height:auto; opacity:1;
}




nav ul li ul { 
position:absolute; 
top:45px;
left:0; 
background-color:#222;
color: #0EF676;
z-index:2;
height:0;
overflow:hidden; 
}
nav ul li ul li:last-child { 
border-radius:0 0 10px 10px;
}
nav ul li ul li { 
width:150px; 
text-align:left;
}
nav ul li ul li:first-child { 
border-radius:10px 10px 0 0;
}




nav ul li a { 
text-decoration: none ; 
color:white;
}




#Box {
margin-left:auto;
margin-right:auto;
background-color:white;
width:980px;
height: 1000px;
box-shadow:0px 0px 32px 0px #111;
}




#Text { 
color:#000;
font-family:Arial,Helvetica;
}

Alles anzeigen

Hoffe du/ihr könnt mir jetzt ein bisschen mehr helfen.

Vielen Dank

MfG

modem-kind

naja Murphy,
hover Angaben werden von Phone´s ja nicht ganz ignoriert oder..
sie werden ja als "(click)" ausgeführt..

und dann gibt es ja noch die Möglichkeit
events darauf anders feuern zu lassen..
zum Beispiel längeres berühren zb. des Elements..
was natürlich keine gute usability ist..

ohne Javascript kommt man bei Phones teils nicht weit
wenn man bestimmtes erreichen will..
zb scroll to top button
oder
eine element id tauschen die bei nochmaligem berühren
zb eine Navi wieder verschwinden lässt..
left minus xxpx zb.

PS. die frage von oben habe ich auch nicht ganz verstanden -
und wer will schon alles paste´n und auf ne Domain hochladen
um das Problem zu erkennen u. analysieren..

@display: none;

- - - Aktualisiert - - -

hab nicht alles durchgesehen..
aber nach erstem </ul>
kommt ein schließendes </li>
statt einem dem zweiten öffnenden <ul>
schau mal obs im Original auch so ist..

MrMurphy

Hallo

Zitat

das unter Tipps und News ein schwarzer Balken zu sehen

Es handelt sich um zwei Balken, die auch keineswegs schwarz sind. Die hast du mittels

Code

nav ul { 
...
border-top:1px solid #222;
border-bottom:1px solid #222;
}

eingebaut. Warum du die allerdings einbaust wenn du sie gar nicht haben willst erschließt sich mir nicht.

Die Anmerkung von modem-kind

Zitat

aber nach erstem </ul>
kommt ein schließendes </li>
statt einem dem zweiten öffnenden <ul>

verstehe ich auch nicht. Das ist der ganz normale Aufbau von verschachtelten Listen.

Gruss

MrMurphy

djheke

Border ist schon ok. Muss aber überschrieben werden.

Code

nav ul li ul {
position:absolute;
top:45px;
left:0;
background-color:#222;
color: #0EF676;
z-index:2;
height:0;
overflow:hidden;
border:none;
}




nav ul li:hover ul {
height:auto; 
opacity:1;
border-top:1px solid #222;
border-bottom:1px solid #222;
}

Alles anzeigen

Hier eine korrigierte Version der Navigation.

HTML

<!Doctype Html>
<html>
<head>




<meta charset="utf-8">
<title>Longboarden</title>


<style>


nav {
 margin:30px 100px 0 0;
  float:right;
}


nav ul {
 box-shadow:0px 0px 15px #111;
 border-radius:10px;
 background:#187F46;
}


nav ul , nav li {
 margin:0;
 padding:0;
 list-style:none;
 float:left;
}


nav ul li:first-child,
nav ul li:first-child strong {
border-radius:10px 0 0 10px ;
}


nav ul li:last-child,
nav ul li:last-child strong {
border-radius:0 10px 10px 0;
 border-right:none;
}


nav li {
 float:left;
 position:relative;
 border:1px #222;
 border-style:solid solid none none;
}


nav a , nav strong {
 display:block;
 padding:10px 25px;
 color:#fff;
 text-decoration:none;
}


nav  strong {
 background:#0EF676;
 color:#222;
}


nav li:hover {
 background:#0EF676;
}


nav li ul {
 position:absolute;
 top:-99999em;
 padding:15px 0 0 0;
 background:none;
 box-shadow:none;
}


nav li ul:before {
 content:"";
 position:absolute;
 top:15px;
 left:0;
 right:0;
 bottom:0px;
 background:#187F46;
 box-shadow:0 0 10px #111;
 border-radius:10px;
}


nav li li {
 margin:0;
 padding:0;
 float:none;
 background:#187F46;
 border:none;
} 


nav li li:first-child, 
nav li li:hover:first-child  {
border-radius:10px 10px 0 0; 
}


nav li li:last-child, 
nav li li:hover:last-child  {
border-radius:0 0 10px 10px;
}


nav li li a {
 padding:10px;
}


nav li:hover ul {
 top:auto;
}
</style>
</head>




<body>


<nav>
<ul>
<li><strong>Home</strong></li>
<li> <a href = "../ÜberMich/ÜberMich.html"> Über mich</a>
<li> <a href = "../Tipps/Tipps.html"> Tipps </a>
<ul>
<li> <a href = "../Tipps/Kaufempfehlungen.html"> Kaufempfehlungen </a> </li>
<li> <a href = "../Tipps/Tricks.html"> Tricks </a> </li>
<li> <a href = "../Tipps/Tests.html"> Tests </a> </li>
<li> <a href = "../Tipps/Sonstiges.html"> Sonstiges </a> </li>
</ul>
</li>
<li> <a href = "../News/News.html"> News </a> </li>
<li><a href = "../Tipps/blog.html">  Blog </a></li>
</ul>
</nav>


</body>
</html>

Alles anzeigen

TheSuddenFlash

Super vielen Dank,

ich habe jetzt aber noch ein Problem:

nachdem ich den code:

HTML

nav ul li ul {position:absolute;
top:45px;
left:0;
background-color:#222;
color: #0EF676;
z-index:2;
height:0;
overflow:hidden;
border:none;
}




nav ul li:hover ul {
height:auto; 
opacity:1;
border-top:1px solid #222;
border-bottom:1px solid #222; }

Alles anzeigen

eingefügt habe war der schwarze Balken zusehen, ohne den Code war das Dropdown von Tipps unter dem Bild.
Hast du/ihr noch eine Idee wie ich das endgültig beseitigen könnte?

MfG L.

modem-kind

Zitat von mrmurphy

das ist der ganz normale aufbau von verschachtelten listen.

Mrmurphy

jo

djheke

Warum nimmst du nicht meine korregierte Version. Denn, dass deine navi funktioniert ist nur ein Zufall und dein Border zu verdanken. Nimm dein Border testweise raus und du wirst merken, dass du an die Subnavi nicht ran kommst. Aber mach was du willst.

Tags

Benutzer online in diesem Thema