Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Making my CSS more dynamic in Javascript

Posted on 2006-11-28
6
Medium Priority
?
291 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:mousemat24
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 400 total points
ID: 18032116
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
 
LVL 12

Accepted Solution

by:
jessegivy earned 1600 total points
ID: 18032132
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18032142
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18032172
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
 

Author Comment

by:mousemat24
ID: 18032193
Thanks jessegivy!! and thankyou b0lsc0tt

But my code had 3 images, thats why I had to give most of points to jessegivy
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18032306
Your welcome.  I understand.  I'm glad that I could help.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question