SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    whats the best way???

    hi guys im remaking this site for th client in css, as its a big mess of tables right now....

    http://www.teesvalleysport.co.uk/

    ive started to make the drop downs (with a little help from you guys) but they are saying they want each drop down a different colour (it doesnt necessarily need to fade like their live site). so my question is how is the best way to achieve each drop down a new colour?

    i just think making 6 different #nav, #nav li ul li, #nav li ul and #nav li:hover ul, #nav li.sfhover ul would be a bit messy?

    or that the best way possible?

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I am thinking is apply two different classes to each ul/li that you want different color, a systematic class for the effect and size. And a second class to define the color. Since 2 classes in one div is allowed, this method should work.
    In search of the clouds...and maybe some work

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'big mess of tables' doesn't even begin to cover it.

    Before you get too much further, you might want to consider making sure all your table tags are opened and closed properly in the right order...

    <td rowspan="2" valign="top" bgcolor="#F1C634">

    <td rowspan="2" valign="top" bgcolor="#F1C634" class="left_nav">

    for example... You cannot open a TD inside a TD without opening a new table first.

    As Kefeso said, your best bet is to define two classes... one to cascade all the like properties, and one to assign just the things that are different.

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,175
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Also, please, your link to your style sheet is inside the body area. It should be in the header. No comments on the rest.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im not even going to bother wasting my time fixing tables....im going to remove them all so theres no point.......

    can you explain further with the 2 classes idea....im not sure im follwin??

    cheers guys/gals

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,175
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deelunn
    im not even going to bother wasting my time fixing tables...
    Glad to hear that. I wasn't in the mood of looking at your tables.

    What kefeso meant is that you can apply more than one class to the same element. Example:

    I want to use to classes in my title

    <h1>Lorem Ipsum</h1>

    And I have this CSS code
    Code:
    .h1tit{font-family: Georgia, "Times New Roman", Times, serif; color: white}
    .h1sec{background-color:black;}
    Then, to apply both .h1tit and h1sec to my title:

    <h1 class="h1tit h1sec">Lorem Ipsum</h1>

    My title will take its background color from .h1sec, but the font-family and the color from .h1tit

    You have to be careful when the two classes share properties, because the value used for that property will be the value shown in the class that was written last.

    Example: if my .h1sec class also had a color property (like color:green), my text will be green instead of white because h1sec comes aftet h1tit in the stylesheet.

  7. #7
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, thx molona, I'll just elaborate it a little bit more, with regard to this specific case that is.
    xhtml:
    Code:
    <ul>
    <li class="menu_effect_control color1">item1</li>
    <li class="menu_effect_control color2">item2</li>
    <li class="menu_effect_control color1">item3</li>
    </ul>
    css:
    Code:
    .menu_effect_control{
    /* write your drop down menu effect script here */
    }
    .color1{
    /*first color you want*/
    }
    .color2{
    /*second color you want*/
    }
    Since 2 classes of the same element is supported, this method should be able to work out. The menu_effect_control is for the actual dropdown effect, whatever code you'll need there. And the .colorx classes are the different definitions for the specific color. In my example, the colors are alternated between the two, of course you could specify more if needed. The trick here is no not define the background-color in the effect class but define the color in a separate class. Enjoy
    In search of the clouds...and maybe some work

  8. #8
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excellent - thanks for your help guys!


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
  •