Jump to content

Coding Issue - Putting Together A Block Of Text And A Gallery Of Images


Recommended Posts

Hey there!

Here's a practical question to the coding gurus. Maybe there's someone who could help...

The problem is I have a block of text on the left and there's a gallery of 3 images (thumbnails) I need to be placed in a row on the right. The problem is that I can't put them together in the same row.

When I make changes to the code, all I get is all 3 pictures become a column instead of a row.

I have a fixed width of wrapper, it is 1000px. Image sizes are the same and equal 275x140px, but I used the property

 -webkit-transform:scale(0.8)

to reduce their size to 220x112px, so they get circa 302x 154px on hover because I used the scaling property

-webkit-transform:scale(1.1)

The question is should I make the wrapper liquid, stating the size of a 100%? Please take a look at my HTML and CSS code samples and help if you will?

 

Thanks in advance!

 

<html>
<head>
</head>
<body>
<div class="hovergallery">
<h1 class="mg">SAMPLE TEXT</h1> </br>
<span class="about">
<p><b>SMAPLE TEXT</b> bla bla bla </p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </span>
<ul>
<li class="a"><img src="images/1.jpg" alt="Image 1"></li>
<li class="a"><img src="images/2.jpg" alt="Image 2"></li>
<li class="a"><img src="images/3.jpg" alt="Image 3" /></li>
</ul>
</div>
</body>
</html>

 

And CSS

 

.a{
float: left;
margin: 4px;
list-style-type:none;
display: inline;
}

.about{
width:50%;
float:left;
margin: 0 20px 0 10px;
}

.hovergallery img{
margin: 0 10px 5px 0;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;

}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Link to comment
Share on other sites

Thanks man! I think this could help... But I still can't wrap my head around the numbers. If my wrapper is 1000px, I suspect there must be a problem with the width of the images. Do you think I should resize the images and make their width less?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...