How do I position a div thingy?

jonnymorris · #1 (**permalink**) Jul 6th, 2007, 14:20

Hi again

OK, been banging my head against a brick wall for a few days on this one. I just can't grasp all this positioning stuff - I understood tables positioning, that was relatively simple, but I just don't know what the equivalents are in CSS and seem totally unable to find out. I've looked at several help sites and none of their CSS code is commented, meaning I just don't have a clue what bit does what!

Right well after my little sulk I suppose I should tell you what I'm looking to do. I'd like a simple heading, probably with some subtle background image, I think I can manage that much. Then I would like a large image in the centre with a column of thumbnails down the right side. I was thinking some javascript to replace the large image when a thumbnail is clicked. I just don't seem to be able to find any CSS that makes my image sit where I want it, it just ends up on the end of my heading.

http://www.jonathanmortimer.co.uk/test4/
http://www.jonathanmortimer.co.uk/te...s/standard.css

I've borrowed heavily from zen garden examples, perhaps that was too much too soon? Looking at the page, I kept the menu on the right as a place holder for my thumbnail images (not images of thumbnails, but you know

).

Thank you for all and any help on this for an easily confused <div>!

Lchad · #2 (**permalink**) Jul 6th, 2007, 14:59

I put a little sample together for you to get you started.
This is a container with a header and two columns.
I didn't put all your css in but I think you'll get the idea when you see what I did.
Hopefully this will clear some of the confusion.
css

Code: Select all

#container {
    width: 780px;
    margin: 0 auto;
    }
#header {
    width:780px;
    background: url(image.jpg);
    height: 50px;
    }
#leftarea {
    width: 550px;
    float: left;
    }    
#rightarea {
    width: 210px;
    float: left;
    padding: 10px;
    }    
.imagecontainer {
    width: 450px;
    margin: 0 auto;<!--this centers -->
    }

HTML

Code: Select all

<body>
<div id="container">
 <div id="header"></div>
 <div id="leftarea">
   <p>Large photo goes here</p>
      <div class=imagecontainer>
        <img name="image" src="" width="450" height="450" alt="" style="background-color: #FF0000" />
      <p>Image description goes here</p>
      </div>
 </div>
 <div id="rightarea">Thumbnails go here
         <h3 class="select"><span>Select a Design:</span></h3>
                <!-- list of links begins here. There will be no more than 8 links per page -->
                <ul>
                    <li><a href="?cssfile=/insects/insects.css&amp;page=0" title="AccessKey: a" accesskey="a">Insects</a>&nbsp;</li>

                    <li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                    <li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                    <li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

                    <li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                    <li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                    <li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>

                    <li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                </ul>
                <h3 class="archives"><span>Archives:</span></h3>
                <ul>

                    <li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a>&nbsp;</li>
                    <li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">&laquo; <span class="accesskey">p</span>revious designs</a></li>
                    <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
                </ul>

 </div>
</div><!--end container div -->
</body>

jonnymorris · #3 (**permalink**) Jul 6th, 2007, 19:01

Thank you very much! I'm still unsure of what it all means but it's something I can play with

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to buy a website and domain thingy	Stormraven	Hosting & Domains	12	Oct 16th, 2007 18:51
Rollover thingy-ma-jiggy!	Acoustics4me	Starting Out	19	Apr 28th, 2007 21:20
Header logo thingy...	Dapandyman	Graphics and 3D	22	Jan 23rd, 2007 18:21
Image ban thingy	adamas85	JavaScript Forum	1	Jun 8th, 2006 15:14

		Webforumz.com > Main Forums > Design Your Website > Starting Out
How do I position a div thingy?