ul li shapes and text

Question

i am having some issues with my list of shapes - perhaps I am approaching it incorrectly? I need some pointers on what i wish to achieve.

My Fiddle

CSS:

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}

#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

HTML:

<div style="width: 1000px; margin: 0 auto; padding: 0 0 0 0;">



<ul>

<li style="display:inline;"><div id="circle" style="float:left;"></div></li>

<li style="display:inline;"><div id="circle" style="float:left;margin:  0 25px 0 25px;""></div></li>

<li style="display:inline;"><div id="tablet" style="float:left; margin:  -100px 25px 0 25px;"></div></li>

<li style="display:inline;"><div id="circle" style="float:left;margin:  0 25px 0 25px;""></div></li>

<li style="display:inline;"><div id="circle" style="float:left;"></div></li>

</ul>



</div>

As you can see from my code and fiddle it lines up correctly. i am wanting to place an icon (which is a span) to sit in the middle of each shape and also a word underneath each one. However - when I add in elements like this it throws it out completely. Maybe I have approached the layout incorrectly?

Answer 1

As long as I don't know what the size of the images you want to put in, is. This is all I can say: You should change the css to this:

#circle { 
   height: auto;
    width: auto;
    border-radius: 50%;
   background: #3B5163; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
}

#tablet{
    width: auto;
    height: auto; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

Also, it is better to use display: block, and then float: left. Correct me if i'm mistaken, this way css sees the objects as blocks, and with 'float:' you can tell those boxes to stack up left or right. (if you don't define float, by default they'll stack underneath each other) You could also try an absolute positioning approach in addition to this.

Answer 2

hey hi i guess you are looking like this :- http://jsfiddle.net/29NF3/2/

add this css

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}
#circle span {
    clear: both;
    display: block;
    text-align: center;
    vertical-align: middle;
}
#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
.text {

    display: block;
    text-align: center;

}

Updated DEMO :- http://jsfiddle.net/29NF3/5/