Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Styling of links in CSS

    Hi all,

    This is probably a simple one but...

    I have a couple of divs laid out like so:

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

    Code:
    #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
    Last edited by greens85; 07-03-2009 at 10:55 AM. Reason: Formatting Error

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #searchbox a:link
    Isn't that particular link under the #searchbox div? Have you set any alternate for your link under #advancedsearch ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    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:

    Code:
    #advancedsearch a:link {
     */the styling i wanted here*/
    }
    With the HTML looking like:

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It might be just a specificity issue, take a look at http://htmldog.com/guides/cssadvanced/specificity/
    Code:
    #advancedsearch a:link {
     */the styling i wanted here*/
    }
    What do you actually need there?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    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:

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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #searchbox #advancedsearch a:link {
      color:#990000;
      text-decoration:underline;
    }
    
    #searchbox #advancedsearch a:hover {
      color:#990000;
      text-decoration:dotted;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    #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?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Override whatever you've applied on your other selector, like
    Code:
    border:none;
    background:none;
    etc.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    Override whatever you've applied on your other selector, like
    Code:
    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:



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



    Hope this helps!

  • #10
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    I have managed to get the block off now, however the underline doesnt change to a dotted one

  • #11
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    If you want your links to have individual styles i use this method:

    a.divname {styles here}
    e.g.

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •