[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 671
  • Last Modified:

Make a grid-like table structure using divs. Trouble with align.

Make a grid-like table structure using divs/css.  

---------------------------------------------------------------------------
|         img 1             |           img 2            |          img 3         |
---------------------------------------------------------------------------
|                              |           img 4            |                           |
---------------------------------------------------------------------------

I also have 4 divs that contain drop down boxes (<select>) which need to use relative or absolute positioning to show on top of the lower 1/2 of the images.

Each image should be centered and line up with the other images.

For the life of me, this seems so difficult.  Also if you can show how to do this with a surrounding border and without, that be great.
0
leos_
Asked:
leos_
  • 4
  • 4
  • 2
  • +1
1 Solution
 
jagadeesh_motamarriCommented:
Hi loes_,

Checkout his link in the meanwhile - http://developer.yahoo.com/yui/grids/#available-templates

____Jags.
0
 
leos_Author Commented:
thanks - I'll give it a read over the weekend.
0
 
mreuringCommented:
I'm sorry, but that yahoo page reminds me violently of this article: http://www.rikkertkoppes.com/thoughts/smurf-language/

There have to be better ways to solve this, however, I have to know the strictures within which the solution should be implemented. So, first I have a few questions:
- Are the images fixed size?
- Are all the images of equal size?
- Are img1 and img3 of equal size?
- Is the size of img1 predictable?

If any of the above is true it should be quite possible to do this without much of a problem. Oh, and one last question:
- Do the images express tabular information? Ifso, you should use a table after all ;)
I just had to ask :)

Well, catchya later!

  Martin
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
bpmurrayCommented:
Something like this?

<html>
   <head>
<style type="text/css">

.imagebox {
   width: 150px;
      height: 120px;
   border-width: 1px;
   border-bottom-width: 3px;
   border-right-width: 3px;
   border-style: solid;
   border-color: ButtonShadow;
   text-align: center;
   vertical-align: middle;
      float:left;
      clear:right;
}

.breakimagebox {
   width: 150px;
      height: 120px;
   border-width: 1px;
   border-bottom-width: 3px;
   border-right-width: 3px;
   border-style: solid;
   border-color: ButtonShadow;
   text-align: center;
   vertical-align: middle;
   position:absolute;
   top: 120px;
   left: 150px;
}


.containerclass {
   width: 60%;
   text-align: center;
   position: relative;
}

.imgclass {
   width: 150px;
      height: 120px;
}

.selectclass {
   position: relative;
      top: -32px;
}

</style>
<script type="text/javascript">


</script>
</head>
<body>
   <form action="http://site.com/page.html" method="post">
      <div class="containerclass">
         <div class="imagebox">
            <img src="foo.jpg" class="imgclass" />
                        <div class="selectclass">
                        <select>
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
            </div>
         </div>
         <div class="imagebox">
            <img src="foo.jpg" class="imgclass" />
                        <div class="selectclass">
                        <select>
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
            </div>
         </div>
         <div class="imagebox">
            <img src="foo.jpg" class="imgclass" />
                        <div class="selectclass">
                        <select>
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
            </div>
         </div>
         <div class="breakimagebox">
            <img src="foo.jpg" class="imgclass" />
                        <div class="selectclass">
                        <select>
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
            </div>
         </div>
      </div>
   </form>
</body>

</html>
0
 
leos_Author Commented:
mreuring,

Yes, in my case the images are all the same size(246x119). Some consistent spacing will likely be need between the pics.  In some cases (other pages with same layout) the "cells" with images will change.  No, it's not data it's just a fancy nav thing.

bpmurray,

I'll give it a try.
0
 
mreuringCommented:
Here's a quick example that'll get you the grib you wanted, under the assumption of all images being 246 wide and you want only 3 on the same line and the next line centered:

<!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" xml:lang="en" lang="en">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <title>grid</title>
      
      <style type="text/css">
            ul.grid {
                  display: block;
                  list-style: none;
                  width: 750px;
                  margin: 0;
                  padding: 0;
                  text-align: center;
                  line-height: 0;
            }
            ul.grid li {
                  display: inline;
            }
            ul.grid img {
                  border: none;
                  margin: 2px;
            }
      </style>
      
</head>

