Question

Ok guys, noob here, writing my first joomla module (or trying to anyway!). Gotten suprisingly far but am having some issues with my css styling, im sure its to do with my selectors and my lack of understanding about whats happening!

Basically Im trying to make one of the li’s padding-right grow on hover, the effect is working but currently both the li’s are growing rather than just the one I am hovering on.

Any help would be awesome!

THE HTML

<div>
<ul id="social">
<li>one</li>
<li>two</li>
</ul>
</div>

THE CSS

#social{
    position:fixed;
    z-index:1000;
    top:50%;
    right:0px;
    list-style:none;
        }

#social li{
    padding-right: 5px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    background-color: #202020;
    border-radius: 4px 0 0 4px;
    margin-top:15px;
    -moz-transition: padding-right .3s ease-in;
     -o-transition: padding-right  .3s ease-in;
     -webkit-transition: padding-right  .3s ease-in;
     transition: padding-right  .3s ease-in;
    }

#social li:hover{
    padding-right: 25px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    }

Answer 1

I’m pretty sure this is because li is a block element, which fills it’s parent (the ul) When one grows, the parent is pushed out, causing the other li to fill the space. This way the lis will always be the same size.

There might be a better way, but you could add the following styles to the li

float:right;
clear:both;

This works because it changes the elements to act like inline elements, and keeps them stuck to the right side, but also puts each on a separate line.

An alternative is to put an inline element inside of the li (span or a), and change the li styles to be a, and add an li style to simply set text-align:right. You’ll probably want some other styling, but I just did enough to get the functionality in there.

<div>
<ul id="social">
  <li><a href='#'>one</a></li>
  <li><a href='#'>two</a></li>
</ul>
</div>

#social{
    position:fixed;
    z-index:1000;
    top:50%;
    right:0px;
    list-style:none;
        }

#social li{
  text-align:right;
}

#social a{
    padding-right: 5px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    background-color: #202020;
    border-radius: 4px 0 0 4px;
    margin-top:15px;
    -moz-transition: padding-right .3s ease-in;
     -o-transition: padding-right  .3s ease-in;
     -webkit-transition: padding-right  .3s ease-in;
     transition: padding-right  .3s ease-in;
    }

#social a:hover{
    padding-right: 25px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    }