...

View Full Version : Styling of links in CSS



greens85
07-03-2009, 11:54 AM
Hi all,

This is probably a simple one but...

I have a couple of divs laid out like so:


<div id="searchbox">
<ul>
<li><a href="#">Find An Agency</a></li>
<li><a href="#">Find A Candidate</a></li>
<li><a href="#">Find A School</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<form action="" method="post">
<table style="padding:0%;margin-left:47px;width:975px;">
<tr>
<td>
<div id="SearchBox">
<input id="SearchInput" name="SearchInput" value="Find An Agency..." />
</div>
<div id="SearchButton">
<input type="image" src="images/search_button.png" />
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative; left:20px; top:-15px;">
<div id="SearchResults"></div>
<div id="advancedsearch">...or try an <a href="#">advanced search</a></div>
</div>
</td>
</tr>
</table>
</form>
</div>
</div>

And CSS like so:


#searchbox ul {
padding:1%;
padding-left:0;
padding-right:0;
margin:0;
list-style:none;
text-align:center;
background-color:#EB353D;
font-weight:bold;
color:#FFFFFF;
border-top:1px #990000 solid;
border-bottom:1px #990000 solid;
border-right:1px #990000 solid;
border-left:1px #990000 solid;
}

#searchbox li {
display:inline;
margin-left:1%;
padding:0;
font-size:14px;
}

#searchbox a:link {
padding:1%;
color:#FFFFFF;
text-decoration:none;
}

#searchbox a:hover {
background-color:#990000;
}

The problem is, the 'or try an advanced search' link is being styled like the 3 heading links 'find an agency' 'find a candidate' and 'find a school'.

How can I get rest of the links within the document to have their own style? I tried adding a class called bodylinks to the link but it didnt work.

thanks

abduraooft
07-03-2009, 12:11 PM
#searchbox a:link
Isn't that particular link under the #searchbox div? Have you set any alternate for your link under #advancedsearch ?

greens85
07-03-2009, 12:14 PM
Isn't that particular link under the #searchbox div? Have you set any alternate for your link under #advancedsearch ?

Yep it is, which i realise is why the problem is occuring. What I tried was to put the adavanced search text in its own div, then add the following to the css:


#advancedsearch a:link {
*/the styling i wanted here*/
}

With the HTML looking like:


<div id="searchbox">
<ul>
<li><a href="#">Find An Agency</a></li>
<li><a href="#">Find A Candidate</a></li>
<li><a href="#">Find A School</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<form action="" method="post">
<table style="padding:0%;margin-left:47px;width:975px;">
<tr>
<td>
<div id="SearchBox">
<input id="SearchInput" name="SearchInput" value="Find An Agency..." />
</div>
<div id="SearchButton">
<input type="image" src="images/search_button.png" />
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative; left:20px; top:-15px;">
<div id="SearchResults"></div>
<div id="advancedsearch">...or try an <a href="#">advanced search</a></div>
</div>
</td>
</tr>
</table>
</form>
</div>
</div>

But I'm still getting the other styling.

abduraooft
07-03-2009, 01:14 PM
It might be just a specificity issue, take a look at http://htmldog.com/guides/cssadvanced/specificity/


#advancedsearch a:link {
*/the styling i wanted here*/
} What do you actually need there?

greens85
07-03-2009, 02:08 PM
It might be just a specificity issue, take a look at http://htmldog.com/guides/cssadvanced/specificity/
What do you actually need there?

Yeah seems like that could be the problem...

The styling i want is:


#advancedsearch a:link {
color:#990000;
text-decoration:underline;
}

#advancedsearch a:hover {
color:#990000;
text-decoration:dotted;
}

Do you know of anyway round the problem of specificity?

abduraooft
07-03-2009, 02:10 PM
Try

#searchbox #advancedsearch a:link {
color:#990000;
text-decoration:underline;
}

#searchbox #advancedsearch a:hover {
color:#990000;
text-decoration:dotted;
}

greens85
07-03-2009, 02:16 PM
Try

#searchbox #advancedsearch a:link {
color:#990000;
text-decoration:underline;
}

#searchbox #advancedsearch a:hover {
color:#990000;
text-decoration:dotted;
}

Thats closer but on rollover it still adds a box with a color of #990000 behind the text.

Would it help if i attached the files?

abduraooft
07-03-2009, 02:18 PM
Override whatever you've applied on your other selector, like

border:none;
background:none; etc.

greens85
07-03-2009, 02:47 PM
Override whatever you've applied on your other selector, like

border:none;
background:none; etc.

I see how that would work, but I want the other sector to carry that styling! But dont want this link to.

Is it not possible to have one styling for the top links & another styling for the advanced search link?

I have attached a screenshot, hopefully it will help explain what I'm trying to achieve.

This is the effect I have on the top rollovers:

http://i217.photobucket.com/albums/cc36/greens85/th_toprollover_effect.jpg (http://s217.photobucket.com/albums/cc36/greens85/?action=view&current=toprollover_effect.jpg)

But its also applying itself to the link, when I just want and underlined link & then dotted on rollover:

http://i217.photobucket.com/albums/cc36/greens85/th_problem_rollover.jpg (http://s217.photobucket.com/albums/cc36/greens85/?action=view&current=problem_rollover.jpg)

Hope this helps!

greens85
07-03-2009, 02:53 PM
I have managed to get the block off now, however the underline doesnt change to a dotted one :confused:

FeralUK
07-03-2009, 09:27 PM
If you want your links to have individual styles i use this method:

a.divname {styles here}
e.g.


a.advancesearch {
color: #000000;
text-decoration: underline;
}
This will turn all links within that div to the style you want.
You can add this to as many divs as you like.
Also, if you want to customise further then do this:

a.advancedsearch:link {color: #000000; text-decoration: none;}
a.advancedsearch:visited {color: #000000; text-decoration: none;}
a.advancedsearch:hover {color: #00ffcc; text-decoration: underline;}
a.advancedsearch:active {color: #000000; text-decoration: none;}

Hope this answers your question...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum