Frage Menu m. Float - schwarze Stellen

windkind · 12 Juli 2015

Hallo,

wir haben in unserem Forum ein Menu eingebaut, welches mit CSS eine Liste derart gestaltet, dass es beim Drüberfahren ausfährt. Funktioniert gut. Nun schrieb mich jedoch eine Userin an, dass sie und ein weiterer User schwarze Stellen bei ausgefahrenem Menu habe. Dies kann ich nicht nachvollziehen und auch im Code nichts entdecken. Beide verwenden Firefox, jetzt Version 39.0, Windows 7, beides ältere Rechner.

Daher frage ich, ob Ihr eine Idee habt, woran dies liegen könnte. Ich habe es bereits mit Umstellung versucht sowie hinzufügen eines unsichtbaren Rahmens mit transparentem Hintergrund.

Anbei die einzelnen Dateien:

menu.css

Code:

/* HEADNAVIGATION - USERLINKS */
heady {
   margin: 0;
   padding: 0;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   z-index: 30;
   opacity:.85;
   background-color: #d3d6cf;
}

heady ul {
   padding: 0px;
   margin: auto;
   width: 850px;
   background-color: #d3d6cf;
}

heady ul:after {
   clear: both;
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   visibility: hidden;
   background-color: #d3d6cf;
}

heady ul,heady ul li{
   background-color: #d3d6cf;
}

heady ul li {
   list-style: none;
  float:left;
  position: relative;
  background-color: transparent !important;
}

heady ul li a {
  text-decoration: none;
  display: block;
  color: #9c0503;
  width: 106px;
   background-color: #d3d6cf;
   text-align: center;
   padding: 0px;
   padding-top: 15px;
   padding-bottom: 15px;
  transition: background 0.3s ease-out; /* explorer 10 */
  -webkit-transition: background 0.3s ease-out; /* chrome & safari */
  -moz-transition: background 0.3 ease-out; /* firefox */
  -o-transition: background 0.3 ease-out; /* opera */
}

heady ul li:hover > a {
  background-color: #b9c4c0 !important;
}

heady ul li:hover > ul {
  visibility: visible;
  background-color: #b9c4c0;
  left: 0;
  width: 150px;
}

heady ul li ul{
  display: inline;
  visibility: hidden;
  position: absolute;
  padding:0px;
}

heady ul li ul li{
   float: none;
   text-align: left;
}

heady ul li ul li a {
  width: 150px;
  padding: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  text-align: left;
}

heady ul li ul li a:hover{
   background-color: #b9c4c0 !important;
   width: 150px;
   padding: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
}

header.html (unwichtige/persönliche Sachen herausgelöscht und durch ... ersetzt) - heady, da es ein ähnliches System (ohne rausfahrende Menus) für Gäste existiert

Code:

<heady>
   <ul>
     <li><a href="usercp.php"><normalfont>Profile</font></a>
       <ul>
         <li><a href="usercp.php?action=profile_edit"><smallfont>Profile</font></a></li>
         <li><a href="usercp.php?action=password_change"><smallfont>Password</font></a></li>
         <li><a href="usercp.php?action=options_change"><smallfont>Options</font></a></li>
         <li><a href="usercp.php?action=avatars"><smallfont>Avatar</font></a></li>
         <li><a href="usercp.php?action=signature_edit"><smallfont>Signature</font></a></li>
         <li><a href="thread.php?threadid=1708"><smallfont>Profile-Help</font></a></li>
       </ul>
     </li>
     <li><a href="#"><normalfont>Userchange</font></a>
         <ul>$userchangebit</ul>
     </li>
     <li><a href="pms.php"><normalfont>Postbox ($countunread)</font></a></li>
     <li><a href="usercp.php?action=favorites"><normalfont>My Favs</font></a></li>
     <li><a href="listen.php"><normalfont>Lists</font></a>
       <ul>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>....</font></a></li>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>...</font></a></li>
       </ul>
     </li>
     <li><a href="#"><normalfont>...</font></a>
       <ul>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>...</font></a></li>
       </ul>
     </li>
     <li><a href="#"><normalfont>...</font></a>
       <ul>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>...</font></a></li>
         <li><a href="..."><smallfont>what you missed</font></a></li>
         <li><a href="search.php?action=24h"><smallfont>the last 24 hours</font></a></li>
         <li><a href="markread.php"><smallfont>mark all read</font></a></li>
       </ul>
     </li>
     <li><a href="logout.php"><normalfont>Logout</font></font></a></li></ul>
