SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Basic CSS - Can't see why it's not working

    Thanks for taking the time to read this.

    I'm just trying to style a list in order to create a menu, and for the life I can't see why it's not working.

    Here's the HTML:

    HTML Code:
    <table cellpadding="0" cellspacing="0" class="moduletable">
    <tr>
    <td>
    <ul id="mainlevelmain_menu"><li><a href="#" id="active_menumain_menu">Home</a></li>
    
    <li><a href="#" >News</a></li>
    </ul>			
    </td>
    </tr>
    </table>
    and the CSS:

    PHP Code:
    ul.mainlevelmain_menu{
    text-aligncenter;
    padding-bottom5px;
    padding-top5px;
    padding-left0;
    margin-top0;
    margin-left0;
    background-color#426208;
    colorwhite;
    width100%;
    font-familyVerdana,Arial,Helvetica,sans-serif;
    line-height18px;
    }

    ul li.mainlevelmain_menu
    {
    displayinline;
    padding-left0;
    padding-right0;
    padding-bottom5px;
    padding-top5px;

    Is the problem because the content is inside a table cell? Or am I doing something else wrong?

    Any help would be really appreciated!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alter your CSS to this and it should work

    Code:
    #mainlevelmain_menu{
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    background-color: #426208;
    color: white;
    width: 100&#37;;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    line-height: 18px;
    }
    
    #mainlevelmain_menu li
    {
    display: inline;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    }
    Within CSS:

    . = class
    # = id

    You'd also not quite grasped how to apply styles to a decendant.

    You're first style was nearly correct and just required switching the class for an id. However, your second style would be looking for an li with the class="mainlevelmain_menu" which obviously doesn't exist within your CSS.

    Also, keep in mind that using display: inline; may make the <li> difficult to style as it won't recognise width, height or margin's so I'd usually use float: left; instead.

    Hope that helps.



  3. #3
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave,

    Still no luck I'm afraid though.

    You can see the site as it currently stands HERE (The menu's at the top of the page).

    I'm trying to get it to look like THIS (The CSS code can be seen in the source code in the last example.

    The site itself is using Joomla.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #mainlevelmain_menu DOESNT have a <ul> IT IS the <ul>

    Therefore you need to delete all the 'uls' after the selector

    This

    #mainlevelmain_menu ul

    should be

    #mainlevelmain_menu

    This

    #mainlevelmain_menu ul li

    should be


    #mainlevelmain_menu li


    etc etc

    Simple error

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because in your code you've not copied my code exactly

    You've currently still got

    Code:
    #mainlevelmain_menu ul
    #mainlevelmain_menu ul li
    Change this too...

    Code:
    #mainlevelmain_menu
    #mainlevelmain_menu li
    Basically, what you were doing was trying to apply the styles to an li, within a ul which was within an element called #mainlevelmain_menu. However, this doesn't exist because it's the actual ul that has this id.

    If you wanted to include the ul within your css then you'd need to have done

    Code:
    ul#mainlevelmain_menu
    ul#mainlevelmain_menu li
    Although, as you can onyl use one ID on a page anyway then I wouldn't usually include the ul part.

    Hope that explains it a little better.

  6. #6
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys - that's got it.

    Really appreciate your help!


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
  •