Advanced Search

Results 1 to 8 of 8

Thread: How to keep text items spaced out.

  1. #1
    Join Date
    Mar 2009
    Location
    Phoenix
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default How to keep text items spaced out.

    How to keep text items spaced out.

    What's the best way to keep things like this separated without using spaces?

    EVENTS SCHEDULE | ASSOCIATIONS | LINKS | CONTACT US

    I tried a table, but every time I change one cell another one changes too...

    Then I put them in one cell and tried spacer.gifs, setting the width, which works on one page, but it seems hack and it isn't working on another page... maybe the style isn't working.

    Thanks much!

    Susan
    Last edited by susaninphoenix; 03-12-2009 at 04:41 PM. Reason: Resolved - THANKS again to Snookerman!

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try not to use tables or spacer gifs, use a list instead:
    HTML Code:
    <ul>
    <li><a href="#">EVENTS SCHEDULE</a></li>
    <li><a href="#">ASSOCIATIONS</a></li>
    <li><a href="#">LINKS</a></li>
    <li><a href="#">CONTACT US</a></li>
    </ul>
    Then, float the list items to the left, use margins to space them and remove the bullet points:
    HTML Code:
    <style type="text/css">
    li {
    float: left;
    margin: 0 10px;
    list-style: none;
    }
    </style>
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    susaninphoenix (03-04-2009)

  4. #3
    Join Date
    Mar 2009
    Location
    Phoenix
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    This worked perfectly, except I can't figure out how to get the underlines off the links.

    I tried adding; text-decoration: none; to the style, but it did nothing.

    Snookerman, are you able to advise again? Or anybody??

    Susan

  5. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Have you tried:
    Code:
    li a {
    text-decoration: none;
    }
    That should work fine.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. #5
    Join Date
    Mar 2009
    Location
    Phoenix
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Small additional question

    That worked, but now I'm uncertain how to get the hoover color to change.

    I so appreciate your help.

    Thanks,
    Susan

  7. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Simple:
    Code:
    li a:hover {
    color: red;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  8. #7
    Join Date
    Mar 2009
    Location
    Phoenix
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default It worked! You are a genius!!

    Snookerman, you are awesome! I so appreciate your tutelage, that I think I will ask for more... but I understand if it's just not really that relevant... and not something to waste time on... I'll catch on eventually!

    Answer only if it won't be a silly waste of time, because the basic problem is RESOLVED.

    I'm still confused when trying to learn by following how others do this... so I have used and have working these variations on unrelated style sheets... which didn't seem right in this case and wondering when and why these other methods are used?

    1. (no use of thaat magical letter "A")
    .navbar {
    TEXT-DECORATION: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
    color: #FFCCCC;
    }
    .navbar:link {
    color: #FFCCCC;
    }

    .navbar:hover {
    color: #FFFFFF;
    }


    2. (uses the magical letter, but has it before the style name, as opposed to how you put it - after)

    .nonProductNav { color: #FFFFFF; font: 11px Georgia, "Times New Roman", Times, serif; TEXT-DECORATION: none;
    }
    a.nonProductNav:link {
    color: #FFFFFF;
    }

    a.nonProductNav:hover {
    color: #FFCCCC;
    }

  9. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I'm glad to help you Susan! If I understand you correctly, you want to know the difference between .something and a.something.

    .something will target all elements that have the class value something (e.g. <h1 class="something"></h1> or <a class="something"></a> etc.)

    a.something will target only anchor tags (that's what the "magic letter" stands for) with the class value something (i.e. <a class="something"></a>)

    There is also something else to think about when it comes to this and that is specificity. Basically a.something is more "important" than .something because it's more specific. To learn more about this, take a look at these articles:
    http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
    http://htmldog.com/guides/cssadvanced/specificity/

    Hope that helps, good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

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
  •