[CSS] Niet werkende buttons - Softwareontwikkeling

donderdag 8 februari 2007 13:57

Acties:

Topicstarter

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:

#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:

<!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

donderdag 8 februari 2007 13:59

Acties:

Sjoerd

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

donderdag 8 februari 2007 14:00

Acties:

Reinier

\o/

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

donderdag 8 februari 2007 14:00

Acties:

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.

donderdag 8 februari 2007 14:04

Acties:

Rebellista

Topicstarter

oke

gedaan het geeft al iets meer verschil.. alleen de achtergrond verspringt nog steeds niet.. de lettertypen wel maar het plaatje blijft hetzelfde..

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

donderdag 8 februari 2007 14:05

Acties:

Rebellista

Topicstarter

sorry die gaap moet een geschokt ventje zijn

Modbreak:Gebruik daar voortaan de

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

donderdag 8 februari 2007 14:05

Acties:

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

donderdag 8 februari 2007 14:11

Acties:

Rebellista

Topicstarter

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:

#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:

<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

[ 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

donderdag 8 februari 2007 14:13

Acties:

Reinier

\o/

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

donderdag 8 februari 2007 14:15

Acties:

Rebellista

Topicstarter

sorry mijn fout

ZO dus:

Cascading Stylesheet:

#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:

<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

donderdag 8 februari 2007 14:21

Acties:

Reinier

\o/

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

donderdag 8 februari 2007 14:26

Acties:

Rebellista

Topicstarter

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

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

donderdag 8 februari 2007 15:11

Acties:

Rebellista

Topicstarter

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:

<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:

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;
}