0

I'ld like someone to tip me the way i can fill the gaps of the Grid View Listing. Below i've inserted all the CSS changes i have from it. Still can't figure it out out to fill the gaps...

The Grid i'm talking about i'ts in bottom of homepage at:

http://findout-macau.com

#content .category_grid_view li p.timing { margin:0; padding:0; }
#content .category_grid_view li p.timing span { color:#000; }

#page .category_grid_view {
width: auto;
padding-left:0px;  
}
#content .category_grid_view {
margin:-10 0 20px -15px;
padding:0;
width:650px;
clear:both;
}
#content .category_grid_view li a.post_img {
height:auto;
width:100%;
overflow:hidden;
padding:1%;
}
#content .category_grid_view li a.post_img img {
margin:0 auto;
display:block;
height:auto;
}
#content .category_grid_view li {
background: none repeat scroll 0 0 transparent;
float: left;
list-style: none outside none;
margin: -10 0 20px;
padding: 0 0 0 15px;
position: relative;
width: 140px;
}
#content .category_grid_view li.hr {
display: none;
}
#content {
float: left;
overflow: hidden;
padding-left: 5px;
width: 640px;
}
#content .category_grid_view li a.post_img {
display: block;
margin-bottom: 0;
padding: 0;
background: none repeat scroll 0 0 #FFFFFF;
border: 0 solid #E2DFDF;
box-shadow: 0 0 0 #DDDDDD;
height: auto;
width: 100%;
overflow: hidden;
}
#content .category_grid_view li a.post_img img {
height: auto;
overflow: hidden;
width: 100%;
}
#content .category_grid_view li.featured {
position:relative;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#content .category_grid_view li .featured_img {
width:69px;
height:72px;
position:absolute;
left:15px;
top:0px;
text-indent:-9009px;
}
#content .category_grid_view li.featured a.post_img {
border: 0 solid #B1D7E0;
}
#content .category_grid_view li .widget_main_title {
padding-top: 7px;
clear: left;
height: 25px;
overflow: hidden;
background: none repeat scroll 0 0 #EBEBEB;
}
#content .category_grid_view li .rating {
background: none repeat scroll 0 0 #EBEBEB;
display: block;
margin: 0px 0;
padding-bottom: 7px;
padding-top: 7px;
}
#content .category_grid_view li p.review {
background: none repeat scroll 0 0 #EBEBEB;
border-bottom: 10px solid #EBEBEB;
border-top: 1px solid #EBEBEB;
color: #EBEBEB;
margin-bottom: 20px;
padding: 5px 0;
}
Wooble
  • 87,717
  • 12
  • 108
  • 131
Bdalte
  • 47
  • 1
  • 1
  • 7

1 Answers1

0

The problem is with the image height.

if you set

#content .category_grid_view li a.post_img img { height: 97px }

the Grid View will display good, but the image will look distorted.

try to resize the image to make it look good and keep the height to 97px.

EDIT

@Bdalte's comment

try to put each element/product into a div (let's say with the class wrapper) and set the height with the max height you get from your elements/products. based on Find out divs height and setting div height you can use this script

var maxHeight = 0;
$('div.wrapper')
  .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
  .height(maxHeight);

it should look like this

enter image description here

Community
  • 1
  • 1
VladH
  • 383
  • 4
  • 16
  • I know that. Cause originally the grid view was the way your suggesting. What i want is to have different images heights, according to horizontal or vertical display, without altering the width. – Bdalte Sep 24 '13 at 13:27
  • i'm kind a newbbie in here, but as far as i understood, this would only make the other div to stretch even if the image is smaller. Am i right? My goal is to make a layout similar to pinterest pictures disposal. – Bdalte Sep 24 '13 at 14:02
  • Hmm now I understand what you actually want to get, as you can see in the picture, the script will "align" each hotel. – VladH Sep 24 '13 at 14:09
  • http://images.findout-macau.com/2013/09/grid-view-rows-goal.png I was thinking of something more like this picture in the link above. Thanks for all your effort... i trully appreciate it! – Bdalte Sep 24 '13 at 14:13
  • then take a look at this http://stackoverflow.com/questions/14439124/gap-between-lis?rq=1 – VladH Sep 24 '13 at 14:15