Shoutbox

What is wrong in here!?

code:

---

<style type="text/css">
#a.about {
    background-image: url(images/about.jpg);
    width: 59px;                   
    height: 41px;                   
    border:none;
    display: block;
    }
#a.about:hover {
background-image: url(images/abouthover.jpg);
}
</style>

<div id="about">
<a class="about" href="http://www.google.pt" ></a>
</div>

---

It isnt working .. :/

code:

---

<style type="text/css">
#a.about {
background-image: url(images/about.jpg);
width: 59px;                   
height: 41px;                 
border:none;
display: block;
}
#a.about:hover {
background-image: url(images/abouthover.jpg);
}
</style>

<div id="about">
<a class="about" href="http://www.google.pt" ></a>
</div>

---

in the ( ) tags you have forogtten: ' or "

So this should work:

code:

---

<style type="text/css">
#a.about {
background-image: url('images/about.jpg');
width: 59px;                   
height: 41px;                 
border:none;
display: block;
}
#a.about:hover {
background-image: url('images/abouthover.jpg');
}
</style>

<div id="about">
<a class="about" href="http://www.google.pt" ></a>
</div>

---

you're not supposed to put an # before tag names in css..

quote:

---

Originally posted by ShawnZ
you're not supposed to put an # before tag names in css..

---

lol thanks a lot that was exactly the problem

Sorry again people but how can i put this in the horizontal?




Heres the full code:

code:

---

<style type="text/css">

a.about {
background-image: url('images/about.jpg');
width: 59px;                   
height: 41px;                 
border:none;
display: block;
cue-after:none;
}
a.about:hover {
background-image: url('images/abouthover.jpg');
}
</style>

<div id="about">
<a class="about" href="http://www.google.pt" ></a> <a class="about" href="http://www.google.pt" ></a></div>

---

float: left;
width: 59px;
height: 100%;

Thanks shawnz, i dunno why but instaed of 100% i had to use 41px (which is equivalent to 100%).

Hmm I can see that you are using a bit too much code there...
here is a more optimized version:

code:

---

<style type="text/css">

#about a{
background-image: url('images/about.jpg');
float: left;
width: 59px;                   
height: 100%;                 
border:none;
display: block;
cue-after:none;
}
#about a:hover {
background-image: url('images/abouthover.jpg');
}
</style>

<div id="about">
<a href="http://www.google.pt" ></a> <a href="http://www.google.pt" ></a></div>

---

As you can see now that "#about a" and "#about a:hover" is defined you don't need to put " class="about" " in the link element. I have bolded what I changed
Hopefully you may find this helpfull

quote:

---

Originally posted by ShawnZ
float: left;
width: 59px;
height: 100%;

---

Wouldn't it be simpler to use 'display: inline;'? Since inline is what he wants.

Edit: And to force it to be a navbar:
#about {
    display: block;
}