mindcooler Posted January 25, 2008 Share Posted January 25, 2008 I'm trying to build graphics by tiling smaller images side by side. Horizontally this is no problem, just put <img>:s on the same line. But how are you supposed to do it vertically? If I <br/> and start on a new line, there is a gap between the two lines. And if I build a table with no padding and spacing, it only works in HTML 4.01. In XHTML there is a vertical gap of two pixels between lines.In short, how do I do this in XHTML?Adding to the woes; IE seems to add yet another pixel vertically.I guess I could make DIV:s of the rows and position them manually, but deters editability. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2008 Share Posted January 25, 2008 I'm not sure at the moment if it will work, but maybe you should try this CSS:img {display: block;}And it should work just fine with line breaks (<br />).You can also do the folllowing and you shouldn't need a <br /> tag.img {display: block;clear: both;} Link to comment Share on other sites More sharing options...
mindcooler Posted January 25, 2008 Author Share Posted January 25, 2008 Interesting, but all the images ended up on top of eachother, even those that were supposed to go besides eachother.i just realized that something important had fell out of my test files. There is going to be text besides the images, and the text is causing the rows to come apart. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2008 Share Posted January 25, 2008 Well, that's what the clear:both property does. You can take it away. I think that display: block does what you wanted. Link to comment Share on other sites More sharing options...
mindcooler Posted January 25, 2008 Author Share Posted January 25, 2008 It did that even without the clear property. It is the block property that inserts newlines on each the images.This is what I want to achieve. It seems to work in all browsers. But I have to position each line manually: <div class="row" style="top: 0px">...</div><div class="row" style="top:18px">...</div><div class="row" style="top:36px">...</div> etc.A bit tedious to edit, but it works. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2008 Share Posted January 25, 2008 Oh, that's right. You can solve the problem by adding a float attribute to the images.img {display: block;float: left;} Link to comment Share on other sites More sharing options...
mindcooler Posted January 25, 2008 Author Share Posted January 25, 2008 Well, I got a funky staircase.The images are positioned directly under the text now, does not care about the other images. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2008 Share Posted January 25, 2008 I think adding another property should solve the problem:img {display: block;float: left;clear: right;} Link to comment Share on other sites More sharing options...
mindcooler Posted January 25, 2008 Author Share Posted January 25, 2008 No effect.The finished page, with positioning. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2008 Share Posted January 25, 2008 I'm sorry about that, I usually have to go testing through a lot of CSS properties to end up making things well.Hmm, I don't really know how to solve it. I'll keep looking.EDITI find thatimg {vertical-align: middle;}solves the problem for me in Firefox and Internet Explorer. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.