<body>
<ul class="grid"><li><a href="#1"><img src="Q_21761390_files/bg1.png" width="246" height="119" /></a></li><li><a href="#1"><img src="Q_21761390_files/bg1.png" width="246" height="119" /></a></li><li><a href="#1"><img src="Q_21761390_files/bg1.png" width="246" height="119" /></a></li><li><a href="#1"><img src="Q_21761390_files/bg1.png" width="246" height="119" /></a></li></ul>
</body>
</html>
0
 
mreuringCommented:
I just re-read you question and realise that I had completely forgotten about the selects, let me get to that part :)
0
 
mreuringCommented:
Right, I added a border to the container and put the selects on the bottom of the images:
      <style type="text/css">
            ul.grid {
                  display: block;
                  list-style: none;
                  width: 750px;
                  margin: 0;
                  padding: 0;
                  text-align: center;
                  line-height: 0;
                  border: 1px solid silver;
            }
            ul.grid li {
                  display: inline;
                  position: relative;
            }
            ul.grid img {
                  border: none;
                  margin: 2px;
            }
            ul.grid select {
                  width: 246px;
                  position: absolute;
                  bottom: 2px;
                  left: 2px;
            }
      </style>

<ul class="grid"><li><img src="Q_21761390_files/bg1.png" width="246" height="119" /><select><option>dodo</option></selection></li><li><img src="Q_21761390_files/bg1.png" width="246" height="119" /><select><option>dodo</option></selection></li><li><img src="Q_21761390_files/bg1.png" width="246" height="119" /><select><option>dodo</option></selection></li><li><img src="Q_21761390_files/bg1.png" width="246" height="119" /><select><option>dodo</option></selection></li></ul>

There's two things I would like to mention about this solution. First, there should be no white-space within the elements except for white-space that is part of the text. Because of the display: inline on the list-items any white-space would be rendered and results in some space in-between the images, space which cannot be accessed by use of css properties.
Second, the bottom: 2px and left:2px of the selects reflects the margin of the images, just a heads-up, if you change the margin, change these values too.

Hope this helps, and let me know if I need to clarify something,

 Martin
0
 
leos_Author Commented:
bpmurray,

That's very close to what I need - though it needs to work in IE 6. (second row doesn't show)

Also ideally (i'm working on adding it) the pics need to be equally spaced apart and centered on the page.
0
 
leos_Author Commented:
mreuring,

Your solution is intriguing, though I'd prefer not to have to code everything on one line.  Thanks for pointing that out though - nothing more frusterating than code that doesn't work.
0
 
bpmurrayCommented:
Yes, you're right about IE - I had forgotten about its casual disregard of the box model. This should do the trick:
<html>
   <head>
<style type="text/css">
.imagebox {
   width: 150px;
   height: 120px;
   border-width: 1px 3px 3px 1px;
   border-style: solid;
   border-color: ButtonShadow;
   padding: 0px;
   margin: 0px;
   text-align: center;
   vertical-align: middle;
   float:left;
   clear:right;
   display: block;
   position: relative;
}

.breakimagebox {
   width: 150px;
   height: 120px;
   border-width: 1px 3px 3px 1px;
   border-style: solid;
   border-color: ButtonShadow;
   margin: 0px;
   text-align: center;
   vertical-align: middle;
   position:absolute;
   left: 154px;
   top: 124px;
   display: block;
}


.containerclass {
   width: 60%;
   text-align: center;
   position: relative;
}

.imgclass {
   width: 150px;
   height: 120px;
}

.selectclass {
   position: absolute;
   top: 80px;
   left: 16px;
}


</style>
<script type="text/javascript">


</script>
</head>
<body>
   <form action="http://site.com/page.html" method="post">
      <div class="containerclass">
         <div class="imagebox">
            <img src="foo.jpg" class="imgclass" />
            <select class="selectclass">
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
         </div>
         <div class="imagebox">
            <img src="foo.jpg" class="imgclass" />
            <select class="selectclass">
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
         </div>
         <div class="imagebox">
            <img src="foo.jpg" class="imgclass" />
            <select class="selectclass">
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
         </div>
         <div class="breakimagebox">
            <img src="foo.jpg" class="imgclass" />
            <select class="selectclass">
               <option>aaaaaaaaa</option>
               <option>bbbbbbbbb</option>
               <option>ccc</option>
               <option>dddddd</option>
               <option>eeeeeeee</option>
               <option>ffff</option>
               <option>ggggg</option>
            </select>
         </div>
      </div>
   </form>
</body>

</html>

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now