[CSS] Niet werkende buttons

Pagina: 1
Acties:

  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
Heyy,,

Ik heb n probleem met de css buttons in me menu..

Ik heb twee achtergronden voor de buttons, eentje voor de normale link en eentje voor mouse-over. Echter als ik er overheen ga blijft de achtergrond hetzelfde..

kan iemand me misgien vertellen wat het probleem is? Aangezien ik niet zoveel ervaring heb nog..

De codes:
de CSS
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#menu { height:30px; background:url(logo.jpg) repeat-x left top; }
#menu ul { list-style-type:none; }
#menu ul li { float:left; margin-top:4px; }
#menu li a span { display:none; }
#menu li a { display:block; height:26px; }


.home { background-image:url(file:///C|/Documents%20and%20Settings/Jesse/Bureaublad/Projecten/RawDesign/button.jpg); width:90px; }
.aboutus { background-image:url(file:///C|/Documents%20and%20Settings/Jesse/Bureaublad/Projecten/RawDesign/button.jpg); width:90px; }
.rawevents { background-image:url(file:///C|/Documents%20and%20Settings/Jesse/Bureaublad/Projecten/RawDesign/button.jpg); width:90px; }
.partners { background-image:url(file:///C|/Documents%20and%20Settings/Jesse/Bureaublad/Projecten/RawDesign/button.jpg); width:90px; }
.contact { background-image:url(file:///C|/Documents%20and%20Settings/Jesse/Bureaublad/Projecten/RawDesign/button.jpg); width:90px; }


a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(button.jpg) no-repeat;
height: 30px;
width: 90px;
vertical-align: middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding-top: 5px;
padding-left: 18px;
text-decoration: none;
}

a.mainlevel:hover {
background-image:url(file:///C|/Documents and Settings/Jesse/Bureaublad/Projecten/RawDesign/button_over.jpg);
height:30px;
width:90px;
font-family:"Rockwell Extra Bold";
}


De HTML
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">

<div id="menu">
<ul>
<li class="home"><a href="#">Link 1</a></li>
<li class="aboutus"><a href="#">Link 2</a></li>
<li class="rawevents"><a href="#">Link 3</a></li>
<li class="partners"><a href="#">Link 4</a></li>
<li class="contact"><a href="#">Link 5</a></li>
</ul>
</div>

</body>


</html>


Je hoeft geen tabel om je code heen te plakken ;)

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Sjoerd
  • Registratie: December 2003
  • Niet online
Even offtopic maar kan je even wat enters plaatsen maakt het geheel wat leesbaarder, nu moet ik horizontaal gaan scrollen :+

Modelbouw - Alles over modelbouw, van RC tot diorama


  • Reinier
  • Registratie: Februari 2000
  • Laatst online: 15:07

Reinier

\o/

Check de highlighting in je post: er zitten spaties in de url van je plaatje.

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Verander de a.mainlevel:hover eens naar:

Cascading Stylesheet:
1
a:hover{ }

Aangezien je nu verwijst naar een class op je linkjes die je nu niet hebt gespecificeerd :)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
oke :) gedaan het geeft al iets meer verschil.. alleen de achtergrond verspringt nog steeds niet.. de lettertypen wel maar het plaatje blijft hetzelfde.. :O

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
sorry die gaap moet een geschokt ventje zijn :P

Modbreak:Gebruik daar voortaan de Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/edit.gif knop voor als je als laatste hebt gereageerd in een topic ;)

[ Voor 68% gewijzigd door BtM909 op 08-02-2007 14:14 ]

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Even een kleine opmerking; het volgende werkt prima op je eigen pc:
code:
1
file:///C|/Documents%20and%20Settings/Jesse/Bureaublad/Projecten/RawDesign/button.jpg

Het werkt echter niet als je je map verplaatst, gebruik daarom altijd relatieve url's. Even aangenomen dat je site in de map "RawDesign" staat en je css in de root van die map, wordt je url:
code:
1
button.jpg

  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
Ik heb nu het volgende staan, alleen is nu dus nog het probleem dat de achtergrond van de buttons blijft staan.. oftewel er nix gebeurt als ik er met de muis overheen ga.. waar ben ik de mist in gegaan?
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#menu { height:30px; background:url(logo.jpg) repeat-x left top; }
#menu ul { list-style-type:none; }
#menu ul li { float:left; margin-top:4px; }
#menu li a span { display:none; }
#menu li a { display:block; height:26px; }


.home { background-image:url(button.jpg); width:90px; }
.aboutus { background-image:url(button.jpg); width:90px; }
.rawevents { background-image:url(button.jpg); width:90px; }
.partners { background-image:url(button.jpg); width:90px; }
.contact { background-image:url(button.jpg); width:90px; }


a:link, a.mainlevel {
display: block;
background: url(button.jpg) no-repeat;
height: 30px;
width: 90px;
vertical-align: middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding-top: 5px;
padding-left: 18px;
text-decoration: none; 
}

a:hover {
background-image:url(button_over.jpg);
height:30px;
width:90px;
font-family:"Rockwell Extra Bold";
}


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">

    <div id="menu">
        <ul>
            <li class="home"><a href="#">Link 1</a></li>
            <li class="aboutus"><a href="#">Link 2</a></li>
            <li class="rawevents"><a href="#">Link 3</a></li>
            <li class="partners"><a href="#">Link 4</a></li>
            <li class="contact"><a href="#">Link 5</a></li>
        </ul>
    </div>

</body>


</html>


Modbreak:Gebruik alleen maar [code=css] en [code=html] en laat die table tags met rust :P

[ Voor 4% gewijzigd door BtM909 op 08-02-2007 14:15 ]

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Reinier
  • Registratie: Februari 2000
  • Laatst online: 15:07

Reinier

\o/

offtopic:
Wat ben je nou met tabellen in je post aan het doen? Wordt er niet leesbaarder van ;)

  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
sorry mijn fout |:(

ZO dus:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#menu { height:30px; background:url(logo.jpg) repeat-x left top; }
#menu ul { list-style-type:none; }
#menu ul li { float:left; margin-top:4px; }
#menu li a span { display:none; }
#menu li a { display:block; height:26px; }


.home { background-image:url(button.jpg); width:90px; }
.aboutus { background-image:url(button.jpg); width:90px; }
.rawevents { background-image:url(button.jpg); width:90px; }
.partners { background-image:url(button.jpg); width:90px; }
.contact { background-image:url(button.jpg); width:90px; }


a:link, a.mainlevel {
display: block;
background: url(button.jpg) no-repeat;
height: 30px;
width: 90px;
vertical-align: middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding-top: 5px;
padding-left: 18px;
text-decoration: none; 
}

a:hover {
background-image:url(button_over.jpg);
height:30px;
width:90px;
font-family:"Rockwell Extra Bold";
}


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">

    <div id="menu">
        <ul>
            <li class="home"><a href="#">Link 1</a></li>
            <li class="aboutus"><a href="#">Link 2</a></li>
            <li class="rawevents"><a href="#">Link 3</a></li>
            <li class="partners"><a href="#">Link 4</a></li>
            <li class="contact"><a href="#">Link 5</a></li>
        </ul>
    </div>

</body>


</html>

[ Voor 97% gewijzigd door Rebellista op 08-02-2007 14:17 ]

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Reinier
  • Registratie: Februari 2000
  • Laatst online: 15:07

Reinier

\o/

Als ik het lokaal test werkt het prima, dus het enige dat ik kan verzinnen is dat button_over.jpg niet bestaat...

  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
ik heb em nu aangepast.. misgien moet ik gewoon maar ff overnieuw beginnen.. hiij pakt ten eerste de witte tekst niet die normale link zou moeten aangeven, en ten tweede is button.jpg gewoon niet meer in beeld opeens :X

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
Heyy,,

Ik heb simpele, maar wel werkende css button gemaakt, met verandering van achtergrond.

Mijn vragen zijn echter nog;

1) hoe kan ik zorgen voor wat ruimte tussen de buttons?

en

2) hoe zorg ik dat de tekst gewoon perfect in het midden staat ipv alleen op horizontale schaal?

Dit zijn de twee codes waaruit mn testpagina is opgebouwd:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CSS Buttons Test</title>
<link href="testcssfile.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000">

<a href="#"> Link 1 </a>
<a href="#"> Link 2 </a>
<a href="#"> Link 3 </a>
<a href="#"> Link 4 </a>
<a href="#"> Link 5 </a>


</body>
</html>



Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a:link, a:visited, a:active {
    background-image:url(Projecten/RawDesign/button.jpg);
    height:30px;
    width:95px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#FFFFFF;
    float:left;
    text-decoration:none;
    text-align:center;
}


a:hover {
    background-image:url(Projecten/RawDesign/button_over.jpg);
    height:30px;
    width:95px;
    font-family:"Rockwell Extra Bold";
    font-size:14px;
    color:#BA9A1D;
    float:left;
    text-decoration:none;
    text-align:center;
}


Alvast bedankt

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
• Ik zou alvast stoppen met XHTML te schrijven want dat wordt nog te weinig ondersteund door browsers.
• Misschien
• Zoek es op margins en/of padding

  • Rebellista
  • Registratie: November 2006
  • Laatst online: 14-06-2024
thanks.. iemand een idee voor die plaats van de tekst?

Intel Core i5 750~3.6Ghz + CM Hyper 212 - MSI p55-gd80 - 8GB 1600Mhz GeIL - MSI Radeon RX 580 ARMOR 8G OC - CM690 + 4x Scythe Slip Stream


  • Snake
  • Registratie: Juli 2005
  • Laatst online: 07-03-2024

Snake

Los Angeles, CA, USA

Heb je een link? Live voorbeeld?

Going for adventure, lots of sun and a convertible! | GMT-8

Pagina: 1