I'm encountering some challenges with my list of shapes - could it be that I am approaching it the wrong way? I could use some guidance on what I am trying to accomplish.
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>
Upon reviewing my code and fiddle, you can see that it aligns correctly. I would like to insert an icon (which is a span) in the center of each shape and also a word beneath each one. However, when I add elements like this, it completely disrupts the layout. Perhaps I have approached the design incorrectly?