CODEWITHSUNDEEP
htmlcss
CreepyC
CreepyC

Reputation: 45

CSS - HTML - How to align images properly across the page

I want to make all the images aligned properly if anyone can help it will be greatly appreciated all the images are 100% the same size so its not that problem

enter image description here

            .box {
         float: left;
         width: 20%;
         padding-bottom: 20%;
      }

      .top-left {
        position:absolute;
        top: 10px; left: 10px;
        width: 50%;
        overflow: hidden;
      }

      .top-right {
        position:absolute;
        top: 10px; right: 10px;
        width: 50%;
        overflow: hidden;
      }
      .bottom-left {
        position:absolute;
        bottom: 10px; left: 10px;
        width: 50%;
        overflow: hidden;
      }
      .bottom-right {
        position:absolute;
        bottom: 10px; right: 10px;
        width: 50%;
      }

          @media only screen and (max-width : 480px) {
         .box {
            width: 100%;
         }
         .box a{
            position: relative;
         }

         .top-left, .top-right, .bottom-left, .bottom-right {
            width:100%;
         }

      }
<!Doctype html>
<html>
  <head>
    <title>DelUZens</title>
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
    <link href="main.css" rel="stlesheet" type="text/css">
    <style>
    .wrap {
      overflow:hidden;
    }

  
    </style>
  </head>
  <body bgcolor="black">
    <div class="section-links">
    <div class="wrap">
    <div class="box">

      <a href="teams.html" class="top-left">
        <img style="width: 100%;" style="height: 100%" src="icon1.jpg" alt="">
      </a>
      </div>

      <div class="box">
      <a href="store.html" class="top-right">
        <img style="width: 100%;" style="height: 100%"  src="icon2.jpg" alt="">
      </a>
      </div>

      <div class="box">
      <a href="sponsors.html" class="bottom-left">
        <img style="width: 100%;" style="height: 100%" src="icon4.jpg" alt="">
      </a>
      </div>

      <div class="box">
      <a href="aboutus.html" class="bottom-right">
        <img style="width: 100%;" style="height: 100%" src="icon3.jpg" alt="">
      </a>
      </div>
    </div>
    </div>
  </body>
</html>

So if you can see at the top the pointy end isn't exactly touching the other one same with the two sides

Kind Regards CreepyC Greatly Appreciated

Upvotes: 1

Views: 171

Answers (3)

CupawnTae
CupawnTae

Reputation: 14580

You're setting the height and width of the <a> elements to 50% but then you're positioning them 10px from each edge, which means they overlap.

You can use CSS calc() to size the images to 10 pixels less than 50% to compensate:

width: calc(50% - 10px);

(note the spaces are important, don't leave them out).

calc() is relatively new, so check http://caniuse.com/#feat=calc for browser support if it's a concern.

Upvotes: 2

sanjay joon
sanjay joon

Reputation: 133

if you want all image 100% height and width of the screen then use 100vh. ex : - 

    .class{ height:100vh; width:100%; margin:0; padding:0; }

if you want starch free images in your website fix height / width ( on your requirement ) using px / % .. ex : -

    .class{ height:200px; width:auto; margin:0; padding:0; }

i fixed height , same for if you want fixed width.

Upvotes: 0

Argiris A
Argiris A

Reputation: 156

I believe the best way is using bootstrap grid system with rows
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you have two pictures in each row you put a class col-6 in each( they columns have to add to 12) and it also has responsiveness with other class names.

or using css with flex
http://www.w3schools.com/cssref/css3_pr_flex.asp
Also here is a fun-page with a game to better understand flex and its features
http://flexboxfroggy.com/

Upvotes: 0

Related Questions