</heady>

Screen:

Woran könnte es liegen? Kann man den Code ggf. zusammenfassen? Leider wurde mir dieser so überlassen bzw. wurde immer wieder durch verschiedene Personen darin herumgearbeitet.

Danke schon einmal :)

djheke · 13 Juli 2015

Link zur Seite wär hilfreicher.

windkind · 13 Juli 2015

Gäste können das Menu nicht sehen ;) Würde also nichts bringen.

bdt600 · 13 Juli 2015

windkind schrieb:
Würde also nichts bringen.

Und das, was du uns hier lieferst, bringt auch nichts. Entweder wir können uns das Problem genauer ansehen oder du wirst die Sache alleine regeln müssen.

windkind · 13 Juli 2015

Ich kann euch schlecht einen Account einrichten, da in dem Forum viele private Daten da sind. Was braucht ihr denn noch? Die Einbindung des CSS und des Templates?

bdt600 · 13 Juli 2015

windkind schrieb:
Was braucht ihr denn noch?

Eine Seite, auf der wir uns das ansehen können, ohne erst selbst was zusammen zu stricken

windkind · 13 Juli 2015

Mach ich nachher fertig. Aber es tritt eben nur bei diesen beiden Usern auf. Und auch nicht immer.

scbawik · 13 Juli 2015

windkind schrieb:
Mach ich nachher fertig. Aber es tritt eben nur bei diesen beiden Usern auf. Und auch nicht immer.

Du könntest als erstes mal valides HTML schreiben:
Wer ist <heady>? <smallfont></font>? <normalfont>?!

Ich vermute davon kommt auch der Anzeige-Fehler.

windkind · 13 Juli 2015

Nein ;) Da es in einem Forum ist, ist <smallfont> und </font> durch die Software als kleine Schrift angegeben ;)

<heady> ist aus dem heady { } im CSS formatiert. So hatte ich das auch in meinem Buch stehen. Daher hatte ich da keinen Fehler gesehen...

windkind · 13 Juli 2015

http://fsr.dramalicious.de/beispiel.html - hier die Testseite

scbawik · 13 Juli 2015

windkind schrieb:
Nein ;) Da es in einem Forum ist, ist <smallfont> und </font> durch die Software als kleine Schrift angegeben ;)

Willst du mir jetzt erzählen was valide ist und was nicht?
Vielleicht stimmt dich ja das um…: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

windkind schrieb:
So hatte ich das auch in meinem Buch stehen.

Verbrenn es, sofort.

windkind · 13 Juli 2015

Hier auf der geposteten Seite ist <smallfont> nicht festgelegt - im Original ja.

Ich hab gelernt, dass wenn ich z.B. im CSS

heady {
background-color: ..;
}

definiere, ich es als <heady> nutzen kann, analog zu h1 { } und <h1> etc.

bdt600 · 13 Juli 2015

Dann solltest du das schnell wieder vergessen

scbawik · 13 Juli 2015

windkind schrieb:
Hier auf der geposteten Seite ist <smallfont> nicht festgelegt - im Original ja.

Whatever, <smallfont>Text</font> ist trotzdem absolut falsch.
Der fehlende <!DOCTYPE> sowieso.

windkind schrieb:
Ich hab gelernt, dass wenn ich z.B. im CSS

heady {
background-color: ..;
}

definiere, ich es als <heady> nutzen kann, analog zu h1 { } und <h1> etc.

Können != dürfen.
Mit http://caniuse.com/#feat=custom-elements dürfte man es, aber dann müsste mindestens ein "-" im Namen vorkommen.
Wie gesagt, verbrenn das Buch.

windkind · 13 Juli 2015

Okay - dann stell ich das um. Vll hilft das ja was. Muss ich dann in alle <ul> und <li> ein class=... setzen?

scbawik · 13 Juli 2015

windkind schrieb:
Muss ich dann in alle <ul> und <li> ein class=... setzen?

Äh, nein? Wieso?

windkind · 13 Juli 2015

Weil ich sonst nie mit diesen Sachen arbeite ;) Wo muss es denn dann rein? Bitte.

scbawik · 13 Juli 2015

windkind schrieb:
Weil ich sonst nie mit diesen Sachen arbeite ;) Wo muss es denn dann rein? Bitte.

Was muss wo rein?
Geht es um die kleine Schrift?

HTML:

<ul>
<li><a href="#">Normal</a><li>
<li><a href="#" class="small">Klein</a><li>
</ul>

windkind · 13 Juli 2015

Nein, wenn ich das, was jetzt als CSS z.B. als heady {} deklariert ist, als <heady> habe, dann wird das ja auf das <ul> etc. übertragen. Wenn ich nun #header {} und <div id="heady"> nutze, wird es dann auch so automatisch übernommen oder muss ich immer <ul id="heady"> schreibe?

djheke · 13 Juli 2015

Valide html5 navi

Code:

<!DOCTYPE HTML>
<html><head>
<meta charset="UTF-8">
<style>

nav {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 30;
  opacity:.85;
  background-color: #d3d6cf;
}
nav ul {
  padding: 0px;
  margin: auto;
  width: 850px;
  background-color: #d3d6cf;
}
nav ul:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
  background-color: #d3d6cf;
}
nav ul,nav ul li{
  background-color: #d3d6cf;
}
nav ul li {
  list-style: none;
  float:left;
  position: relative;
  background-color: transparent !important;
}
nav ul li a {
  text-decoration: none;
  display: block;
  color: #9c0503;
  width: 106px;
  background-color: #d3d6cf;
  text-align: center;
  padding: 0px;
  padding-top: 15px;
  padding-bottom: 15px;
  transition: background 0.3s ease-out; /* explorer 10 */
  -webkit-transition: background 0.3s ease-out; /* chrome & safari */
  -moz-transition: background 0.3 ease-out; /* firefox */
  -o-transition: background 0.3 ease-out; /* opera */
}
nav ul li:hover > a {
  background-color: #b9c4c0 !important;
}
nav ul li:hover > ul {
  visibility: visible;
  background-color: #b9c4c0;
  left: 0;
  width: 150px;
}
nav ul li ul{
  display: inline;
  visibility: hidden;
  position: absolute;
  padding:0px;
}
nav ul li ul li{
  float: none;
  text-align: left;
}
nav ul li ul li a {
  width: 150px;
  padding: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  text-align: left;
}
nav ul li ul li a:hover{
  background-color: #b9c4c0 !important;
  width: 150px;
  padding: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
}

nav ul ul a {
font-size:75%;
}

</style>
<title>Testseite Beispiel</title>
</head>

<body>

<nav>
  <ul>
  <li><a href="http://fsr.dramalicious.de/usercp.php">Profile</a>
  <ul>
  <li><a href="">Profile</a></li>
  <li><a href="">Password</a></li>
  <li><a href="">Options</a></li>
  </ul>
  </li>
  <li><a href="#">PunPunktX</a>
  <ul>
  <li><a href="">A</a></li>
  <li><a href="">B</a></li>
  </ul>
  </li>
  <li><a href="">Postbox (0)</a></li>
  <li><a href="">My Favs</a></li>
  <li><a href="">Lists</a>
  <ul>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX.</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  </ul>
  </li>
  <li><a href="">PunPunktX</a>
  <ul>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  </ul>
  </li>
  <li><a href="">PunPunktX</a>
  <ul>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">PunPunktX</a></li>
  <li><a href="http://fsr.dramalicious.de/PunPunktX">what you missed</a></li>
  <li><a href="">the last 24 hours</a></li>
  <li><a href="">mark all read</a></li>
  </ul>
  </li>
  <li><a href="">Logout</a></li></ul>
</nav>
</body></html>

Wenn du kein html5 nutzen kannst oder möchtest, dann mach aus <nav>ein <div id=nav"> im html
und aus nav ein #nav im css.

Frage Menu m. Float - schwarze Stellen

Neues Mitglied

Aktives Mitglied

Neues Mitglied

bdt600

Guest

Neues Mitglied

bdt600

Guest

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

bdt600

Guest

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Aktives Mitglied