SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    669
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hyperlink in a div

    Hi guys

    I'm fine with php and mysql, html is ok though i'm revisiting it to get rid of tables and upgrade using css. My problem is that i've avoided CSS for years and until recently never really thought it was necessary until i was pointed to the zen garden. I know.. weird that i've got php licked and not got a clue with CSS or even web graphics but hey ho! I had a project that i wanted to make which needed a lot of code to run on the server! (Thats me saying i'm not very artistic).

    So, i started reworking my site template today to work with CSS and now I have a problem!

    I have this code in my html:
    Code:
    <div class="greeting">Welcome Guest! <a class="greetlink" href="?action=login">You can login or register here!</a></div>
    In my stylesheet i have this:
    Code:
    greetlink a:link
       {
       color: #ffffff;
       visited: red;
       }
    Now, i know thats wrong. The problem is the background is black while the rest of the page is white so i can't just use a:link for all the links in the page because it won't work for me and secondly css is meant to let you group things together or deal with them seperately right?

    So how on earth can i do this? - i've experimented and so far still can't find the correct way and google hasn't turned up much though i suspect i'm probably using the wrong terms.

    If you can help me i'd be grateful
    I'll do anything to avoid working on my own code

    Are you using: if (isset($_POST['submit'])) ?
    IE has a bug and does not always send the value.

  2. #2
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    669
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind, solved. I thought the class had to be declared in the <a> tag but instead i found that i should put the <a> tag inside a span tag.
    I'll do anything to avoid working on my own code

    Are you using: if (isset($_POST['submit'])) ?
    IE has a bug and does not always send the value.

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,822
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Two things.

    If every time you have a hyperlink inside a <div class="greeting">, you want it to be styled like this, you don't need to put a class on the link, you can save yourself a bit of typing with
    div.greeting a:link {...}.

    And that isn't how you write code for visited links.
    First, you show the code for normal, unvisited links with a:link {...}
    Then you show the code for visited links with a:visited {...}
    You can also have a:hover, a:focus {...} and a:active {...} as well, in that order.

    (You should always specify a 'focus' state so that people using keyboard navigation can clearly see what link they've tabbed to, so you'll usually want to use the same style as for :hover. 'Active', in this context, means what happens as someone clicks on the link)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by tangoforce View Post
    tag but instead i found that i should put the <a> tag inside a span tag.
    lol - you don't need to put a span inside the a element. You just don't need the descendant selector that you used as the class is on the a element.

    e.g.
    Code:
    a.greetlink:link {etc..}
    a.greetlink:visited {etc..}
    However, Stevie has shown you a better way to do this above so make sure you read his post.

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    669
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    Thanks for the tips, very useful

    I knew there must be a simple way of doing it but having literally only decided to seriously learn about CSS last night its rather daunting. The links are done now and working nicely!

    Thanks to both of you!
    I'll do anything to avoid working on my own code

    Are you using: if (isset($_POST['submit'])) ?
    IE has a bug and does not always send the value.

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I'll argue that once you're comfortable writing the separate link states, start grouping them easier:

    First, you show the code for normal, unvisited links with a:link {...}
    Then you show the code for visited links with a:visited {...}
    You can also have a:hover, a:focus {...} and a:active {...} as well, in that order.
    Or just
    "a" for all links
    override visited with :visited only if visited should look different
    override :hover and :focus (and active either if you want active, or just want IE6 to show :focus styles)

    This means the majority of the CSS sits one time under the "a", while the other pseudo-classes only list the properies you want different. This prevents you from writing
    text-decoration: none
    500 times if you always want all links to not have underline (not a great idea, but just an example).

    So reason one: laziness. The mark of a true programmer is how lazy s/he is, according to Larry Wall : )

    Another thing to watch out for, cause everyone does it at least once:
    .greetings a:link, a:visited, a:active {
    styles;
    }

    only the a:link version is applied specifically to links in the greetings div; the other two are global!
    .greetings a:link,
    .greetings a:visited,
    .greetings a:active {
    styles;
    }

    This is the other reason why I tend to avoid :link.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    669
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the inspiration but i did specify that the background for the link concerned was black while the rest of the page was white.

    Quote Originally Posted by tangoforce View Post
    The problem is the background is black while the rest of the page is white so i can't just use a:link for all the links in the page
    You're not saying i should use the same css for all the links on the page are you?

    So i should have white links on a white background?

    I'm aware that i can use a:whatever to cover all generic links but i did explicitly state that i needed CSS for links on a black background while the rest of the page is white.
    I'll do anything to avoid working on my own code

    Are you using: if (isset($_POST['submit'])) ?
    IE has a bug and does not always send the value.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I'm aware that i can use a:whatever to cover all generic links but i did explicitly state that i needed CSS for links on a black background while the rest of the page is white.
    That's fine, but I'm just saying (assuming <div class="greeting"> is the black box) that
    .greeting a {
    styles;
    }
    is more awesome and less work than
    .greeting a:link,
    .greeting a:visited,
    .greeting a:active {
    styles;
    }

    You are still manually setting the styles for just the links in the greeting box, but avoiding the repetition of :link styles.

    So that a:whatever can be focussed down to "only a's inside a certain container" etc.

    This will, however, also cover any
    a:hover, a:focus
    styles you may have set earlier. That would be a good arguement for #someElement a:link, but if the difference is between black backgrounds and white backgrounds, the hover/focus styles would need to be looked at twice to see if they're sufficient contrast too.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    669
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks
    I'll do anything to avoid working on my own code

    Are you using: if (isset($_POST['submit'])) ?
    IE has a bug and does not always send the value.


Bookmarks

Posting Permissions

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