Solved

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

Posted on 2006-06-16
11
648 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 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