PDA

View Full Version : Resolved Getting divs with images to sit flush.



Kristofa
Aug 17th, 2009, 06:17 PM
This is starting to intensely annoy me, it shouldn't be so hard, but i don't know what's going wrong.

http://flow-design.org/houseplanner.html

The grey squares are the issue (/img/blank.png). What I'm trying to create, is an 8x4 grid. The container is 600px, and the images in the divs (the grey squares) are 75px each, so if the images all sit exactly side by side, this should be possible, except there is some padding appearing between each div/image, and I have no idea where from. Can anyone help me out there?

Also, originally I had blank.png as a background image, which is ideally how I want it, except obviously as the divs were empty, they collapsed to the size of the content. Is there anyway to force the divs to display the entire background image, or am I better just to overlay what I want to overlay over a normal image, using z-index's?

Help much appreciated, the html/css was meant to be the easy bit of this project :rolleyes:

Afterthought: I'm aware that I only have 8 images in there at the moment, as I said I was originally trying to use background images, so I know I will need to add the rest of the images in. ;) (Unless someone knows how I can use background images to do what I want)

Thanks!:D

noneforit
Aug 17th, 2009, 06:28 PM
Remove the parts in Red below gets rid of the spacing between each box for me for me


.grid {
width:75px;
height:75px;
background-image:URL('/img/blank.png');
display:inline;
}

Am thinking that it would be better to create a container or 600px width, make the image a background image and repeat it.....you are using a boat load of divs at the moment

Fisher
Aug 17th, 2009, 08:04 PM
If you only want a background grid, do as Laurie says.

Your current markup suggests that these will be different pics or anchors though. Why else the mouseover functions. You can do this with a list.

Here's an example showing both ways.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#grid {
width:600px;
height:300px;
background:url(http://flow-design.org/img/blank.png);
}
#thumbs {
width:600px;
height:300px;
}
#thumbs ul {
display:inline;
list-style-type:none;
}
#thumbs ul li {
width:75px;
height:75px;
float:left;
display:inline;
}
#thumbs ul li img {
border:none;
display:block;
}
.spacer {
height:20px;
}
</style>
</head>
<body>
<div id="grid"></div>
<div class="spacer"></div>
<div id="thumbs">
<ul>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
<li><img src="http://flow-design.org/img/blank.png" alt="" /></li>
</ul>
</div>
</body>
</html>

Kristofa
Aug 18th, 2009, 01:13 AM
Yeah, I need them all independent, as they're going to be altered with Javascript. Thanks to both of you, and Fisher, that works brilliantly, thanks! :-)