Solved

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

Posted on 2006-06-16
11
652 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_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 325 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

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!

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

733 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