rain13 Posted August 11, 2014 Share Posted August 11, 2014 (edited) Hello. I rand into problem that I dont know how to solve myself, I dont even know what might cause it or what I should google for. My intention is to create gallery where images are next to each other. I am awere of float property, but the reason for using spans is that I also need to have some text below the image (as the screenshot attached demonstrates you). I know that I could also use table but, I want it to work well with every screen width so making 4 cols wide table would be too wide for phones and too thin for widescreen while spans would automatically oppupy next rows as needed. The issue I am having for is:1) that vertical image is causing the span tag to go upper than others (pecture of singer);2) missing hastag causes image to go lower than others (4th from left) Image attached: Why does this 2nd image go upper then others and 4th image go lower than others? Could anyone be so nice to me and help me to fix this? <!DOCTYPE html><html><head><head><style>.thumb{ display: inline-block; width: 240px; height: 320px; margin: 3px; background: #ff0000;}.thumb_container{ display: table-cell; width: 240px; height: 240px; min-height: 240px; min-width: 240px; background: #00ff00; text-align: center; vertical-align: middle;}</style></head></head><body><span class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi5<br><a class="hashtag" href="http://url">#tag</a> </span><span class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://farm5.static.flickr.com/4037/4515188795_f75ec8b223_m.jpg" ></a></span>text</span><br>gi5<br><a class="hashtag" href="http://url">#tag</a> </span><span class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi3<br><a class="hashtag" href="http://url">#tag</a> </span><span class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi2<br> </span><span class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi1<br><a class="hashtag" href="http://url">#tag</a> </span></body></html> Edited August 11, 2014 by SoItBegins Link to comment Share on other sites More sharing options...
niche Posted August 11, 2014 Share Posted August 11, 2014 Why not use float? http://www.w3schools.com/cssref/pr_class_float.asp Link to comment Share on other sites More sharing options...
rain13 Posted August 11, 2014 Author Share Posted August 11, 2014 Because I want display some text under each photo as you can see from screenshot. Sorry for not explaining what I want to to enough at first place, I'll edit it now to make it clear that picture and this little text alone must be together and that text must be below the image and next image with it's text should be next to it. Link to comment Share on other sites More sharing options...
niche Posted August 11, 2014 Share Posted August 11, 2014 Float a div instead of positioning table-cell. It's much easier. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 11, 2014 Share Posted August 11, 2014 (edited) I think with table cell with vertical-align: middle; it is trying to vertical align the combined image and text/anchor vertically so there is a equal distance from top of image and the bottom most element, combined with collapsing margins as well the 3px top margin is seeping to default body margin of approx 10px. use overflow: hidden on .thumb seems to fix this. Edit: you also have misplaced head tags which does not help i thinks. Edited August 11, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
rain13 Posted August 11, 2014 Author Share Posted August 11, 2014 (edited) Thanks, now with divs, as niche suggested I have next problem:the green area around 2nd picture is few px taller that the rest of these. See that since image is exactly 240px high then this image should collide with red area but it doesnt, it has few px green area between image and red area. I know it comes from display: table-cell; but if I remove this property then I am no longer able to vertically align other images middle. I want to keep other images vertically aligned to the middle. And now (probably because of divs) dsonesuk's owerflow: hidden doesnt work. But at least it's aligning nicely now. <!DOCTYPE html><html><head><head><style>.thumb{ width: 240px; height: 320px; margin: 3px; background: #ff0000; float: left;}.thumb_container{ display: table-cell; width: 240px; height: 240px; min-height: 240px; min-width: 240px; background: #00ff00; text-align: center; vertical-align: middle;}</style></head></head><body><div><div class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi5<br><a class="hashtag" href="http://url">#tag1</a> </div><div class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://farm5.static.flickr.com/4037/4515188795_f75ec8b223_m.jpg" ></a></span>text</span><br>gi5<br><a class="hashtag" href="http://url">#tag2</a> </div><div class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi3<br><a class="hashtag" href="http://url">#tag3</a> </div><div class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi2<br> </div><div class="thumb"><span class="post_time"><span class="thumb_container"><a href="#"><img src="http://radified.com/gfx7/cascade2.jpg" ></a></span>text</span><br>gi1<br><a class="hashtag" href="http://url">#tag5</a> </div></div></body></html> Edited August 11, 2014 by SoItBegins Link to comment Share on other sites More sharing options...
dsonesuk Posted August 11, 2014 Share Posted August 11, 2014 add font-size: 0; to .thumb_container. Link to comment Share on other sites More sharing options...
rain13 Posted August 11, 2014 Author Share Posted August 11, 2014 Thanks, it worked, but what's the idea behind this? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 11, 2014 Share Posted August 11, 2014 IT seems that the anchor produces a space the height of font, by zeroing the font it gets rid of it even line-height: 0; works as well. Link to comment Share on other sites More sharing options...
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