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-
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
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-