PDA

View Full Version : Padding Issues


Chapo
05-21-2012, 10:02 PM
Ok.. i tried to add some right padding to my drop menu, so it will not be at the right edge, but for some reason i can't do it... its a jQuery

http://www.tuemisora.com

gentleone
05-22-2012, 12:25 AM
Chapo, this is really a basic CSS issue. You have a CSS box model issue, but before I get to that I want first strip the CSS rules to a minimum, because you're repeating yourself over and over again in the following rules:

ul li a
{
color:#ffffff;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:160px;
height:20px;
line-height:-40px;
text-align:right;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-repeat: no-repeat;
margin-bottom: 6px;
}

ul li a:hover
{
color:#ffffff;
font-weight:bold;
text-decoration:none;
display:block;
width:160px;
text-align:right;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-repeat: no-repeat;
}

ul li.sublinks a
{
color:#ffffff;
font-weight:bold;
text-decoration:none;
display:block;
width:160px;
text-align:right;
margin-top:2px;
background-repeat: no-repeat;
}

ul li.sublinks a:hover
{
color:#ff6600;
font-weight:bold;
text-decoration:none;
display:block;
width:160px;
text-align:right;
}


With 'ul li a' you actually referering also to 'ul li a:hover', 'ul li.sublinks a' and 'ul li.sublinks a:hover'. It's all 'ul li a' only the others with a class (.sublinks) and/or pseudo class (:hover) added. Thus if you set 'ul li a' to 'display: block' then the other 3 selectors inherit this, so it's pointless to set the other 3 selectors also to 'display: block'. The same goes for the properties font-weight, width, color, text-decoration, text-align, etc. So fix that... saves you half the code.

Okay... now your issue. If you would have taken the time in those 4 years you're here on DWC to read a book about the basics of CSS... then you would have not struggled with this. The CSS box model is the fundemental basic of CSS.

So, there is a width of 160px on the 'ul li a' and you want to give a right padding on '.sublinks a', but there there is also the 160px width and thus no room for a padding. So if you want to give for example a right padding from 10px, then you must change the 160px width on .sublinks' a' to 150px (160 - 10 = 150) <--- CSS BOX MODEL!!!

http://css-tricks.com/the-css-box-model/