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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    <a> tag styling with CSS, OK with one, color doesn't hold when 2nd is added?

    (The question is after the code)

    In HTML I Have:

    Code:
    <div style="text-align: center;">
    	<a href="/page/2.html">Next</a>
    </div>
    and the CSS is:

    Code:
    a {
    	border-style: solid;
    	border-width: 2px 2px 2px 2px;
    	background: #faf8ec;
    	text-decoration: none;
    	padding: 10px;
    	border-color: #6a6651 #6a6651 #6a6651 #6a6651;
    }
    
    a:link {
    	border-style: solid;
    	border-width: 3px 3px 3px 3px;
    	text-decoration: none;
    	padding: 1px;
    	border-color: #6a6651 #6a6651 #6a6651 #6a6651;
    }
    
    a:hover {
    	border-color: #ffffff;
    }
    and it works fine on my index.html. On page 2, however, I need a Back and a Next, so I did this in HTML:

    Code:
    <div style="text-align: center;">
    	<a href="/index.html">Back</a>
    	<a href="/page/3.html">Next</a>
    </div>
    with the same exact CSS for <a> in my "subsequent pages" stylesheet.

    Thing is, on page 2, the border-color on the 'Back' link is correct, but the border around 'Next' is blue, it's supposed to be #6a6651...

    Anyone know why the border color isn't applying to the second <a>?

    And btw I have them in a text-align div style because i couldn't get the CSS to cooperate in centering it properly.

    Thank you!

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Try this:
    Code:
    <div id="buttons">
    	<a href="/index.html">Back</a>
    	<a href="/page/3.html">Next</a>
    </div>
    CSS:
    Code:
    #buttons 
    {
    	width: 30%;
    	margin: auto;
    	text-align: center;
    }
    
    a 
    {
    	background: #faf8ec;
    	text-decoration: none;
    	padding: 10px;
    	border: 3px solid #6a6651;
    	text-decoration: none;
    	padding: 1px;
    	color: blue;
    }
    
    a:hover {
    	border-color: #ffffff;
    }
    To center an element you need to declare a width BEFORE declaring the margin. We use margin: auto; to center things, but it must have a width declared first.

    I weren't 100% with what you were trying to achieve but I've had a go and cleaned up your CSS.

    Hope this helps.

    Come back and let me know how you got on.

    Kind regards,

    Lc.

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Is that all the CSS you have? What you have should work, <a> tags don't have a border around them to start off with. So if it wasn't working correctly, then there wouldn't be a border at all. I wonder if you have another css call somewhere further down.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.


  •  

    Posting Permissions

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