[CSS] Button achtergrond aanpassen - Softwareontwikkeling

vrijdag 15 april 2005 10:44

Acties:

Bl@@T @@P!!!

Topicstarter

Ik heb een probleem op de volgende site:

http://www.vitepress.nl/test/

Als je met je muis over het onderste menu gaat highlight hij de knop door de classname van het object aan te passen:

code:

1	<td class="menuItem" onclick="gourl('main.php')" onMouseOver="this.className='menuItem2'" onMouseOut="this.className='menuItem'">Home</td>

De css die ik gebruik is:

code:

.hoofdmenu .menuItem{
  width: 110px;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
  background: url(../images/menu/blue/button.gif);
  background-repeat: repeat-x;
  cursor: pointer;
  vertical-align: middle;
}

.hoofdmenu .menuItem2{
  width: 110px;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
  background: url(../images/menu/blue/button_over.gif);
  background-repeat: repeat-x;
  cursor: pointer;
  vertical-align: middle;
}

Het probleem is dat als ik de site lokaal bekijk er geen problemen zijn. Als ik echter de site upload om te testen laadt hij elke keer als je met de muis over een knop gaat de images van dat menu opnieuw in. Hij flikkert hierdoor.

Ik heb al geprobeerd om dit op te lossen door bij demouseover de positie van de achtergrond aan te passen en een plaatje te maken::

| achtergrond normaal
| achtergrond highlight

Echter flikkert hij hiermee ook.

Is er iemand die me hiermee kan helpen?

[ Voor 18% gewijzigd door Kayshin op 15-04-2005 10:45 ]

My personal videoteek: -Clique-; -NMe- is een snol!

vrijdag 15 april 2005 10:47

Acties:

Salandur

Software Engineer

in firefox werkt het prima. welke browser gebruik je? bij ie kan het zijn dat je op een iets andere manier de style-class moet wijzigen ivm het niet (correct) volgend van DOM. Op internet zijn er vast wel wat oplossingen voor te vinden.

Assumptions are the mother of all fuck ups | iRacing Profiel

vrijdag 15 april 2005 10:49

Acties:

Willem

Home, Registreren etc?

Die doen het hier prima.

Motor onderhoud bijhouden

vrijdag 15 april 2005 10:53

Acties:

Kayshin

Bl@@T @@P!!!

Topicstarter

In mijn opera werkt het, maar daar is nog niet naar gekeken verder. De knoppen kloppen dan ook nog niet helemaal.

Het gaat om IE. Er zijn hier 2 pc's waar dit probleem mee is. (Meer pc's hebben we niet, alleen mac's

)

My personal videoteek: -Clique-; -NMe- is een snol!

vrijdag 15 april 2005 10:56

Acties:

Sappie

De Parasitaire Capaciteit!

ff een sidenote:

Je hebt in css ook zoiets als pseudo classes

Je css en html (je kunt namelijk de onmouseover en onmouseout events weglaten) worden daardoor een stuk minder bloated :

code:

.hoofdmenu .menuItem{
  width: 110px;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
  background: url(../images/menu/blue/button.gif);
  background-repeat: repeat-x;
  cursor: pointer;
  vertical-align: middle;
}

.hoofdmenu .menuItem:hover{
  background: url(../images/menu/blue/button_over.gif);
}

In IE werkt deze pseudo class niet standaard op alle elementen (werkt alleen op <a>'s). Een mooie workaround vind je bijv hier: http://www.naarvoren.nl/artikel/hover.html

[ Voor 9% gewijzigd door Sappie op 15-04-2005 11:00 ]

Specs | Audioscrobbler

vrijdag 15 april 2005 11:00

Acties:

Kayshin

Bl@@T @@P!!!

Topicstarter

Als dat zou werken wel ja. Ik heb dat al eens met die behavor geprobeerd, maar dat wou niet echt werken toen.

Pseudo classes gebruik ik normaal gesproken ook

[ Voor 1% gewijzigd door Kayshin op 15-04-2005 11:29 . Reden: Typo ]

My personal videoteek: -Clique-; -NMe- is een snol!

vrijdag 15 april 2005 11:30

Acties:

Sappie

De Parasitaire Capaciteit!

Ik gebruik die behavior al langer en heb er nog nooit problemen mee gehad eigenlijk

Ik weet ook niet precies waarom je probleem zich voordoet.

Weer enigszins offtopic:

Verder wil ik je nog een (klein) zetje geven in de goede richting; namelijk het zo weinig mogelijk gebruik maken van framesets en tabellen om je layout te bewerkstelligen:

Een (semantisch correcter) alternatief voor je menutje:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>test</title>
        <style type="text/css">
            * {
                font-family: verdana;
                font-size: 10px;
            }
            
            .balk {
                background: url("button.gif") repeat-x;
                width: 100%;
                height: 19px;
            } 
            
            .hoek {
                width: 19px;
                height: 19px;
            }
            
            .links {
                float: left;
                background: url("hoek_links.gif") no-repeat;
            }
            
            .rechts {
                float: right;
                background: url("hoek_rechts.gif") no-repeat;
            }
    
            #hoofdmenu {
                float: left;
                list-style: none;
                margin: 0;
                height: 19px;
            }
            
            #hoofdmenu li {
                width: 110px;
                display: inline;
                padding: 3px 0;
                float: left;
                text-align: center;
            }
            
            #hoofdmenu li:hover {
                background: url("button_over.gif") repeat-x;
            }
            
            #hoofdmenu li a {
                color: white;
                font-weight: bold;
                text-decoration: none;
            }
                    
        </style>
    </head>
    <body>
         <div class="balk">
             <div class="hoek links"></div>
             <ul id="hoofdmenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Registreren</a></li>
                <li><a href="#">Login</a></li>
             </ul>
             <div class="hoek rechts"></div>
         </div>
    </body>
</html>

[ Voor 41% gewijzigd door Sappie op 15-04-2005 11:34 ]

Specs | Audioscrobbler

vrijdag 15 april 2005 14:41

Acties:

Verwijderd

Helaas een irritante bug van Internet Explorer. Deze herlaadt bij bepaalde background properties het hele plaatje opnieuw. Maakt niet uit als je bij een :hover alleen maar de positie veranderd, hij herlaadt het plaatje gewoon overnieuw. Hierdoor zie je dus dat je knop flikkert.

Het ligt overigens maar net aan je eigen verbinding naar de server waarop de plaatjes staan of je dat flikkeren nu wel of niet ziet (ik zie het namelijk niet in IE6). Maar ik neem aan dat de meeste mensen hier toch wel last van zullen hebben.

Er zijn wel oplossingen voor overigens. Met rollover knopjes in lijsten gebruik ik zelf altijd de volgende oplossingen:

<li> <- hier geef ik in css het normale plaatje aan als achtergrond
<a href="#">link</a> <- hier geef ik in css bij :link het normale plaatje aan en bij :hover het rollover plaatje
</li>

Zo wordt het plaatje bij de a tag wel opnieuw geladen door IE maar dit zie je niet omdat de li tag dezelfde achtergrond heeft als het normale plaatje. Beetje vaag misschien, maar er zijn nog andere oplossingen.

Dit is een pagina die geheel over dit probleem gaat: http://www.fivesevensix.com/studies/ie6flicker/

vrijdag 15 april 2005 15:22

Acties:

Kayshin

Bl@@T @@P!!!

Topicstarter

@Sappie: Ziet er goed uit wat je gemaakt hebt. De keuze tot frames en tabellen is bij ons bewust geweest.
Bij de li:hover doet hij evengoed nix btw...

We willen het graag voortzetten in de tabellen omdat dit in ons geval makkelijker in elkaar te zetten is.

We hebben verder ook nog te maken met een baas die ons op de vingers zit te kijken...

My personal videoteek: -Clique-; -NMe- is een snol!