Making my CSS more dynamic in Javascript

Hi there wonder if you guys can help me in getting the following code more dynamic?

<style>
a#yaprak {
    padding-left: 80px;      
    padding-top: 5px;      
    width: 227px;
    height: 40px;
    background-image: url(icon_sync.gif);
    display: block;
    text-decoration: none;
}

a#yaprak:hover {
    background-position: 0 38px;
}

a#yaprak1 {
    padding-left: 80px;      
    padding-top: 5px;      
    width: 227px;
    height: 40px;
    background-image: url(icon_groups.gif);
    display: block;
    text-decoration: none;
}

a#yaprak1:hover {
    background-position: 0 38px;
}

a#yaprak2 {
    padding-left: 80px;      
    padding-top: 5px;      
    width: 227px;
    height: 40px;
    background-image: url(icon_backup.gif);
    display: block;
    text-decoration: none;
}

a#yaprak2:hover {
    background-position: 0 38px;
}
</style>
<a href="#" id="yaprak">menu1</a>
<a href="#" id="yaprak1">menu2</a>
<a href="#" id="yaprak2">menu3</a>

As you can see, every time I add a new href, I have to increment yaprak by 1, and then add a further 2 more styles. Can you please help me in getting it more dynamic.

Hope that makes sense
Mousemat24
mousemat24Asked:
Who is Participating?
 
jessegivyConnect With a Mentor DeveloperCommented:
The convention you're using here is for specific tags organized by id, you can however apply a style to all anchors and simply override that style for those you want to have appear different  ...So I guess all I'm seeing that's different is background image so try something like this:


a{
    padding-left: 80px;    
    padding-top: 5px;    
    width: 227px;
    height: 40px;
    display: block;
    text-decoration: none;
}

a:hover {
    background-position: 0 38px;
}

<a href="#" id="yaprak" style="background-image: url(icon_sync.gif);">menu1</a>
<a href="#" id="yaprak1" style="background-image: url(icon_groups.gif);">menu2</a>
<a href="#" id="yaprak2" style="background-image: url(icon_backup.gif);">menu3</a>

...the above style will apply to all anchors, and of course you could add the css I used in your CSS file instead of inline with the relevant id's, but there's no need to repeat all the other styles

Jesse
0
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
mousemat24,

Use the class attribute instead.  It can be used in more than one element and can be used in CSS.  Your code would look like this ...

<style>
a.yaprak {
    padding-left: 80px;    
    padding-top: 5px;    
    width: 227px;
    height: 40px;
    background-image: url(icon_sync.gif);
    display: block;
    text-decoration: none;
}

a.yaprak:hover {
    background-position: 0 38px;
}

</style>
<a href="#" id="yaprak" class="yaprak">menu1</a>
<a href="#" id="yaprak1" class="yaprak">menu2</a>
<a href="#" id="yaprak2" class="yaprak">menu3</a>

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
b0lsc0ttIT ManagerCommented:
Just to point out a thing or two.  Notice that you replace # with . to specify the class instead of the id in CSS.  Also the class attribute can be added to pretty much any tag and can be with id or other attributes.  Class, unlike id, can be duplicated.

bol
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
b0lsc0ttIT ManagerCommented:
I missed the unique background image.  You would want to remove it from the style in the head of the html and put it in the tag, like Jessegivy's showed.  Credit to him for that good example.

bol
0
 
mousemat24Author Commented:
Thanks jessegivy!! and thankyou b0lsc0tt

But my code had 3 images, thats why I had to give most of points to jessegivy
0
 
b0lsc0ttIT ManagerCommented:
Your welcome.  I understand.  I'm glad that I could help.  Thank you for the grade, the points and the fun question.

bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.