Making square boxes in html and css

Question

I have created a webpage (at present it will work in desktop mode only) by seeing an image.

At this moment, I am able to create nearly 40-50% of the webpage but I am not sure how to create 6 square boxes (ADDITIONAL SPORT, COLLEGIATE, INDIVIDUAL, PROFESSIONAL, ENTERTAINMENT, COMMERCIAL) beneath the background image(where the guy is standing). I have included all my CSS and HTML codes in the fiddle. I tried creating boxes but automatically it is going over the top of an image(not sure why).

I tried putting the following set of codes beneath the nav section but unfortunately it didn't work.

<div class="squares">
<p class="square1">ADDITIONAL SPORT</p>
<p class="square2">COLLEGIATE</p>
<p class="square3">INDIVIDUAL</p>
<p class="square4">PROFESSIONAL</p>
<p class="square5">Additional Sport</p>
<p class="square6">Additional Sport</p>
</div>

Let me know what I am doing wrong.

Don't use absolute positioning – Gerard May 20 '17 at 23:13 — Gerard, May 20 '17 at 23:13

score 0 · Answer 1 · answered May 20 '17 at 23:17

0

Try this:

<div class="squaresRow">
    <div class="square">ADDITIONAL SPORT</div>
    <div class="square">COLLEGIATE</div>
    <div class="square">INDIVIDUAL</div>
</div>
<div class="squaresRow">
    <div class="square">PROFESSIONAL</div>
    <div class="square">Additional Sport</div>
    <div class="square">Additional Sport</div>
</div>


<style>

.squaresRow {
    width: 100%;
}

.square {
    width: 33%;
    display: inline-block;
    text-align: center;
}

/* adds a margin between the two rows */
.squaresRow:first-child > .square {
    margin-bottom: 2%;
}
</style>

answered May 20 '17 at 23:17

Tom_B

307
2
8

@The code seems fine but the text is going all the way towards the bottom, not beneath the image where I want. – May 20 '17 at 23:22
You have used absolute positioning to lay everything out. I would not recommend this, but if you encapsulate the .squareRows elements with a div element and give that an absolute position it should work – Tom_B May 20 '17 at 23:32
As an alternative design solution I would recommend using bootstrap and using this template as a base for your page: http://getbootstrap.com/examples/dashboard/ this should do allot of the css for you – Tom_B May 20 '17 at 23:34
@_Tom_B I have used position absolute for the nav bar scrolling. Apart from that, I haven't used anywhere. – May 20 '17 at 23:47

score 0 · Answer 2 · edited May 23 '17 at 12:34

If you look at the results in "Full Page" view you can see two rows of squares. Note: you may view this revision here as well. (The code also corrects some minor HTML and CSS errors, too.) I added a red border around the squares just for emphasis and it may certainly be removed in finalizing this page.

* {
padding: 0;
margin: 0;
}

.header {
position: relative;
}

.header-background {
  position:relative;
width: 100%;
}

.header-title {
position: absolute;
 top: 0px;
 left: 120px;
 }   

@font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}

h1 {
text-align: center;
font-size: 25px;
font-family: "AvantGarde Demi";
letter-spacing: .24em;
color: rgb(255, 255, 255);
position: absolute;
top: 18vh;
 left: 160px;
 width:100%;
}

p {
font: 27px "Adelle PE";
padding-left: 200px;
text-align: center;
padding-right: 210px;
line-height: 1.236;
letter-spacing: .12em;
-moz-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
-webkit-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
-ms-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
color: rgb(255, 255, 255);
position: absolute;
top:24vh;
 left:0;
  width:100%;
}

.nav {
position: absolute;
width: 155px;
top: 0px;
bottom: 0px;
left: 0px;
 border-style: solid;
border-right-color: #ff0000;
background-color: #030303;
opacity: 0.5;
height: 1157px;
}


.navbar-logo {
position: relative;
width: 155px;
}

.navbar-tags {
padding: 0;
list-style-type: none;
}

.navbar-icons {
display: inline;
}


.squares {
position:absolute;
left:32vw;
bottom: 0vh;
height:400px;
width: 600px;
border: 1px solid red;
}

.square {
position: absolute;
left:0;
margin:0;padding:0;
background-color: #ccc;
  width: 200px;
  height:200px;
border: 1px solid black;
  }
.square1 {
 position:absolute;
 top:0;
 left:0;
 }
 .square2 {
 posiiton:absolute;
 top:0;
 left: 200px;
 }
 .square3 {
 posiiton:absolute;
 top:0;
 left:400px;
 }
.square4 {
  position:absolute;
 bottom:0;
 left:0;
 }
 .square5 {
  position:absolute;
 bottom:0;
 left: 200px;
 }
 .square6 {
 position:absolute;
 bottom:0;
 left:400px;
 }

.login {
display: inline;
padding-left: 10px;
}

<div class="header">
    <img class="header-background" src="https://s17.postimg.org/5590nqkyn/dna-image.png">

    <img class="header-title" src="https://s12.postimg.org/5vqt7imb1/northman-wordmark.png" width="400" height="157">
    <h1>OUR DNA</h1>
    <p>Northman was established to provide radically-evolved insurance solutions for the adventure and extreme sport markets. Northman is changing the extreme insurance playing field.</p>
</div>


<div class="nav">

    <img class="navbar-logo" src="https://s12.postimg.org/p1g2nywql/northman-logo.png">
    <ul class="navbar-list">
        <li class="navbar-tags"><a href="#">OUR DNA</a></li>
        <li class="navbar-tags"><a href="#">PROGRAMS</a></li>
     <li class="navbar-tags"><a href="#">RESEARCH</a>/li>
        <li class="navbar-tags"><a href="#">STORIES</a></li>
        <li class="navbar-icons"><i class="fa fa-facebook-square"></i></li>
        <li class="navbar-icons"><i class="fa fa-twitter-square"></i></li>
        

    </ul>
    <div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>

   <a class="login" href="#">Log In</a>
    <a class="login" href="#">Sign Up</a>
       </div>

Also, see excellent related discussion here

Thanks, but how can I use I this in my fiddle ? When I trying to put this on my code, it is going all the way towards the top. — , May 21 '17 at 00:49
@shortcut: please take a look now and see if this works better for you. — slevy1, May 21 '17 at 23:48

score -1 · Answer 3 · answered May 20 '17 at 23:20

If you are using a CSS framework like Bootstrap or a CSS tool like Flex-box, doing something like would be very easy. Try looking into these tools.

But just using raw CSS and html. try.

First, add a class to your squares so that you can target all square divs

.squares {
  position: aboslute; 
  width: 300px; 
}

.square {
  text-align: center;
  margin: 0px;
  background-color: red;
  width:100px;
  height:100px; 
  float: left;
}

<div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>

Making square boxes in html and css

3 Answers3