dcsimg
www.webdeveloper.com
Results 1 to 15 of 15

Thread: Add Multiple Side by Side Links (Footer CSS)

  1. #1
    Join Date
    Dec 2010
    Posts
    52

    Add Multiple Side by Side Links (Footer CSS)

    Expert programs need help with tricky small .css coding. Need multiple url links side by side. As of now when i add a HTML link it shows underneath the HOME. current .css and html below link to site: http://amsprocess.com/Mobile/site/index.html ;Thanks

    CSS:
    /* --- footer --- */



    #footer {height:95px; padding-left:20px; background:url(images/footer-tail.gif) 0 0 repeat-x; color:#404040; font-size:1.125em;}

    #footer p { padding:32px 0 5px 0; font-size:0.944em;}

    #footer p a {color:#6c6c6c; text-decoration:none;}

    #footer .home-tab {color:#3d372f; margin-bottom:0;}



    /* --- END footer --- */


    HTML:
    <div id="footer">

    <a class="home-tab" href="index.html">Home</a>

    <p>Assurance Merchant Solutions, llc (C) 2010 <a href="privacy.html">Privacy policy</a></p>

    </div>

  2. #2
    Join Date
    Nov 2011
    Posts
    47
    What is do is enclose each link within a span tag. Spacing can be adjusted with padding via css.

    <span><a href="index.html">Home</a></span>
    <span><a href="page2.html">Page 2</a></span>
    <span><a href="page3.html">Page 3</a></span>

  3. #3
    Join Date
    Dec 2010
    Posts
    52
    That does work, how can i keep the CSS color, without the links turning blue?

  4. #4
    Join Date
    Nov 2011
    Posts
    47
    Just re-read your post. maybe I initally misunderstood. You want Home to be on the same line as Assurance Merchant Solutions?

    if so just move your <p> tag and put it before the <a class="home-tab" href="index.html">Home</a>

  5. #5
    Join Date
    Dec 2010
    Posts
    52
    I would like to be able to have a CSS property, and have HTML like:

    <a class="home-tab" href="index.html">Home</a> | <a class="home-tab" href="index.html">Home2</a> | <a class="home-tab" href="index.html">Home3</a>

    Website show like: Home | Home2 | Home3

    It keeps:
    Home
    |
    Home2
    |
    Home3

  6. #6
    Join Date
    Nov 2011
    Posts
    47
    <a class="home-tab" href="index.html">Home</a> | <a class="home-tab" href="index.html">Home2</a> | <a class="home-tab" href="index.html">Home3</a>

    this code should produce the results you want....

  7. #7
    Join Date
    Dec 2010
    Posts
    52
    If you please visit http://amsprocess.com/Mobile/site/index.html you will notice the footer.

    I would like to keep the linke .css color and have it look like: Home | Home2 | Home3

  8. #8
    Join Date
    Nov 2011
    Posts
    47
    It has something to do with your css. trying to figure it out now...

  9. #9
    Join Date
    Nov 2011
    Posts
    47
    try this

    <span class="home-tab"><a href="index.html">Home</a> | <a href="index.html">Home2</a> | <a href="index.html">Home3</a></span>

    add this to your css
    #footer a{color:#3d372f; text-decoration:none;}

  10. #10
    Join Date
    Dec 2010
    Posts
    52

  11. #11
    Join Date
    Nov 2011
    Posts
    47
    Yeah I was looking at it. It has to be something in the css thats messing it up.

    Im just a student and not a pro. but is there any reason why you have so many id's with the same name?

  12. #12
    Join Date
    Dec 2010
    Posts
    52
    just a template still creating for mobile site. Thanks for your help

  13. #13
    Join Date
    Nov 2011
    Posts
    47
    I understand its a template but why do you have four #footer defined in css?

  14. #14
    Join Date
    Dec 2010
    Posts
    52
    I don"t you may have received something incorrect code from me.

  15. #15
    Join Date
    Dec 2010
    Posts
    52
    The different footers are different class styles for the Div Ids , basically having different style functions within a box section.

    .css style sheets are helpful because you can make changes to the .css without editing every page within the site.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles