Div / CSS / positioning - Newbie Help Please

This is a discussion on "Div / CSS / positioning - Newbie Help Please" within the Starting Out section. This forum, and the thread "Div / CSS / positioning - Newbie Help Please are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Starting Out

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old Mar 26th, 2007, 20:26
New Member
Join Date: Mar 2007
Location: Ipswich, Suffolk, UK
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Question Div / CSS / positioning - Newbie Help Please

Hi,

I'm playing araound with DIVs and positioning for the first time trying to get a design that works using tables to work using DIVs.

The basic idea is for the webpage to look like an 'old' open book on a wooden desk.

I can't seem to get my main_body block to work. This is the block that will have my navigation menu & main body content ( both of which will have differing heights depending on which page is being displayed. ). Also the left and right sides of this block will have repeating background images ( to create the 'spine' & right edge of the book ).

My attempt can be seen at http://tez.bpweb.net/temp/temp.htm

The CSS is http://tez.bpweb.net/temp/temp.css

Any advice / suggestions for a design newbie gratefully received.

Cheers

Tez
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Mar 26th, 2007, 23:38
BGarner's Avatar
Reputable Member
Join Date: Oct 2006
Location: In front of the computer.
Posts: 213
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Div / CSS / positioning - Newbie Help Please

What is this?

Quote:
<div id="fl">
</div>
<div id="fm">
</div>
<div id="fr">
</div>
It would be fairly easy to accomplish. First set your body background to the wood/desk image. Now create a div that most designers refer to as a wrapper. This will have your book background. Now when you position other divs, they will be in relation to the wrapper which encompasses the entire content.

Here's an example....

Code: Select all
* {
  margin: 0;  /*These fix browser display issues*/ 
  padding: 0;
}

body {
  background: url(../url of your background);
  /*Other coding as needed*/
}

div#wrapper {
  background: url(../url of book bg) repeat-y;
  margin: 0 auto;  /*centers the wrapper*/
  width: 750px;  /*The width of your bg image*/
  /*other coding as needed*/
}
...and then in XHTML...

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">

<head>
  <title>Test Site - Home</title>
  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
  <link href="temp.css" rel="stylesheet" type="text/css" />
</head>

<body>

   <div id="wrapper">
     Code goes here...
   </div>

</body>

</html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css, div, positioning

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Positioning between <h3> konnor5092 Web Page Design 3 Sep 11th, 2007 22:37
A Better Way of Positioning ChrisTheSoul Web Page Design 10 Jul 27th, 2007 14:33
positioning alexgeek Web Page Design 18 Jul 13th, 2007 17:55
positioning with CSS Craigj1303 Web Page Design 8 Apr 24th, 2007 15:03
CSS and positioning djme Web Page Design 6 Feb 3rd, 2006 13:27


All times are GMT. The time now is 01:41.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42