CSS positioning help needed

Question

I am new to this and would really appreciate some guidance. I am trying to position my images in a div using css. I have used the inline element and it still appears underneath the image. Here is my code for my ui buttons:

   #UIButtons {
position:fixed;
top: 50%;
left: 40%;
width:45em;  /* this is correct and displays how I want it to*/
height:18em;
margin-top: -9em; 
margin-left: -15em;
background: url(backtabss.png);

}
#UIButtons ul{ /* this has set the height ok*/
position:relative;
top: 9%;
right: 50%;
width:45em;
}
#UIButtons li  {/*not sure what this is doing to be honest*/
position:relative;
top: 70%;
left: 45%;
display: inline; /* this is not working my images are appearing vertical*/
padding: 40px;
}

I have commented the code to let you know whats happening. The HTML is:

<div id="UIButtons"> 
  <ul>
     <li><a href="tutorials.html"><img src="beginBUT.png" alt="Click to start  Tutorials" title=" Click this button to start Tutorials" width="300" height="250"/></a></li>
     <li><a href="sChords.html"><img src="beginCHO.png" alt= "Click to view Chord Sheet" title=" Click this button to view Chord Sheet" width="300" height="250"/></a></li>
 </ul>  
</div>

Thank you for time. I have looked at other suggests on here but none are helping me, in fact its confusing me more!

Answer 1

You have a couple of widths that collide, and some that seem to work fine, but actually they block each other.

Look how weird the sizes and positions of those elements are when you give them a border:

http://jsfiddle.net/qaZsh/

Now, I've removed a lot of CSS and the result is this:

  #UIButtons {
       border: 1px solid blue;
position:fixed;
width:55em;  /* this is correct and displays how I want it to*/
background: url(backtabss.png);

}
#UIButtons ul{ /* this has set the height ok*/
       border: 1px solid red;
position:relative;
top: 9%;
}
#UIButtons li  {/*not sure what this is doing to be honest*/
       border: 1px solid green;
display: inline-block; /* this is not working my images are appearing vertical*/
padding: 40px;
}

http://jsfiddle.net/qaZsh/1/

I'm not sure if that is exactly what you want (hard to guess) , but I think it's a lot closer. I've changed one thing: changed inline to inline-block for the li.

You could probably strip it down even further. Anyway, sometimes it's good to take a step back (or even start over). In this case, I think you just were lost in a big number of absolute and relative positionings, combined with positive and negative margins and paddings. At a certain point it's impossible to keep overview.

Answer 2

This css code should do the trick

#UIButtons ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

#UIButtons li  {
    display:inline;
}

If the parent container is not big enough to keep both of the elements on one line then it will put it on the next line. Do you always want them on the same line regardless of the parent element's size?

http://jsfiddle.net/XS57H/

Answer 3

you should be using inline-block:

#UIButtons li {
position: relative;
top: 70%;
left: 45%;
display: inline-block;
padding: 40px;
}

and you need to up the width here:

#UIButtons ul {
position: relative;
top: 9%;
right: 50%;
width: 52em;
}