Skip navigation
alexisonsmith3
alexisonsmith3
Currently Being Moderated

Navigation Bar at the bottom of the page

May 27, 2012 9:43 AM

Tags: #cs5 #adobe #dreamweaver

Hello,

 

I am currently trying to create a navgiation bar which is usually seem at the bottom of most webpages. Is this difficult to do? I would be looking for one with lines between each link,

 

Regards,

 

Alex

1084 Views   9 Replies   Latest reply: alexisonsmith3, Jun 10, 2012 8:17 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    May 27, 2012 9:55 AM   in reply to alexisonsmith3
    Report

    Difficult to do?  No.

     

    <ul id="bottom-nav"><li><a hef="whatever.php">whatever</a></li><li class="last"><a hef="whatever2.php">whatever2</a></li></ul>

     

    With this CSS -

     

    ul#bottom-nav {

         list-style-type:none;

         overflow:hidden;

         width:70%;

         margin:0 auto;

    }

    ul#bottom-nav li {

         float:left;

         padding-right:10px;

         border-right:1px solid #FFF;

    }

    ul#bottom-nav li.last {

         border:none;

    }

    ul#bottom-nav a {

         /* your styles here */

    }

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    2. alexisonsmith3,
    May 27, 2012 11:37 AM   in reply to MurraySummers
    Report

    I have tried this however there are no lines between each link. i.e straight verticle lines

     

    Alex

     

    www.newcityexplorer.com

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    May 27, 2012 1:33 PM   in reply to alexisonsmith3
    Report

    You could use a pike  |  between links

     

    <ul id="bottom-nav">

    <li><a hef="whatever.php">whatever</a></li>  | 

    <li class="last"><a hef="whatever2.php">whatever2</a></li>  |

    <li class="last"><a hef="whatever3.php">whatever3/a></li>  |

    </ul>

     

     

    Nancy O.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    4. MurraySummers,
    May 27, 2012 1:43 PM   in reply to alexisonsmith3
    Report

    >  there are no lines between each link

     

    There would be if you have created the border style properly.  Or as Nancy suggests use a pipe symbol "|".  I don't like doing it that way, but it works.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    May 27, 2012 1:47 PM   in reply to MurraySummers
    Report

    PIPE not PIKE (must have fish for brains today).

     

     

    N

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    May 27, 2012 1:48 PM   in reply to Nancy O.
    Report

    We knew what you meant!

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    7. John Waller,
    May 27, 2012 2:21 PM   in reply to MurraySummers
    Report

    ul#bottom-nav li {

    float:left;

    padding-right:10px;

    border-right:1px solid #FFF;

    }

     

    creates a white line between <li> items on a white page.

     

    Changing the color is all that's needed

     

    ul#bottom-nav li {

    float:left;

    padding-right:10px;

    border-right:1px solid #333; /* adjust to any non-white color to suit */

    }

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    8. MurraySummers,
    May 27, 2012 3:13 PM   in reply to John Waller
    Report

    White on white is one of my preferred color combos.

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    9. alexisonsmith3,
    Jun 10, 2012 8:17 AM   in reply to John Waller
    Report

    I am now having issues clicking on the links at the bottom of the page. also the lines between each link are not turning black and are staying white

     

    Thanks,

     

    Alex

     

    www.newcityexplorer.com

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points