css #wrapper help needed

#1

I am trying to create a centred 3 column layout with the following CSS (gleaned
from the Zen Garden book) but cannot figure out if and how (& why I need to) to
put all content into the wrapper div in order for everything to centre. I am
using absolute positioning and fixed widths to make life easier for me for the
moment but still nothing centres on the page. Evrything seems simple enough on
paper but the actuality of writing / editing the code is leaving me cold!!
Also, from an expert point of view would you recommend writing content first
and then writing the accompanying CSS or vice versa?

The CSS is as follows:-
body {
text-align:center;
}
#wrapper {
width: 750px;
margin: 0 auto;
text-align:left;
position: relative;
}
#contentArea {
width: 50%;
position:absolute;
top: 115px;
left: 150px;
background-color: #d9d9c3;
padding: 5px;
}
#leftPanel {
width: 150px;
position: absolute;
top: 115px;
left: 0px;
background-color: #cccc99;
height: 486px;
}
#rightPanel {
width:150px;
position: absolute;
top: 115px;
left: 600px;
background-color: #ffffee;
height: 486px;
}

and the html as follows:-

</head><body id="wrapper">

<div id="banner">
<div align="center"><img src="/Mirota-banner.gif"></div>
</div>
<div id="contentArea">
As a mother, a wife to a self-employed tradesman and as a businesswoman , I
know the importance of value for money. Small businesses from Florists blah
blah blah (i really should get the lorem ipsum extension set up!!)
</div>
<div id="leftPanel">Link Link Link Link Link</div>
<div id="rightPanel">This is the link I would like to know whether or not this
works </div>
</body>
</html>

I am trying to move over to designing with web standards but am really new to
the game so if anyone can help by pointing me clearly in the right direction
that would be great. Thanks. Emma

#2

The 'wrapper' is not applied to the <body> tag as you have it in your
code it is an individual <div> which envelopes around the other <divs>,
as below.

<body>
<div id="wrapper">
<div id="banner"><div align="center"><img
src="/Mirota-banner.gif"></div></div>
<div id="contentArea">
As a mother, a wife to a self-employed tradesman and as a
businesswoman , I
know the importance of value for money. Small businesses from Florists blah
blah blah (i really should get the lorem ipsum extension set up!!)
</div>
<div id="leftPanel">Link Link Link Link Link</div>
<div id="rightPanel">This is the link I would like to know whether or
not this works </div>
</div>
</body>

Quote:

Also, from an expert point of view would you recommend writing content first
and then writing the accompanying CSS or vice versa?

I tend to write the <div> stucture in the code first and then style them
with the css.

You'll find your own way of working when you get more confident.

Using absolutely positioned <divs> is not really what you want to learn.
They have restricted uses as you will no doubt find out soon enough.

#3

try taking the id=wrapper from the body and instead put that id onto a div
right after the body tag.

you cant really give the body a width as the body is the content window of the
browser and that can be a variety of widths. Also, if you want to give style to
the body you can just put in a body class into your css.

#4

Quote:

you cant really give the body a width

Sure you can. Try this -

body { width:760px; margin:25px auto; }

and see what happens to your content....

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"SterlingDK" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

try taking the id=wrapper from the body and instead put that id onto a div
right after the body tag.

you cant really give the body a width as the body is the content window of
the
browser and that can be a variety of widths. Also, if you want to give
style to
the body you can just put in a body class into your css.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

css #wrapper help needed

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

css #wrapper help needed - 11-03-2005 , 08:27 AM

Re: css #wrapper help needed - 11-03-2005 , 09:11 AM

Re: css #wrapper help needed - 11-03-2005 , 09:13 AM

Re: css #wrapper help needed - 11-03-2005 , 09:58 AM