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!

You need to fill in details .. At least frame question well before posting .. it you can not create a jfiddle — Andy897
– Andy897, Commented Mar 25, 2014 at 18:00
Consider leaning on a CSS framework with good documentation like Twitter Bootstrap, and keep it very simple. The benefit of a framework like this is that you don't need to know or write CSS. Just follow the examples they provide in their documentation. Here are some Bootstrap examples to get you started. — Jeremy Cook
– Jeremy Cook, Commented Mar 25, 2014 at 18:08
Thank you for your help I will use your advice to get my head around the css framework :) — user3460996
– user3460996, Commented Mar 26, 2014 at 12:19

Logan Murphy · Accepted Answer · 2014-03-25 18:06:03Z

1

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/

answered Mar 25, 2014 at 18:06

Logan Murphy

6,2403 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GolezTrol · Accepted Answer · 2014-03-25 18:06:20Z

0

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.

answered Mar 25, 2014 at 18:06

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

1 Comment

user3460996 Over a year ago

Thank you so much the key was the borders. I could now see which of the css controlled which element. Thank you so much for your help. Now in future if I get in a muddle I will add borders to see what is going on. I really recommend to new users to do the same, once you see the positioning you can easily tweak the positioning to suit your requirements!

vimes1984 · Accepted Answer · 2014-03-25 18:04:23Z

0

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

answered Mar 25, 2014 at 18:04

vimes1984

1,6933 gold badges27 silver badges59 bronze badges

Collectives™ on Stack Overflow

CSS positioning help needed

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related