skyguy skyguy - 6 months ago 41
HTML Question

HTML/CSS: display circular divs in horizontal scrolling lineup? Divs appear on top of each other?

I have succeeded in centering a div containing a three.js animation within another circular div by setting the outer div to display of table and placing this all within a ul. I

I am having problems however creating a horizontal lineup of these circular divs (with another div within each) using li - no matter the padding I use, all the divs appear on top of each other. I ultimately want these divs to scroll horizontally but haven't begun to tackle that issue.
Here is a screenshot of my problem:enter image description here

CSS:

.circle1 {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
display: table;
border-radius: 50%;
position: absolute;
margin: 50px auto;
height: 100px;
width: 100px;
}
.circle2 {
background: #000;
display: table;
border-radius: 50%;
position: absolute;
margin: 50px auto;
height: 100px;
width: 100px;
}
#btn1 {

vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
#btn2 {
vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
ul {

}
li {
display: table;
list-style-type: none;
padding: 20px;
}


HTML:

<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
<a href="">
<ul>
<li>
<div class ="circle1">
<div id ="btn1"></div>
</div>
</li>
<li>
<div class ="circle2">
<div id ="btn2"></div>
</div>
</li>
</ul>
</a>
</div>
</div>
<script src="js/lowpolyPlanets.js"></script>
<script src="js/test2.js"></script>


What's going wrong here?

EDIT - li elements are skewed to the left:

CSS-

.circle1 {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
display: table;
border-radius: 50%;
position: relative;
margin: 50px auto;
height: 100px;
width: 100px;
}
.circle2 {
background: #000;
display: table;
border-radius: 50%;
position: relative;
margin: 50px auto;
height: 100px;
width: 100px;
}
#btn1 {

vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
#btn2 {
vertical-align: middle;
text-align:center;
left:0%;
position:relative; /*makes left effective*/
display:table-cell;
}
.ulContainer {
text-align: center;
}
ul {
margin: 0;
padding: 0;
background-color: red;

}
li {

float: left;
list-style-type: none;
padding: 20px;
}


HTML:

<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
<div class = "ulContainer">
<ul>
<li>
<div class ="circle1">
<div id ="btn1"></div>
</div>
</li>
<li>
<div class ="circle2">
<div id ="btn2"></div>
</div>
</li>
</ul>
</div>
</div>
</div>

Answer

Are you trying to make it look like below?

enter image description here

If yes then, Give float:left to your li and try removing circle1's position or changing it to relative.

Comments