Ergebnis 1 bis 6 von 6

Thema: Menü mit HTML/CSS Text- und Grafikbutton

  1. #1
    HTML Newbie
    Registriert seit
    09.10.2015
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Menü mit HTML/CSS Text- und Grafikbutton

    Hallo Gemeinde,

    Ich habe ein Menü gebastelt, das neben Text- auch einen Grafikbutton enthalten soll.

    HTML-Teil:
    <ul id="navi">
    <li><a href="index.html">Home</a></li>
    <li><a href="ueber_uns.html" id="akt">Über uns</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="guestbook.html">Gästebuch</a></li>
    <li><a href="guide.html"> <img src="guide.gif" alt="" border="0"> </a></li>
    </ul>



    CSS-Teil:

    #navi {
    margin: 0;
    padding: 0;
    width: 10em;
    }

    #navi ul, #navi li {
    margin: 0.625em 0px;
    list-style-type: none;
    font-weight: bold;
    display: block;
    height: 1.88em;
    background: url(Menubutton.gif) no-repeat;
    }

    #navi li a {
    padding-left: 0.625em;
    padding-right: 3.125em;
    padding-top: 0.313em;
    display: block;
    text-decoration: none;
    width: 100.1%;
    background: url(Menubutton.gif) no-repeat;
    }

    #navi a:link, #navi a:visited {
    color: white;
    background: url(Menubutton.gif) no-repeat;
    }

    #navi #akt {
    color: yellow;
    background: url(Menubutton.gif) no-repeat;
    }

    #navi a:hover {
    color: yellow;
    background: url(Menubutton.gif) no-repeat;
    }

    Problem: Wie verhindere ich, daß im Grafik-Button zusätzlich zur Grafik die Hintergrund-Grafik erscheint?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Menü mit HTML/CSS Text- und Grafikbutton

    Hallo

    Wie verhindere ich, daß im Grafik-Button zusätzlich zur Grafik die Hintergrund-Grafik erscheint?
    Wir brauchen einen Link zu der Seite. Ohne die Grafiken können wir nichts erkennen.

    Und das CSS

    Code:
    #navi ul,
    kann bei deinem HTML-Quellcode nicht funktionieren.

    Gruss

    MrMurphy
    Geändert von MrMurphy (09.10.2015 um 21:39 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    09.10.2015
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Menü mit HTML/CSS Text- und Grafikbutton

    Hallo, Problem ist, die Seite ist so noch nicht online, stattdessen ist da eine Uralt-Fassung, in der das Menü aus Tabelle besteht -
    zum Abstand der einzelnen Menüpunkte auch noch leere Zeilen in der Tabelle.

    Ich habe jetzt für die Listeneinträge im Menü zwei Klassen angelegt (Text und Grafik) und den css Teil überarbeitet,
    so daß in der Klasse Text die Menübuttongrafik als Hintergrund und in der Klasse Grafik die Grafik zusätzlich als Hintergrund erscheint.

    css-Teil:

    #navi {
    margin: 0;
    padding: 0;
    width: 10em;
    }

    #navi ul, #navi li {
    margin: 0.625em 0px;
    list-style-type: none;
    font-weight: bold;
    display: block;
    height: 1.88em;
    }

    #navi li a {
    padding-left: 0.625em;
    padding-right: 3.125em;
    padding-top: 0.313em;
    display: block;
    text-decoration: none;
    width: 100.1%;
    }
    #navi li.text {
    background: url(Menubutton.gif) no-repeat;
    }
    #navi li.grafik {
    background: url(guide.gif) no-repeat;
    }
    #navi a:link, #navi a:visited { color: white; }

    #navi #akt {color: yellow; }

    #navi a:hover {color: yellow; }


    HTML-Teil:
    <ul id="navi">
    <li class="Text"><a href="index.html" >Home</a></li>
    <li class="Text"><a href="Ueber_uns.html" id="akt" >Über uns</a></li>
    <li class="Text"><a href="kontakt.html">Kontakt</a></li>
    <li class="Text"><a href="guestbook.html">Gästebuch</a></li>
    <li class="Grafik"><a href="guide.html"> <img src="guide.gif" alt="" border="0"> </a></li>
    </ul>

    Zumindest sieht es jetzt ok aus. Der Menübutton erscheint nur noch bei den Text-Buttons als Hintergrund. Beim Grafikbutton haben wir jetzt dieselbe Grafik sowohl im Button als auch als Hintergrund, besser wäre vermutlich dort einen transparenten Hintergrund in entsprechender Größe zu verwenden.

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Menü mit HTML/CSS Text- und Grafikbutton

    Warum zwei Grafiken?

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    09.10.2015
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Menü mit HTML/CSS Text- und Grafikbutton

    Die Grafik vom "guide" ist dem Titel eines Flyers nachempfunden, der seit geraumer Zeit existiert.
    Die Grafik für die Textbuttons sollte so aussehen, wie auf dem aktuellen Flyer ,Menubutton.gif im blauen Teil dann der entsprechende Text drin.
    Da ich von Natur aus ein fauler Mensch bin, gibts den Button nur "textlos" als Hintergrund.
    Geändert von JensW (11.10.2015 um 08:51 Uhr)

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Menü mit HTML/CSS Text- und Grafikbutton

    Nix Anhang

Ähnliche Themen

  1. HTML und xHTML » html TEXT !!!
    Von sitkra im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 20.09.2011, 13:54
  2. Menü-html wir nicht angezeigt.
    Von Tobse im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.05.2009, 23:40
  3. Hilfe bei Homepage - Menü neben Text
    Von Arno112 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 26.06.2008, 15:23
  4. html menü?
    Von didi2005 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 01.01.2007, 19:14
  5. HTML-Menü
    Von Thyranus im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 05.09.2005, 17:40

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •