CODEWITHSUNDEEP
htmlcssimage
Birdlady9604
Birdlady9604

Reputation: 207

positioning image above images(image gallery)

I have 6 images that I want to have at the bottom and one large image above them. I am trying to make an image gallery.

I have set margin-top to the 6 images. I have added the other image which I want larger for the preview image but it seems to be making the other images move down and some out of the div. I know this may have something to do with the images being floated? I am a bit confused on where to put the float I initially just floated the images but it didn't seem to need it I guess because they're inline.I may possibly need to put them in divs? Overall I'm just confused :/

Here is an image to make it clear what I want to achieve: enter image description here

Here is my code:

HTML

<div class="mainInfo">
<div class="gallery">

         <!-----this is the first image I want to be the large preview--->
     <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>

     <a href="#"><img src="../assets/images/gallery/gallery1.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery2.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery4.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery5.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery6.png" alt=""></a>
</div>
 <!--END OF MAIN INFO-->
 </div>

CSS

 .mainInfo {
height: 650px;
background-color:#FCFCFC;
color:#001D5D;
padding: 100px 0 0 30px;

/* .............Gallery section........... */
.gallery {
float: left;
}

 .gallery img {
width:140px;
height:auto;
margin:365px 0 0 15px;
 }

 .displayImage img {
width:400px;
height: auto;
margin: 0 auto;
padding:10px 0 0 30px;
 }


/* .............Gallery section END........... */

Upvotes: 0

Views: 123

Answers (2)

derek_duncan
derek_duncan

Reputation: 1377

Organize

  1. You need to organize your HTML for layout.

    Try inserting your big image in a <div class="displayImage"></div> tag. Then you can control it easier with your CSS.

  2. Use CSS to define constraints.

    Let's try adding appropriate widths to your images and fixing the margins.

Updated CSS

.gallery {
  float: left;
}

.gallery img {
  width:80px;
  height: 80px;
  margin: 10px;
}

.displayImage {
  text-align: center;
  padding-bottom: 20px;
}

.displayImage img {
  width: 400px;
  height: auto;
  margin: 0 auto;
}

Updated HTML

<div class="gallery">
    <div class="displayImage">
      <a href="#"><img src="http://images.summitpost.org/original/371959.JPG" alt="" class="displayImage"></a>
    </div>

    <a href="#">
      <img src="http://www.slowtrav.com/blog/chiocciola/IMG_1368.jpg" alt="">
    </a>
    <a href="#">
      <img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
    </a>
    <a href="#">
      <img src="http://images.summitpost.org/original/134465.jpg" alt="">
    </a>
    <a href="#">
      <img src="http://www.domnik.net/topoi/commons/AT/alps/05n_mountain.jpg" alt="">
    </a>
    <a href="#">
       <img src="http://people.hsc.edu/faculty-staff/mhight/Fulbright_Images/ItalySept2007/Cassino01.jpg" alt="">
    </a>
    <a href="#">
       <img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
    </a>
</div>

Just remember, HTML is your friend. Organize it to best parallel with your CSS. This is a small case that could still survive without less structured HTML, but it's a great practice to get started.

Here's a example of it all: http://codepen.io/anon/pen/LjgdF

Upvotes: 1

Richa
Richa

Reputation: 3289

Do something like this,then you can position first images as per your wish. Something you will get in Fiddle

<div class="mainInfo">
    <div class="gallery">
        <div class="bigpic">
            <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
        </div> 
        <a href="#"><img src="../assets/images/gallery/gallery1.png" alt=""></a>
        <a href="#"><img src="../assets/images/gallery/gallery2.png" alt=""></a>
        <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
        <a href="#"><img src="../assets/images/gallery/gallery4.png" alt=""></a>
        <a href="#"><img src="../assets/images/gallery/gallery5.png" alt=""></a>
        <a href="#"><img src="../assets/images/gallery/gallery6.png" alt=""></a>

    </div>
</div>

Upvotes: 0

Related Questions