Jack Anders Posted February 2, 2016 Posted February 2, 2016 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; }
sagnik Posted February 6, 2016 Posted February 6, 2016 You can use the '<div style="position:absolute;">' and '<div style="position:relative;">'
Jack Anders Posted February 10, 2016 Author Posted February 10, 2016 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?
sagnik Posted February 10, 2016 Posted February 10, 2016 I think no. But can you post a screenshot of the webpage?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now