CODEWITHSUNDEEP
htmlcssflexbox
James
James

Reputation: 141

Simple solution for 3 circles (images) sitting horizontally equidistant apart and aligned

So for 3 days all I've been trying to do is have:

It seems like such a simple task, but after 3 days and asking multiple questions, I'm getting nowhere. Please, can someone write me a code to achieve this?

If it helps, I have this circle code so far:

Thanks if you can help me

(I am new to coding) 

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
  body{
  	width: 100%;
  	height: 100%;
  }
/*Parallax*/

.parallax{
    background-image: url("bg.jpg");
    height: 540px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
}
/*Parallax*/

#header{
 position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
	left: 20%;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  background-color: #357eca;
  width: 50%;
  word-wrap: break-word;
  opacity: 0.9;
  font-weight: 900;
  padding-left: 5%;
  padding-right: 5%;



}

h5
{   
  color:white; 
  text-align: center;
    font-family: 'Montserrat';
      text-transform: uppercase;
      font-weight: 900;
 
  /*-webkit-margin-before:0.67em;
  -webkit-margin-after:0.67em;
  -webkit-margin-start:0px;
  -webkit-margin-end:0px;
  -webkit-tap-highlight-colour:rgba(0,0,0,0);
  -webkit-font-smoothing:antialiased;
  -webkit-box-direction:normal;
  position: absolute;*/
}
h5:after, h5:before
{
  content: '';
  width: 50px;
  height: 2px;
  background: black;
  margin: 0 10px;
}
/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: red;
  display: block;
  margin: 0 auto;
}

.img-circular1 {
  background-image: url('/Images/learn.jpg');
}

.img-circular2 {
  background-image: url('/Images/watch.jpg');
}

.img-circular3 {
  background-image: url('/Images/practice.jpg');
}

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  width: 70%;
  background-color: green;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
    flex-grow: 1;
      height: 50vh;
  justify-content: space-around;
}

.wrap {

width: 30%;
  height:50%;
}

.flex {
  height: 50vh;
  display: flex;
  justify-content: space-around;
}

.flex > div {
  flex: 0 0 23%;
}
</style>
</head>
<body>
<div id="navigation"></div>

<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>

<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>
<div id="container1">
<div class="wrap">
    <div class="img-circular1"></div>
    </div>
    <div class="wrap">
    <div class="img-circular2"></div>
    </div>
    <div class="wrap">
    <div class="img-circular3"></div>
    </div>
</div>

<div id="content" style="margin-top: 100px;">
<p style="padding-bottom: 300px;">Helllllloooooooooo</p>

</div>

<script src="nav.js"></script>
<script src="template.js"></script>
</body>
</html>

Upvotes: 0

Views: 737

Answers (2)

Rene van der Lende
Rene van der Lende

Reputation: 5291

This should come close to a satisfactory solution. I optimized some code and used shorthand notation where possible and introduced class .band as a generic container with default values. The .band content will give it it's final height.

Also, to get a nice circle I introduced a responsive width and height constraint for the images. This is necessary to force images of any arbitrary size to fit nicely in a circle (check the sizes of the dummy images!)

height: calc(0.2 * 100vmin) will result in an circle of 64px at a minimum viewport size of 320px smoothly resizing to 256px at a minimum viewport size of 1280px, called responsive sizing.

I commented the code for as far I deemed relevant, let me know if you need more explanation or just want to pick my brain (caution: it is a bit of a mess up there).

body {
  max-width: 100%;
  height: 100%;
  margin: 0; /* remove nasty space around our page */
}

#navigation {
  color: #357eca;
  font-size: 1.5rem;
}

#parallax {
  background-image: url("bg.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#parallax>div {
  z-index: 1;
  width: 50px;
  height: 2px;
  background: black;
  margin: 0 -60px;
}

#header {
  width: 50%;
  padding: 15px 5% 20px 5%;
  background-color: #357eca;
  opacity: 0.9;

  font-size: 4vw;
  text-align: center;
  font-weight: 900;
  word-wrap: break-word;
}

h5 {   
  color:white; 
  text-align: center;
  font-family: 'Montserrat';
  text-transform: uppercase;
  font-weight: 900;
}

.band { /* Nice grey'ish band as container */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;

  max-width: 100vw; /* stay in horizontal view */

  /* padding moves all content to center 70% of <body> */
  padding: 2rem 15%; /* 100% - 2 * 15% = 70% width */

  /* extra top/bottom spacing for clarity */
  margin: 1rem 0;
}

#container1 {
  justify-content: space-around; /* evenly space the images on the line */
}
[class^="img-circular"] {
  height: calc(0.2 * 100vmin); /* 64px at 320 and 256px at 1280 */
  width : calc(0.2 * 100vmin); /* nice responsive sizing */

  background-position: center;  /* center image in parent */
  background-repeat: no-repeat; /* prevents repeat of image! */
  background-size: cover;       /* stretch/shrink to fill */

  border-radius: 50%;
}
.img-circular1 { background-image: url("http://placehold.it/237x334") }
.img-circular2 { background-image: url("http://placehold.it/317x123") }
.img-circular3 { background-image: url("http://placehold.it/141x301") }
<div id="navigation" class="band">
        <p>navigation</p>
    </div>

    <div id="parallax" class="band">
        <div></div>
        <h5 id="header">
            <b>Welcome to RyanTeaches</b>
        </h5>
        <div></div>
    </div>

    <div class="band content">
        <h2>Activities</h2>
    </div>

    <div id="container1" class="band">
        <div class="img-circular1"></div>
        <div class="img-circular2"></div>
        <div class="img-circular3"></div>
    </div>

    <div class="band content">
        <p>Helllllloooooooooo</p>
    </div>

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53709

You can use flex with justify-content to either space-between or space-around (or space-evenly - a new property that isn't well supported, only works in firefox) depending on what you mean by having the elements equidistant apart (read more about that property here). Set a flex-basis on the flex children to establish their width, then nest your elements with the background inside of the flex child so you can use padding-bottom: 100% to make the element as tall as it is wide so that it's a square - or a perfect circle with your border radius.

#container1 {
  height: 50vh;
  display: flex;
  justify-content: space-around;
}

#container1 > div {
  flex: 0 0 23%;
}

.img-circular1,
.img-circular2,
.img-circular3 {
  background-size: cover;
  border-radius: 50%;
  padding-bottom: 100%;
}

.img-circular1 {
  background-image: url('https://i.sstatic.net/2C22p.jpg');
}

.img-circular2 {
  background-image: url('https://i.sstatic.net/mBNlv.png?s=328&g=1');
}

.img-circular3 {
  background-image: url('http://kenwheeler.github.io/slick/img/lazyfonz2.png');
}
<body>
<div id="navigation"></div>

<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>

<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>

<div id="container1">
    <div><div class="img-circular1"></div></div>
    <div><div class="img-circular2"></div></div>
    <div><div class="img-circular3"></div></div>
</div>

<div id="content" style="margin-top: 100px;">
<p style="padding-bottom: 300px;">Helllllloooooooooo</p>

</div>

<script src="nav.js"></script>
<script src="template.js"></script>
</body>

Upvotes: 2

Related Questions