2 replies [Last post]
fistofpeanuts
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2007-10-30
Posts: 8
Points: 0

Hi people,

I've got the following problem ... My blog has a sidebar on the right and a footer at the bottom ... In this sidebar and footer I would like to place a text widget, this is a piece of code that displays a text.. the HTML code for sidebar is :








  • The footer is basicly the same :







  • The problem : As you can see there are multiple text widgets in both sidebar and footer. I would like to assign different padding properties to the ones in the footer then the ones in the sidebar .

    When I assign padding to the class .textwidget it will put a padding into ALL the text widgets while I don't want that for the footer widgets.

    The problem is that when I assign a padding directly to the TEXT-4 ID, which is supposed to override the rest, it doesn't work! And I don't know why ... As you can see in the HTML code I have put the sidebar 1 in a different div... this is a wrapping div. Its used because I actually want to add more then one sidebar in it and let them inherit the attributes I put the wrapping div. So here's the CSS code that is applied to the elements in the sidebar.

    #sidebar-wrapper ul {
    margin: 0px;
    padding: 0px;
    list-style:none;
    }

    #sidebar-wrapper ul ul{
    text-align: left;
    list-style:none;
    }

    #sidebar-wrapper ul li {
    display: block;
    padding:0px; margin-left: 0px;
    }

    #sidebar-wrapper ul ul li {
    display: block;
    padding:0px; margin-left: 0px;
    }

    #sidebar-wrapper ul li ul li {
    display: block;
    padding:0px; margin-left: 0px;
    padding-left:20px;
    padding-right:20px;
    }

    Also, If someone could explain to me the weird selector that is used : and ID, AND 2 classes ? What does that mean ?

    So what I actually want to do : is to 'isolate' the text widgets so that I can assign different paddings to each of them individually ... The ID on the text-X doesn't work .... and why I don't know ...

    -FOP-

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 2 weeks 4 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9774
    Points: 3856

    Simply use descendant

    Simply use descendant selectors. For example, set rules for the widgets that descend from the sidebar and set different rules for widgets that descend from the footer.

    #sidebar .widget {
      padding: 10px;
      }
    
    #footer .widget {
      padding: 20px;
      }

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    fistofpeanuts
    Offline
    newbie
    Last seen: 13 years 11 weeks ago
    Joined: 2007-10-30
    Posts: 8
    Points: 0

    Gary, thanks for taking the

    Gary, thanks for taking the time to view the problem .... It seems that the answer is so simple, that I overlooked it ....

    -FOP-