Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2006-06-16
11
Medium Priority
?
669 Views
Last Modified: 2008-02-01
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
Comment
Question by:leos_
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16923723
Hi loes_,

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

____Jags.
0
 
LVL 3

Author Comment

by:leos_
ID: 16923916
thanks - I'll give it a read over the weekend.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 16929572
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:bpmurray
ID: 16930709
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
 
LVL 3

Author Comment

by:leos_
ID: 16934675
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
 
LVL 17

Expert Comment

by:mreuring
ID: 16934960
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
 
LVL 17

Expert Comment

by:mreuring
ID: 16934985
I just re-read you question and realise that I had completely forgotten about the selects, let me get to that part :)
0
 
LVL 17

Expert Comment

by:mreuring
ID: 16935029
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
 
LVL 3

Author Comment

by:leos_
ID: 16941724
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
 
LVL 3

Author Comment

by:leos_
ID: 16941740
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
 
LVL 15

Accepted Solution

by:
bpmurray earned 1300 total points
ID: 16942192
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question