Ergebnis 1 bis 2 von 2

Thema: CSS anpassen, ändern ...

  1. #1
    Youngster
    Registriert seit
    24.06.2014
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS anpassen, ändern ...

    Hallo,

    ich habe mit meiner Navi ein Problem und hoffe dass ihr mir helfen könnt.

    Also, der Code müsste (automatisch) durch die CSS erkennen das ein Untermenü da ist und das irgendwie anzeigen.

    Also Beispiel: Auf meiner Testseite ist ein Link "Leistungen" unterhalb befinden sich Links.
    Ich habe im HTML ein Bild welches anzeigen soll das Unterseite da sind.

    HTML-Code:
    <li><a href="#"><img src="img/li.png" alt="" class="li-klein" /> Leistungen</a>
    Das geht so weit. Ich muss nur, wenn ich weitere Unterseiten an anderer Stelle erstellen möchte das Bild jedes Mal mit der Hand in den HTML Code einfügen.

    Das möchte ich so ändern, das eine CSS Einstellung besteht, die ein Bild oder was auch immer, automatisch einfügt, sobald der Code erkannt wird.

    Also:

    HTML-Code:
    <nav id="nav">
              <ul id="navi">
               <li class="seite"><a href="index.php" title="Startseite">Startseite</a></li>
     
               <li><!-- Hier soll das Bild sein. Z.B. --> <a href="#">Leistungen</a>
                <ul>
                <li><a href="#" title="Webdesign">»&nbsp;Eine Seite</a></li>
                <li><a href="#" title="Fotodesign">»&nbsp;Seite</a></li>
                <li><a href="#" title="Fotoservice">»&nbsp;Noch eine Seite</a></li>
                </ul>
               </li>
     
               <li><!-- Hier soll das Bild sein. Z.B. --> <a href="#">Was anderes</a>
                <ul>
                <li><a href="#" title="Webdesign">»&nbsp;Eine Seite</a></li>
                <li><a href="#" title="Fotodesign">»&nbsp;Seite</a></li>
                <li><a href="#" title="Fotoservice">»&nbsp;Noch eine Seite</a></li>
                </ul>
               </li>
     
     
               <li><a href="#" title="Kontakt">Kontakt</a></li>
               <li><a href="#" title="Impressum">Impressum</a></li>
              </ul>
            </nav><!-- ende navi -->
    </div> <!-- ende header -->
    Das ist der HTML Code wie er jetzt ist.

    HTML-Code:
    <nav id="nav">
              <ul id="navi">
               <li class="seite"><a href="index.php" title="Startseite">Startseite</a></li>
     
               <li><a href="#"><!-- Hier ist das Bild. --> <img src="img/li.png" alt="" class="li-klein" /> Leistungen</a>
                <ul>
                <li><a href="#" title="Webdesign">»&nbsp;Eine Seite</a></li>
                <li><a href="#" title="Fotodesign">»&nbsp;Seite</a></li>
                <li><a href="#" title="Fotoservice">»&nbsp;Noch eine Seite</a></li>
                </ul>
               </li>
     
               <li><a href="#" title="Kontakt">Kontakt</a></li>
               <li><a href="#" title="Impressum">Impressum</a></li>
              </ul>
            </nav><!-- ende navi -->
    </div> <!-- ende header -->
    Hier noch der CSS Code

    Code:
    #nav{
        max-width:800px;
        margin: auto;
    }
    #navi li{
        float:left;
        display:inline;
        font-family: 'PT Sans', sans-serif;
        letter-spacing: 0.2em;
    }
    #navi ul{
        width:180px;
        list-style: none;
        position: absolute;
    }
    #navi li ul{
        display:none;
    }
    #navi li ul li{
        float:left;
        width:180px;
        background: #2F2F2F url(../img/header.png);
        border-bottom:1px solid #3F3F3F;
    }
    #navi li a{
        padding:30px 22px 15px 22px;
        font-size : 0.9em;
        color:#DFDFDF;
        text-decoration:none;
        display:block;
        border: none;
    }
    #navi li.seite a{
        color:#FFFFD5;
    }
    #navi li ul li a{
        padding:15px;
        color:#FFFFFF;
        text-decoration:none;
        display:block;
    }
    #navi li:hover ul{
        display:block;
    }
    #navi li a:hover, a.seite:hover{
        background: #2F2F2F;
        color: #00A179;
    }
    Liebe Grüße
    Andre
    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
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: CSS anpassen, ändern ...

    Ich sehe hier 3 Alternativen zu deinem Weg:

    a) Du vergibst dem <li> in dem es ein <ul> gibt eine zusätzliche Klasse und erzeugst so per CSS ein Hintergrundbild an der von dir gewünschten Position. Nachteil: auch hierfür musst Du den HTML-Code jedes Mal anpassen, aber weniger als bei deiner Variante.
    b) Du hängst das gewünschte Bild an das <ul> innerhalb eines <li> und positionierst es an die von dir gewünschte Stelle. So würde immer dann wenn eine <ul> innerhalb des Menüpunkts eingefügt wird automatisch das Bild auch eingefügt werden. Ob das bei dir möglich und sinnvoll ist hängt von deinem Design ab.
    c) Du machst deine oder Variante a) mittels PHP, d.h. Du setzt die zusätzliche Eigenschaft wenn Du per PHP das Menü zusammenstellst. Das ist imho der modernste und sicherste Weg.

Ähnliche Themen

  1. Design anpassen
    Von ich_hab_eine_frage im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 19.10.2009, 22:35
  2. Meldungen anpassen
    Von goldeneye im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 07.09.2008, 21:38
  3. design anpassen
    Von DEC|The_Fuerby_X im Forum HTML & CSS Forum
    Antworten: 78
    Letzter Beitrag: 31.05.2007, 15:18
  4. Gimp anpassen
    Von Dragon-D im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 25.05.2007, 15:00
  5. Anpassen und doctyp
    Von Martin279 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 09.04.2007, 19:23

Stichworte

Berechtigungen

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