Beginner needs help on image & caption layout

badger · #1 (**permalink**) Jun 21st, 2007, 00:50

I have a page that has a series of images (with captions under) and descriptive text under the image.(one image per line)

Generally there is one image (page center) with caption under it and then explanitory text of about 6 lines which take up about ¾ of the page (screen) width, with line seperator under.

This is repeated many times down the page.

Sometimes there are two or three images along side each other.

Can I do this with div's and then copy and paste the div box down the page once i get it correct ?

Any help with the CSS layout would be appreciated.
I amtrying to switch from html to css...It's cool.
TIA.

Lchad · #2 (**permalink**) Jun 21st, 2007, 01:21

Ok I put a little demo for you to play with. This should really get you off to a great start.

If you have questions, let me know!

CSS is this

Code: Select all

body {
    margin: 0;
    padding: 0;
    background: #FFFFCC;
    }
html {
    }    
#wrapper {
    width: 780px;
    margin: 0 auto;
    }
.image {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    text-align: center;
    }    
.imagebig {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    }    
.description {
    width: 75%;
    text-align: center;
    margin: 0 auto;
    }    
.placeholder {
    margin: 5px;
    }
        
p {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #FF00FF;
    margin-bottom: 20px;
    }

The html would be this:

Code: Select all

<body>

<div id="wrapper">
        
          <div class="image">
             <img name="Placeholder" src="" width="400" height="400" alt="This is just a placeholder...place your image here" style="background-color: #000000" />
             <p>This is a black box!</p></div>
          
          <div class="description"><p>The black box is 400 x 400 and is black in color! Not too exciting but you get the point right?</p> </div>
         <hr />

          <div class="imagebig"><img src="" alt="" width="150" height="150" class="placeholder" style="background-color: #FF0000" /><img src="" alt="" width="150" height="150" class="placeholder" style="background-color: #006633" /><img src="" alt="" width="150" height="150" class="placeholder" />
          <p>Here are your three images side by side</p></div>
         
          <div class="description">
          <p>You put borders around those boxes by adding more stying to the placeholder css.  You can have so much fun.</p>
          </div>     

     </div>
</body>
</html>

You can obviously play with all dimensions to suit your design needs.

badger · #3 (**permalink**) Jun 21st, 2007, 04:25

Thanks Chad for takeing the time to do the example, It is a Big help. Just seeing your layout
cleared up a heap of questions.

Lchad · #4 (**permalink**) Jun 21st, 2007, 11:32

Good I'm glad it helped you!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Beginner in CSS help need with layout	dcjetski	Web Page Design	13	May 21st, 2008 12:26
image layout problem	Inkzolt	Web Page Design	1	May 3rd, 2008 18:14
Image and text caption problem	George	Web Page Design	8	Feb 27th, 2008 18:14
new to css- how to strech the whole layout when a very wide image is loaded.	sanchopansa	Web Page Design	8	Jul 22nd, 2006 09:11
The Most Versatile Layout (beginner)	TheLove	Web Page Design	2	Mar 24th, 2006 02:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Beginner needs help on image & caption layout