PDA

View Full Version : padding not working correctly



kor81
Apr 2nd, 2012, 07:51 PM
I'm having a problem padding the sidebar and i am no good at explaining things so please bare with me. I Can show you better then i can explain it.
.sidebar
http://img192.imageshack.us/img192/1333/sidebartl.jpg

.widgettitle
http://img26.imageshack.us/img26/3265/widgettitleq.jpg

.widget
http://img811.imageshack.us/img811/526/widgets.jpg


CSS


.sidebar {
float: right;
width: 275px;
height:100px
list-style: none;
margin-top: -14px;

}

.widget {
background: #e1e1e1;
}


.widgettitle {
padding-left: 13px;
padding-top: 8px;
background: #082136 url( ../../themes/NewsPro/images/widget-title-bg.png);
height: 30px;
color: #FFF;
}




If i put padding: 10px 10px 10px 10px in the .widget class i get this

http://img818.imageshack.us/img818/362/padding10x.jpg

But i don't want it to look like that. How can i get it to look like this

http://img845.imageshack.us/img845/1336/whatiwantu.jpg

I Can get it like that by adding this to my style sheet, but it will only affect the text widget and i want it to affect ALL widgets.



.textwidget {
padding: 10px 10px 10px 10px
}

Excavator
Apr 2nd, 2012, 08:08 PM
Hello kor81,
A little knowledge about specificity can probably help you here. See a good site explaining how to target specific elements while not affecting others - http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

It might be as simple as this -

.textwidget,
.anotherwidget,
onemorewidget {
padding: 10px;
}

Or you might set all widgets to padding: 10px; and zero the padding on the one you don't want affected.