Ergebnis 1 bis 6 von 6

Thema: Größe des Hintergrund des Hover beeinflussen

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

    Standard Größe des Hintergrund des Hover beeinflussen

    Hallo!

    Ich bin neu hier im Forum und heiße Daniela Stöckl. Ich habe schon einige Webseiten erstellt -
    rein mit HTML/CSS (also reine Handarbeit) und mit Wordpress und Typo3.

    Ich habe nun das Problem, dass es mir nicht gelingt, die Größe des Hintergrunds des Hovers
    zu beeinflussen. Beim Darüberfahren mit der Maus ist der Hintergrund immer genau so hoch bzw.
    lang, so hoch und lang der Linktext ist: siehe http://typo3.p169546.webspaceconfig.de/index.php?id=12

    Der Hintergrund des Hover soll allerdings genau so lang und hoch sein, wie der Hintergrund eines aktiven Menüpünktes.
    Ich habe schon einiges probiert, jedoch mit dem Ergebnis, dass sich alles verschiebt oder zwischen den Farbbalken
    Abstände entstehen. Irgendwie müsste man wahrscheinlich das a-Tag vorher anders festlegen, oder geht es auch anders?

    Habt ihr Tipps, was man beachten muss, damit die Größe des Hovers beeinflusst werden kann?

    Herzlichen Dank gleich mal im voraus! Der CSS-Code ist gleich unten angefügt.

    Daniela Stöckl


    Das zugehörige CSS für die Navigation lautet:

    #navigation {
    width: 960px;
    height: 62px;
    color: #fff;
    float: left;
    position: relative;
    }

    .navmain{
    background: none repeat scroll 0 0 #00458A;
    float: left;
    padding: 0 0 0 3.5%;
    padding: 0 0 0 4.8%;
    position: absolute;
    width: 96.5%;
    width: 95.2%;
    }


    ul.navmain ul{
    position: absolute;
    }

    ul.navmain a{
    color: #fff;
    text-decoration: none;
    }

    ul.navmain, ul.navmain ul {
    list-style-type: none;
    }

    ul.navmain li {
    float: left;
    padding: 2px 8px 2px 8px;
    font-size: 13px;
    height: 17px;
    line-height: 17px;
    }

    ul.navmain li a{
    display: block;
    font-weight:normal;
    }

    ul.navmain .current{
    background-color: #f8ce70;
    padding: 2px 8px 2px 8px;
    }


    ul.navmain li#menuitem11.active,
    ul.navmain li#menuitem12.active,
    ul.navmain li#menuitem13.active,
    ul.navmain li#menuitem14.active {
    background-color: #f8ce70;
    }

    /* HAUPTMENÜ HINTERGRÜNDE */

    /* Hintergrund orange - hover styles */
    ul.navmain li a:hover {
    color: #f3a803;
    background-color: #fff;
    }


    /* Hintergrund blau */
    ul.navmain li#menuitem12.blue,
    ul.navmain li#menuitem12.blue ul.navsub1{
    background-color: #75ace4;
    }
    #menuitem19.current a,
    #menuitem22.current a,
    #menuitem23.current a,
    #menuitem24.current a,
    ul.navmain li#menuitem12.blue a:hover{
    color: #00458a;
    }

    ul.navmain li.active-ebene2 a,
    ul.navmain li.active li.current a{
    color: #f3a803;
    }

    /* Hintergrund grün*/
    ul.navmain li#menuitem12.green,
    ul.navmain li#menuitem12.green ul.navsub1 {
    background-color: #a1c970;

    }

    #menuitem20.current a,
    ul.navmain li#menuitem12.green ul.navsub2 li a,
    ul.navmain li#menuitem12.green a:hover{
    color: #6eae22;
    }

    ul.navmain .green li.active-ebene2 a{
    color: #6eae22;
    }


    /* Hintergrund lila*/
    ul.navmain li#menuitem12.purple,
    ul.navmain li#menuitem12.purple ul.navsub1{
    background-color: #cf5ca7;
    }
    #menuitem21.current a,
    ul.navmain li#menuitem12.purple ul.navsub2 li a,
    ul.navmain li#menuitem12.purple a:hover{
    color: #b20176;
    }
    ul.navmain .purple li.active-ebene2 a{
    color: #b20176;
    }

    ul.navmain .navsub2 li.current a,ul.navmain .navsub2 li a:hover{
    font-weight:bold;
    background: none repeat scroll 0 0 transparent;
    }

    ul.navmain .navsub2 li.current,ul.navmain .navsub2 li a:hover {
    background: none repeat scroll 0 0 transparent;
    }


    #menuitem19.current,
    #menuitem20.current,
    #menuitem21.current,
    #menuitem22.current,
    #menuitem23.current,
    #menuitem24.current,
    ul.navmain li.active-ebene2,
    ul.navmain li.active li.current{
    background-color: #fff;
    }

    .navsub1{
    background: none repeat scroll 0 0 #F8CE70;
    display: block;
    left: 0;
    margin-top: 2px;
    padding: 0 0 0 3.5%;
    padding: 0 0 0 4.8%;
    width: 96.5%;
    width: 95.2%;
    }

    ul.navsub1 li {
    padding: 2px 8px 2px 8px;
    }

    ul.navsub1 li:hover > a{
    background: #fff;
    }

    ul.navsub1 .current{
    height: 17px;
    line-height: 17px;
    padding: 3px;
    padding: 3px 8px 3px 8px;
    }

    .navsub2{
    left: 0;
    padding: 0.2em 0 0 3.5%;
    padding: 0.2em 0 0 4.7%;
    }

    ul.navsub2 li {
    color: #f3a700;
    font-size: 11px;
    float: left;
    background-color: transparent;
    padding: 0px 3px;
    padding: 0px 8px 0px 8px;
    }

    ul.navsub2 a {
    color: #f3a700;
    }

    ul.navsub2 li a:hover {
    background-color: transparent;
    }

    ul.navsub2 li:hover > a {
    background-color: transparent;
    color: #F8CE70;
    padding: 0;
    line-height: 17px;
    height: 17px;
    }

    ul.navsub2 .current {
    background-color: transparent;
    line-height: 17px;
    height: 17px;
    padding: 0px 3px;
    padding: 0px 8px 0px 8px;
    }

    ul.navmain li.current a,
    ul.navmain li.active a,
    ul.navmain .navsub1 li.current a,
    ul.navmain li.blue a,
    ul.navmain li.green a,
    ul.navmain li.blue a,
    ul.navmain li.purple a,
    ul.navmain .navsub1 li.active-ebene2 a,
    ul.navmain .navsub1 li.active-ebene2 ul.navsub2 li.current a,
    ul.navmain .navsub1 li.active-ebene2 ul.navsub2 li a:hover,
    ul.navmain .navsub1 li.current ul.navsub2 li a:hover{
    font-weight:bold;
    }

    ul.navmain .navsub1 li a,
    ul.navmain .navsub1 li.current ul.navsub2 li a,
    ul.navmain .navsub1 li.active-ebene2 ul.navsub2 li a{
    font-weight:normal;
    }
    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
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Größe des Hintergrund des Hover beeinflussen

    Lässt sich durch die roten Ergänzungen lösen (width-Wert ggf. anpassen):

    ul.navmain a{
    color: #fff;
    text-decoration: none;
    display: block;
    width: 120px;

    }

  3. #3
    HTML Newbie
    Themenstarter

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

    Standard AW: Größe des Hintergrund des Hover beeinflussen

    Hallo Sejuma,

    danke für die rasche Antwort.
    Gibt es auch eine Lösung, wo die Breite variabel ist, da die Linktexte ja unterschiedlich lang sind?
    Ich habs bereits mit padding und margin an der gleichen Stelle probiert, jedoch verschiebt sich dann der orange Balken nach unten.

    LG, DStoeckl

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Größe des Hintergrund des Hover beeinflussen

    Wenn du den width-Wert weglässt, passt sich die Breite automatisch nach dem Inhalt an.
    Aber das wolltest du doch ursprünglich verhindern?

  5. #5
    HTML Newbie
    Themenstarter

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

    Lächeln AW: Größe des Hintergrund des Hover beeinflussen

    Ja wenn ich den width-Wert weglasse, ist der Hover genauso breit wie der Linktext.
    Und genau das will ich nicht, er soll breiter und höher sein.


    Hm, ich muss das Ganze genauer beschreiben:

    Der aktive Menüpunkt hat ein padding eingestellt (Klasse current), das gleiche padding soll auch beim Hover
    eingestellt werden. Wenn ich das mache, verschiebt sich beim Drüberfahren mit der Maus die gesamte Zeile
    nach unten und es entsteht zwischen den Menüzeilen ein Leerraum. Was natürlich nicht so sein soll.

    Ich hoffe, es gibt eine Lösung, ohne dass ich das Ganze wieder vollkommen umbauen muss. War so schon
    Arbeit und Tüftelei. Ich hab schon viel herumprobiert, und das Ganz endete immer darin, dass sich alles verschoben hat.

    Danke nochmals!

    Daniela

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

    Standard AW: Größe des Hintergrund des Hover beeinflussen

    Zitat Zitat von DStoeckl Beitrag anzeigen
    Hallo!

    Ich bin neu hier im Forum und heiße Daniela Stöckl. Ich habe schon einige Webseiten erstellt -
    rein mit HTML/CSS (also reine Handarbeit) und mit Wordpress und Typo3.
    Ich habe nun das Problem, dass es mir nicht gelingt, die Größe des Hintergrunds des Hovers
    zu beeinflussen. Beim Darüberfahren mit der Maus ist der Hintergrund immer genau so hoch bzw.
    lang, so hoch und lang der Linktext ist: siehe http://typo3.p169546.webspaceconfig.de/index.php?id=12

    Der Hintergrund des Hover soll allerdings genau so lang und hoch sein, wie der Hintergrund eines aktiven Menüpünktes.
    Ich habe schon einiges probiert, jedoch mit dem Ergebnis, dass sich alles verschiebt oder zwischen den Farbbalken
    Abstände entstehen. Irgendwie müsste man wahrscheinlich das a-Tag vorher anders festlegen, oder geht es auch anders?

    Habt ihr Tipps, was man beachten muss, damit die Größe des Hovers beeinflusst werden kann?

    Herzlichen Dank gleich mal im voraus! Der CSS-Code ist gleich unten angefügt.

    Daniela Stöckl


    Das zugehörige CSS für die Navigation lautet:

    #navigation {
    width: 960px;
    height: 62px;
    color: #fff;
    float: left;
    position: relative;
    }

    .....
    Hallo, ich hatte das gleiche Problem mit dem Hintergrund und jetzt nach der Korrektur des width-Wertes funktioniert alles makellos! Vielen Dank für das Tipp, ich wollte gerade ein neues Thema eröffnen.

    LG
    Markus
    Geändert von markus.po (16.04.2013 um 16:47 Uhr)
    Suche Designer für eine neue WordPress Agentur, bei Interesse einfach eine private Nachricht schreiben!

Ähnliche Themen

  1. SQL RAND durch Wert beeinflussen
    Von WWKiller im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 19.05.2011, 16:55
  2. Anzeige der Adressleiste beeinflussen
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 23.07.2007, 19:32
  3. kann man das peniswachstum beeinflussen?
    Von chilla 90 im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 22.05.2007, 12:33
  4. Hintergrund bei a:hover
    Von Questionmark im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 14.11.2006, 11:29
  5. Hover?
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 22.08.2004, 23:50

Stichworte

Berechtigungen

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