SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sub-navigation wierdness

    There is wierdness in the sub-navigation bar of this page:
    http://www.clickbasics.com/getting_started.php

    1. There should be six items in the sub-nav bar. But only 5 fit, because there is so much space to the left of the nav text items. Why is this?
    2. I also notice that the H1 header is driven to the left by this. Any clues why?

    Here's the CSS:
    Code:
    /*defines layout of subnav bar*/
    ul.subnav {
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 10px;
        height: 20px;
        line-height: 20px;
        background: #3333FF;/*darker blue*/
        font: bold 14px verdana, arial, sans-serif;
        }
    
    /*defines color of content items in subnav & bottom nav bar*/
    ul.subnav li {
        float: left;
        height: 20px;
        background: #3333FF;/*darker blue*/
        display: inline;
        color: #FFFFFF;/*white*/
        padding: 0;
        }
    
    ul.subnav a:link, ul.subnav a:visited {
        display: inline;
        color: #FFFFFF;/*white*/
        background-color: transparent;
        text-decoration: none;
        }
    Here's the php/html:
    PHP Code:
    <ul class="subnav">
    <?php
    if ($page_cat == "home") {
    ?>
    <li>&nbsp;&nbsp;</li>
    <?php
    } elseif ($page_cat == "start") {
    ?>
    <li><a href="/getting_started.php">Getting started</a> | </li>
    <li><a href="/planning_strategy.php">Plan</a> | </li>
    <li><a href="/customer_based_design.php">Design</a> | </li>
    <li><a href="/drive_traffic.php">Drive Traffic</a> | </li>
    <li><a href="/measure.php">Measure</a> | </li>
    <li><a href="https://www.clickbasics.com/amember/signup.php?price_group=-1">Sign up</a></li>
    <?php
    }elseif ($page_cat == "about") {
    ?> etc.
    Last edited by paulcj2; Aug 4, 2008 at 20:16. Reason: tweaking existing css
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi
    But only 5 fit, because there is so much space to the left of the nav text items.
    The space to the left is caused by giving padding:30px to the ul#tabnav

    ul#tabnav {
    list-style-type: none;
    margin: 0;
    /*padding-left: 130px;*/
    padding-left: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #3333FF;/*dark blue*/
    font: bold 11px verdana, arial, sans-serif;
    }

    EDIT: Disregard Everything above, I was looking at the wrong menu! I see what you are talking about now.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ok, for starters you need to clear the floats above your content div. The h1 problem you are having is the last list item (which is out of view & dropped down) pushing it over.

    Add clear:both to content

    #content {
    clear:both;
    position : relative;
    /*background-image: url(images/background_horizontal.jpg);
    background-repeat: repeat-y;*/
    padding : 1em 0;
    min-height: 550px;
    background-color : #fff;
    color: #333;
    }

    Now I'll look into getting your sub nav padding straightened out.
    Last edited by Rayzur; Aug 4, 2008 at 22:15.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ok, I made some adjustments in your padding on the .subnav and .subnav li

    Getting margin:0 on subnav li got your last list item pulled back with the rest of them. Give this a go and you can readjust to your desire.

    Code:
    ul.subnav {
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 5px;
        height: 20px;
        line-height: 20px;
        background: #3333FF;/*darker blue*/
        font: bold 14px verdana, arial, sans-serif;
        }
    
    /*defines color of content items in subnav & bottom nav bar*/
    ul.subnav li {
        float:left;
        height: 20px;
        background: #3333FF;/*darker blue*/
        display: inline;
        color: #FFFFFF;/*white*/
        padding: 0 5px 0 5px;
        margin: 0;
        }

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That works.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


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
  •