Menü Modul Design mit Bilder für die Links

Worti · 27. August 2015

Hallo alle zusammen,

da meine CSS-Kenntnisse nicht so berauschend sind, und ich es schon etwas länger probiere, bitte ich um Eure Hilfe. Ich möchte gerne ein Topmenü (Intern,Persönlich,Individuell und Unabhänging) nach dieser Vorgabe gestalten:

Im Seitenquelltext finde ich folgenden HTML-Code:

Code

<ul class="nav menu_top"><li class="item-102"><a href="/intern.html" ><img src="/images/topmenu/Intern.jpg" alt="Intern" /><span class="image-title">Intern</span> </a></li><li class="item-103"><a href="/persönlich.html" ><img src="/images/topmenu/Persoenlich.jpg" alt="Persönlich" /><span class="image-title">Persönlich</span> </a></li><li class="item-104"><a href="/individuell.html" ><img src="/images/topmenu/Individuell.jpg" alt="Individuell" /><span class="image-title">Individuell</span> </a></li><li class="item-105"><a href="/unabhängig.html" ><img src="/images/topmenu/Unabhaengig.jpg" alt="Unabhängig" /><span class="image-title">Unabhängig</span> </a></li></ul>

Und das ist mein bisheriger CSS-Code:

Code

.moduletable_top {
  list-style: none;
}


.moduletable_top h3 {
  left: -3000px;
  position: absolute;
}


ul.menu_top {
  padding-right: 0px;
  padding-top: 0px;
  text-align: left; /*Ersettze es mit left, center, oder right um die Ausrichtung festzulegen*/
}


.menu_top li {
  display: inline;
  font-size: 12.5pt;
  font-weight: bold;
  margin: 0px 25px;
  width: 125px;
}


.menu_top li img {
}


.image-title {
  clear: both;
}


.menu_top li a:link, .menu_top li a:visited {
  color: #ff9933;
}


.menu_top li a:hover {
  text-decoration: underline;
}

Alles anzeigen

Freue mich über Eure Hilfe.
Gruß
Markus

NinjaTurtle · 27. August 2015

Kannst Du im Menüpunkt unter Seitenanzeige - dort wirst Du fündig und kannst pro Eintrag ein eigenes Bild hochladen

Worti · 28. August 2015

Hallo NinjaTurtle,

danke für Deine Antwort. Das habe natürlich bereits gemacht (siehe HTML-Code, dort sind die Images schon enthalten). Ich bekomme es von den Styles nicht so hin, dass der Text der Menüpunkte unter den Bildern erscheint.

Gruß
Markus

Worti · 28. August 2015

Hallo alle zusammen,

hier ist die CSS-Lösung:

Code

.moduletable_top {
  list-style: none;
}


.moduletable_top h3 {
  left: -3000px;
  position: absolute;
}


ul.menu_top {
  padding-right: 0px;
  padding-top: 0px;
  text-align: left; /*Ersettze es mit left, center, oder right um die Ausrichtung festzulegen*/
}


.menu_top li img {
    float: left;
}
.menu_top li a span {
    float: left;
}
.menu_top li {
    display: inline;
    float: left;
    font-size: 12.5pt;
    font-weight: bold;
    margin: 0 13px;
    width: 125px;
}


.menu_top li a:link, .menu_top li a:visited {
  color: #ff9933;
}


.menu_top li a:hover {
  text-decoration: underline;
}

Alles anzeigen

Danke an Tom für die Lösung.
Gruß
Markus

Danke an Tom