[CSS] problem mit bild in navi

Dieses Thema im Forum "Webdesign" wurde erstellt von juppwatis, 2. Februar 2012 .

Schlagworte:
  1. 2. Februar 2012
    problem mit bild in navi

    jetzt habe ich hier nochmals ein problem.
    habe anstatt von "HOME" ein Bild in die Navigationsleiste eingefügt:
    http://www.drinkinggames.de/test_contao/index.php/beer-pong.html

    klickt man aber jedoch eben auf das "Häuschen", um auf die startseite zu gelangen passiert folgendes:

    1. Das Häuschen verschwindet und es steht wieder "HOME" da -> Das soll aber nicht geschehen. Das häuschen soll zu jeder Zeit zu sehen sein
    2. Der erste Untermenüpunkt von "BEER PONG" wird zum "Häuschen" -> Dies soll nicht passieren; der Untermenüpunkt soll natürlich als Text ("Geschichte") bleiben

    Wie behebe ich diese beiden Probleme? Ich gebe ja eigentlich explizit .level_1 .first an, so dass ja der Problem 2 eigentlich gar nicht auftreten sollte oder?
    Und wie muss ich den Code für das Häuschen erweitern, damit dieses auch zu sehen ist, wenn man auf der Startseite ist? Der bisherige Code ist folgender:

    Code:
    .menu .level_1 .sibling .first{/*instead of displaying home the house illustration appears*/
     background: url("/test_contao/tl_files/themes/drinkinggames/graphics/home.png") no-repeat scroll center center transparent;
     color: transparent;
    }
    ich hoffe ihr könnt mir weiterhelfen
     
  2. 2. Februar 2012
    AW: problem mit bild in navi

    Naja in der *beer-pong.html ist der Home Button nicht aktiv, wenn du drauf klickst wird er auf "active" gesetzt und dort wird das Häusschen nicht eingefügt
     
  3. 2. Februar 2012
    AW: problem mit bild in navi

    und wie ändere ich das jetzt mit css? habe schon eigentlich alles mit css und .active versucht deshalb suche ich ja hilfe
     
  4. 2. Februar 2012
    AW: problem mit bild in navi

    Bitteschön, sollte soweit funktionieren.
    Wenn "Home"-Aktiv ist, dann ist der Hintergrund "Hell" und das bild nicht mehr sichtbar, daher der 2. Block in dem ein anderes Bild eingesetzt werden sollte.

    Code:
    .menu .level_1 .first a,
    .menu .level_1 .first span {
    overflow: hidden;
    text-indent: -9999em;
    width: 40px;
    background: url(/test_contao/tl_files/themes/drinkinggames/graphics/home.png) center center no-repeat;
    }
    
    .menu .level_1 .first span {
    background-image: url(/test_contao/tl_files/themes/drinkinggames/graphics/home_ACTIVE.png);
    }
     
  5. 2. Februar 2012
    AW: problem mit bild in navi

    danke. mittlerweile habe ich auch einen anderen weg gefunden mit weniger verschachtelungen. in contao kann man den einzelnen menüpunkten selbst classen zuweisen, so dass es eigentlich recht simpel ist
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.