CSS - nach Button dynamisch Bild einblenden

Diskutiere mit über: CSS - nach Button dynamisch Bild einblenden im Web Page Design Forum

  1. VMPR

    VMPR Thread Starter MacUser Mitglied

    Beiträge:
    1.084
    Zustimmungen:
    30
    Registriert seit:
    17.02.2005
    Hallo zusammen,

    es fiel mir schwer einen passenden Threadtitel zu finden, aber lasst es mich kurz erklären:

    Ich plane eine kleine Seite (Demo: http://www.patrickqueisler.de/wii/), auf der die Hauptnavigation mit Tabs realisiert werden soll.

    Diese würde so ausgegeben:

    Code:
    <ul id="navigationlist">
       <li><a href="#" class="active">Blog</a></li>
       <li><a href="#">Reviews</a></li>
       <li><a href="#">Downloads</a></li>
       <li><a href="#">Friends</a></li>
    </ul>
    
    Wie ihr seht ist in diesem Fall der erste Menüpunkt "active" - soll also hervorgehoben werden.

    Dieser wird nun also mit CSS so gestylt:

    Code:
    #navigation .active {
    	color: #49c3f5;
    	background-image: url(img/activetab_left.jpg);
    	background-position:left;
    	background-repeat: repeat-x;
    	padding-left: 40px;
    	padding-right: 30px;
    }
    
    Das Bild "activetab_left.jpg" ist 500px breit und zeigt quasi nur die linke, abgerundete Seite und erweitert sich dann halt über die Breite des Menüpunktes.

    Nun soll natürlich auf der rechten Seite auch wieder diese Anrundung rein, das wäre dann das Bild "activetab_right.jpg".

    Wie bekomme ich dies nun mit CSS hinter den Text im Button ("Blog")? Oder muss ich das mit PHP machen? Hilfe! :)
     
    Zuletzt bearbeitet: 18.08.2006
  2. mcintyre

    mcintyre MacUser Mitglied

    Beiträge:
    1.177
    Zustimmungen:
    2
    Registriert seit:
    10.12.2003
    Tag, Pat!

    Also ich würde für die Navigationsleiste eine Hintergrundgrafik erstellen (also mit einem entsprechenden Container) und dann für die jeweiligen Zustände der Menüpunkte eine Klasse definieren. Die dann noch den einzelnen Links zuordnen...fertig!
     
  3. VMPR

    VMPR Thread Starter MacUser Mitglied

    Beiträge:
    1.084
    Zustimmungen:
    30
    Registriert seit:
    17.02.2005
    Dann ist es aber nicht dynamisch. Das Menü wird ja per CMS gesteuert/angelegt. Ich müsste dann ja für jeden Menüpunkt einen eigenen Hintergrund anlegen, falls dieser aktiv ist, je nach Breite bzw. Länge des Textes. Was, wenn man einen neuen Menüpunkt anlegt?

    Vielleicht hab ichs auch nur noch nicht kapiert, hast nen Beispiel? Ich meine das schonmal so oder so ähnlich gesehen zu haben und bin mir relativ sicher, dass es mit CSS geht, ich weiß halt nur noch nicht wie :)
     
  4. mcintyre

    mcintyre MacUser Mitglied

    Beiträge:
    1.177
    Zustimmungen:
    2
    Registriert seit:
    10.12.2003
    Mmmmh, ok, das mit dem CMS habe ich dann wohl nicht mitbekommen...

    Sollte aber auf gleiche Weise funktionieren. Du musst halt nur eine Klasse für die Navigation einrichten und dann eine zuätzliche Unterklasse "active" und dort dann das Hintergrundbild ändern.

    Wobei mir einfällt, nicht jeder Browser kommt mt "ative" zurecht (Opera hat da, glaube ich, Probleme mit).

    Mal sehen ob ich irgendwo ein Beispiel finde...
     
  5. mcintyre

    mcintyre MacUser Mitglied

    Beiträge:
    1.177
    Zustimmungen:
    2
    Registriert seit:
    10.12.2003
  6. VMPR

    VMPR Thread Starter MacUser Mitglied

    Beiträge:
    1.084
    Zustimmungen:
    30
    Registriert seit:
    17.02.2005
    Ja generell schon, nur das mein Hintergrund für "active" eben aus 2 Teilen bestehen MUSS, wenn die Breite dynamisch sein soll :)
     
  7. VMPR

    VMPR Thread Starter MacUser Mitglied

    Beiträge:
    1.084
    Zustimmungen:
    30
    Registriert seit:
    17.02.2005
    Hoppala, jetzt funktioniert der Link zur Demo auch: http://www.patrickqueisler.de/wii/
     
  8. Pingu

    Pingu MacUser Mitglied

    Beiträge:
    4.894
    Zustimmungen:
    341
    Registriert seit:
    04.08.2003
  9. VMPR

    VMPR Thread Starter MacUser Mitglied

    Beiträge:
    1.084
    Zustimmungen:
    30
    Registriert seit:
    17.02.2005
  10. mcintyre

    mcintyre MacUser Mitglied

    Beiträge:
    1.177
    Zustimmungen:
    2
    Registriert seit:
    10.12.2003
    Na, dann bin ich ja mal auf Deine neue Seite gespannt... :)
     
Die Seite wird geladen...
Ähnliche Themen - CSS nach Button Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
Safari verrückt Navigation nach rechts. Hilfe! CSS Web Page Design 22.02.2009
[CSS] Bild nach unten vervielfältigen Web Page Design 10.11.2006
Webdesign-Workflow: Photoshop/Indesign nach HTML/CSS Web Page Design 13.10.2005
css a:hover bleibt nach Klick Web Page Design 04.08.2004

Diese Seite empfehlen

Benutzerdefinierte Suche