Solved

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

Posted on 2006-06-16
11
644 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

895 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now