19 replies [Last post]
JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Ref topic: http://www.csscreator.com/node/20471
Ref problem page: http://chimneyhilltownhomes.com/index_css.html
(webmaster links and info should be below the content and the content should have 20px of padding at the bottom of the main container)
Ref css: http://chimneyhilltownhomes.com/chth_css.html

Sorry, don't mean to be lazy, but I have read and tried MANY recommendations on this and spent MANY hours, but nothing seems to address my specific goal. I can get close, but no cigar.

In a nutshell:

I have a container with a full width header. Under the header are three vertical "columns" (divs) side by side.
Across the bottom is a simple credit and link that I want centered under the container with some padding or margin above it.

I want the borders, padding and margins as shown, except I can't get padding at the bottom of the main container.

Actually, I would prefer that the content (everything inside the main container) be only as deep as necessary and the three side-by-side "columns" be the same height always, and still maintain the spaces and borders around them.

Any recommendations? I am really trying to get away from tables design, but this is difficult for me. A table would be SOOOOOO much easier here, for me.

Thanks.
Jack

Jack A

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Do you really NEED 100%

Hi

Do you really NEED 100% height? Or do you simply want all columns the same length?

For example, do you want the left and right columns colored #738C74 to be as high as each other and reach down to the footer?

Do you truly want the blue line between the ehader and main body?

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

ClevaTreva wrote:Hi Do you

ClevaTreva wrote:
Hi

Do you really NEED 100% height? Or do you simply want all columns the same length?

Yes

Quote:

For example, do you want the left and right columns colored #738C74 to be as high as each other and reach down to the footer?

Yes

Quote:

Do you truly want the blue line between the ehader and main body?

Actually, no, but I don't see it. Is it a div border or something else?

Thanks

Jack A

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

JackyBoy wrote:

JackyBoy wrote:

Quote:
Do you really NEED 100% height? Or do you simply want all columns the same length?

Yes

My answer to the above part of your reply was poor. I just want them the same height down to the footer. The height will vary by the content of the center and right columns usually.

Thanks

/quotes fixed

Jack A

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

JackyBoy Ah, so you don't

JackyBoy

Ah, so you don't need 100% height, just equal columns. Easy peasy. I've been working on a really slim code version where 100% height is not required (by 100% height I mean if content is not sufficient to make it so, the columns will still fill the page, but you don't need that).

I'll post again with some basic code, and then we can learn how to modify it.

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi (again) Try this

Hi (again)

Try this code:

html:

Townhomes Dallas Texas - Chimneyhill Townhomes - Dallas, Texas
@import url("style.css");

This is the
Main Content

This is the Left Sidebar

css:

/*** Style for 3 Column Fixed Width Variable Height Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#BAAF5E; /*** Background colour of page ***/ min-width:772px; /*** Content Width ***/ text-align:center; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ margin-left:auto; margin-right:auto; text-align:left; position:relative; width:772px; /*** Content Width ***/ display:table; margin-bottom:-106px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background:#738C74 url(side-l.gif) left top repeat-y; /*** Background colour of left AND right columns. Also has the left hand side shady border image ***/ } #wrapper{ display:table-cell; position:relative; border-left:24px transparent solid; /*** Moves the content over to reveal the shady border (same width as that). NOT used by IE ***/ background:url(side-r.gif) right top repeat-y; /*** Background colour of left AND right columns. Also has the right hand side shady border image ***/ } * html #wrapper{ /*** for IE to reveal the content over to reveal the shady border (same width as that). ***/ border:none; margin-left:24px; } #outer{ position:relative; margin-left:128px; /*** Left Column Width ***/ width:468px; /*** Center Column Width (takes into account left and right shady border widths) ***/ background:#E3DFB6 url(mid-l.gif) left top repeat-y; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:468px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:left; display:inline; background:url(mid-r.gif) right top repeat-y; } #center{ width:468px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:right; } #left{ float:left; display:inline; width:128px; /*** Left Column Width ***/ margin-left:-128px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:128px; /*** Right Column Width ***/ margin-right:-128px; /*** NEGATIVE Right Column Width ***/ position:relative; } #clearheadercenter{ height:198px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderleft{ height:198px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderright{ height:198px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearfootercenter{ height:126px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterleft{ height:44px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterright{ height:44px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #footer{ z-index:1; position:relative; width:100%; height:0px; } #footer-inner{ width:772px; /*** Content Width ***/ margin-left:auto; margin-right:auto; height:0px; } #subfooter1{ margin:0px 174px -2px; background:#E3DFB6; text-align:center; height:64px; overflow:hidden; } #rightcolbottom,#leftcolbottom{ margin:0px 618px 0px 22px; background:#D9D9AE; height:2px; overflow:hidden; } #leftcolbottom{margin:0px 22px -2px 618px} .topbottommargin{ margin:0px; background:#BAAF5E; height:20px; overflow:hidden; } #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; height:0px; } #header-inner{ width:772px; /*** Content Width ***/ margin-left:auto; margin-right:auto; height:0px; } #banner{ margin:0px 22px 0px 174px; background:#FFFDC0 url(chimneyhilldallas_2.jpg) 2px 2px no-repeat; height:136px; overflow:hidden; } #logo{ margin:-136px 618px 0px 22px; background:#FFFDC0 url(chimneyhilldallas_logo.png) 2px 2px no-repeat; height:136px; overflow:hidden; } #headerfootergap{ margin:0px 22px; background:#C7824F; height:20px; overflow:hidden; } #container-left{ border-top:2px solid #D9D9AE; } #container-right{ border-top:2px solid #D9D9AE; } #container-center{ margin:0px 24px; } #borderbottom,#bordertop{ margin:0px 2px; height:22px; overflow:hidden; background:url(bottom.gif) left top repeat-x; } #bordertop{background:url(top.gif) left top repeat-x} #subfooter1 p{ font-size:65%; line-height:21px; vertical-align:bottom; } a:link, a:visited, a:focus, a:hover, a:active { color:#C7824F; text-decoration:none; }

You'll need a couple of graphics too (see attachments)

CT

AttachmentSize
bottom.gif 44 bytes
mid-l.gif 56 bytes
mid-r.gif 56 bytes
side-l.gif 56 bytes
side-r.gif 56 bytes
top.gif 44 bytes
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Treva, that's hardly

Treva, that's hardly slim.











That's slim. For positively anorexic, do away with the #page.

For details on graphics required see the Faux Column article at A List Apart.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Chris..S wrote:Treva, that's

Chris..S wrote:
Treva, that's hardly slim.

Hi Chris.

Bout as slim as me Smile

Once I started looking carefully at what the OP wanted, it was obvious the quicky version (like your code) would likely not do it. Unless you put a faux image right across the page (as you suggest).

And then the problem of the boxes around the header bits but avoiding the IE5 broken box model.

If you take out all the bits that are just doing the borders and box tops and bottoms etc, and the head bit, the code significantly reduces.

And then the footer needed to be in the middle column, but pushed down by the outer columns if needed.

The more I looked at it, the more I could see the quickie version needing to be modded. Getting the top and bottom borders to the side columns would still require some coding around. It would ahve been too much effort. This way was easy for me to code, coz it was a re-workig of one I did before.

I would be interested to see how much less code one could use your way, so I might give it a go.

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well.

Well.

I played around with your idea Chris. Couldn't get the footer to work properly in Opera at first, but here's a revision:

html:

Townhomes Dallas Texas - Chimneyhill Townhomes - Dallas, Texas
@import url("quickie-style.css");

This is the
Main Content

This is the Left Sidebar

Website design and maintenance by
Andrews & Associates

Email: [email protected]

css:

/*** Style for 3 Column Fixed Width Variable Height Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#BAAF5E; /*** Background colour of page ***/ min-width:774px; /*** Content Width ***/ text-align:center; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ margin-left:auto; margin-right:auto; text-align:left; position:relative; width:772px; /*** Content Width ***/ background:url(faux.gif) center top repeat-y; } .topbottommargin{ margin:0px; background:#BAAF5E; height:20px; overflow:hidden; } #borderbottom,#bordertop{ margin:0px 2px; height:22px; overflow:hidden; background:url(bottom.gif) left top repeat-x; } #bordertop{background:url(top.gif) left top repeat-x} #banner{ margin:0px 22px 0px 174px; background:#FFFDC0 url(chimneyhilldallas_2.jpg) 2px 2px no-repeat; height:136px; overflow:hidden; } #logo{ margin:-136px 618px 0px 22px; background:#FFFDC0 url(chimneyhilldallas_logo.png) 2px 2px no-repeat; height:136px; overflow:hidden; } #headerfootergap{ margin:0px 22px; background:#C7824F; height:20px; overflow:hidden; } #outer{ position:relative; margin-left:176px; /*** Left Column Width ***/ width:420px; /*** Center Column Width (takes into account left and right shady border widths) ***/ } #float-wrap{ width:420px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:left; display:inline; } #center{ width:420px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:right; } #left{ float:left; display:inline; width:176px; /*** Left Column Width ***/ margin-left:-176px; /*** NEGATIVE Left Column Width ***/ position:relative; margin-bottom:-82px; display:table; } #right{ float:left; display:inline; width:176px; /*** Right Column Width ***/ margin-right:-176px; /*** NEGATIVE Right Column Width ***/ position:relative; margin-bottom:-82px; display:table; } #subfooter1{ margin:20px 174px -2px; background:#E3DFB6; text-align:center; height:64px; overflow:hidden; } #rightcolbottom,#leftcolbottom{ margin:0px 618px 0px 22px; background:#D9D9AE; height:2px; overflow:hidden; } #leftcolbottom{margin:0px 22px -2px 618px} #subfooter1 p{ font-size:65%; line-height:1.3em; vertical-align:bottom; } a:link, a:visited, a:focus, a:hover, a:active { color:#C7824F; text-decoration:none; } #container-left{ border-top:2px solid #D9D9AE; margin:0px 24px; } #container-right{ border-top:2px solid #D9D9AE; margin:0px 24px; } #container-center{}

One extra image needed (some of the earlier ones NOT needed, scan the code to check).

The html/css is just over 2k smaller in size. (approx 25%). Images are roughly the same in total.

What I haven't figured is if I can remove the outer and float-wrap divs. Each time I tried it fell apart.

They are there to make sure the footer goes down regardless of which one is longer.

Anyway Chris. Good idea. My brain needed that kick and it has solved a problem I have been playing with for some time.

The solution is good only for a fixed width design. My earlier idea will work with a variable width design (ie 100% browser width, with or without side padding/margins) without the hassle that causes faux columns, but I suspect having done this fixed version I could do one that is flexible using the same/similar methods.

CT

AttachmentSize
faux.gif 220 bytes
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I did check that the OP's

I did check that the OP's layout was fixed width Wink

I would normally use something pretty similar to the html I showed. Put any IE5 modifications into an IE5 only style sheet. Three full width elements are required for a fixed width multi-column layout, #footer can include the base of the columns, #wrap the top of the columns and #main the repeating graphic for the rest.

Personally, I am not a fan of full width 3 column layouts. Many two column layouts will work with that markup.

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Thanks, but --- sorry --- Chris

I apologize, Chris, I just tuned back in here and have not looked at the code CT recommended, but CT's comprehensive solution is the only one that's clear to me at this point. I like the idea of "skinny" but I'm pretty new at this and having difficulty clearly understanding your suggestions. If in fact his won't do it, can you be a little more specific?

When you say "three full width elements" do you mean the three columnal divs?

Maybe I just need to look over CT's code and compare your suggestions?

Thanks to both of you for the time you've spent on this. You must be independently wealthy :o].

Jack

Jack A

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Results so far using last code above---

Here is what's happening so far, using the last code above. Just created a new page, adjusted the path for the images and dropped the css into the head for now:

Newest test page: http://chimneyhilltownhomes.com/index_csscreator.html

My OP page: http://chimneyhilltownhomes.com/index_css.html

Something --- many things --- are amiss and I'm not sure where to start to fix it.

Have not tried CT's original "heavier" code yet.

Jack A

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The new page calls an image

The new page calls an image called faux.gif (attached to my post above) but you haven't put it on your server.

Your images are in a directory called images, but you have only changed the css for the logo to point at this, not the faux.gif in pagecontainer or the banner. I checked your images directory, and the banner image is there, so just chnage the css.

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Wow! That IS pretty cleva Treva ----

Sorry, had overlooked the images. But, man, this is so far ahead of me --- I could never have figured that out. I don't even know what some of the classes and properties are that you set!

Like fonts in % means % of what?
"separate" does what?

Why are "ems" or % preferred?

Why are the images needed (this can't be done with just containers and colors?)

What makes this css solution better/faster than a table, which would have taken me 1/16 the time I spent trying to figure this out? Will it load faster and be more stable?

Do I assume I can add padding to the green left/right columns?

Will the depth of all three columns stay the same?

You appear to have created the "fullheightcontainer" that reaches all the way to the right side of the window, but does not have full height. What is the purpose of that?

Actually, I wanted my contact info to position centered below all the content and outside the bottom border on the background of the page. How would I do that?

Sorry for so many questions, but if you can answer the last one, I'll try to figure out the rest somehow.

Thanks a bunch. I have A LOT to learn. Not sure where to go from here to learn CSS best practices. Advice welcome.

Jack A

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

JackyBoy wrote:Like fonts in

JackyBoy wrote:
Like fonts in % means % of what?

Curiously, each browser renders font-sizes differently. They all have a default, and the body font-size references that. Setting 100.1% kicks them all into roughly the same size (IE is really bad at math, and can't get it right with 100%!, Opera has problem if it is unde 100% or over 101%).

Quote:
"separate" does what?

Read this:

http://www.w3schools.com/css/pr_tab_border-collapse.asp

Quote:
Why are "ems" or % preferred?

Fonts should be resizable by the user. Using px may lock it in IE, but not other browsers. This is to aid access for those with accessibility/vision problems. This is often law in most countries.

Quote:
Why are the images needed (this can't be done with just containers and colors?)

Complex use of borders makes life difficult for IE5 users. Statistics vary as to how many still use IE5, but if you can avoid the problem, why not? The image I used (the faux image) is very small. Also, tricking all browsers to fill columns with color and borders when the content isn't there adds about 33% to the css and html (for a basic page).

Quote:
What makes this css solution better/faster than a table, which would have taken me 1/16 the time I spent trying to figure this out? Will it load faster and be more stable?

Tables are far from rendered the same across browsers. This design will work across all I could lay my hands on, plus a few legacy ones. If a user with vision problems accesses your page using a text reader, the (Stephen Hawkins type) reader voice gives an incomprehensible version of the page if tables are used for layout and styling. This again breaches accessibility laws for most countries. Section 508 in the USA, the DDA in the UK, and so on.

Quote:
Do I assume I can add padding to the green left/right columns?

I wouldn't add anything extra to the css of the container-left or right. In fact, if those columns are goping to be identical in width, you could replace them as a single class (e.g. class="side-container, and in the css:

.side-container{ border-top:2px solid #D9D9AE; margin:0px 24px; }

Then, the content of these containers would have either margins or padding set.

e.g.

.side-container p{ margin:10px 5px; font-size:80%; }

Using the new container name, this gives top and bottom margins to the paragraphs and left and right margins of 5px. I also reduced the font-size!

Also, using this class method, you can make several such boxes, like this:

This is the Left Sidebar

This is the Left Sidebar

Quote:
Will the depth of all three columns stay the same?

Yes

Quote:
You appear to have created the "fullheightcontainer" that reaches all the way to the right side of the window, but does not have full height. What is the purpose of that?

This helps contain the whole page. As you add content, it will start to fill the page. Just put a few breaks in any column to check.

Quote:
Actually, I wanted my contact info to position centered below all the content and outside the bottom border on the background of the page. How would I do that?

Mock up what you want the bottom bit to look like and I will show you.

CT

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Mock up

Thanks, CT. You're awesome. See my images.

Is there a wysiwyg way of doing this like CSSEdit? Dreamweaver shows me a mess.

I assume you recommend the VisiBone charts?

Another design trick: these guys have come up with a js way of doing rounded corner divs w/o images. I've tried it and it works. In your opinion, would this present compatibility or over-weight issues? -- http://www.curvycorners.net

AttachmentSize
yours.jpg 68.81 KB
mine.jpg 75.83 KB

Jack A

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

JackyBoy wrote:Is there a

JackyBoy wrote:
Is there a wysiwyg way of doing this like CSSEdit?

Not in this life Smile

Quote:
Dreamweaver shows me a mess.

The Weaver of Lies. I use tsWEbEditor (its free) and preview using the real browsers (IE7, IE6, FF1.5 and Opera 9, all free).

Quote:
I assume you recommend the VisiBone charts?

No. To grab colors off the screen I use ColorMania 2.3 (it's free).

For a color chart, I use this:

http://wellstyled.com/tools/colorscheme2/index-en.html

See the wheel? See the little black dot? Click and hold your mouse inside that inner circle and drag around. Change the color intensity using the Variations buttons.

Rotate the color uses using the up and down arrows on the top right.

Quote:
Another design trick: these guys have come up with a js way of doing rounded corner divs w/o images. I've tried it and it works. In your opinion, would this present compatibility or over-weight issues? -- http://www.curvycorners.net

I prefer plain old images.

Now, the revised code:

html:

Townhomes Dallas Texas - Chimneyhill Townhomes - Dallas, Texas
@import url("quickie-style.css");

This is the
Main Content

This is the Left Sidebar

This is the Left Sidebar

Website design and maintenance by
Andrews & Associates

Emails: [email protected]

css:

/*** Style for 3 Column Fixed Width Variable Height Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#BAAF5E; /*** Background colour of page ***/ min-width:774px; /*** Content Width ***/ text-align:center; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ margin-left:auto; margin-right:auto; text-align:left; position:relative; width:772px; /*** Content Width ***/ background:url(images/faux.gif) center top repeat-y; } .topbottommargin{ margin:0px; background:#BAAF5E; height:20px; overflow:hidden; } #borderbottom,#bordertop{ margin:0px 2px; height:22px; overflow:hidden; background:url(images/bottom.gif) left top repeat-x; } #bordertop{background:url(images/top.gif) left top repeat-x} #banner{ margin:0px 22px 0px 174px; background:#FFFDC0 url(images/chimneyhilldallas_2.jpg) 2px 2px no-repeat; height:136px; overflow:hidden; } #logo{ margin:-136px 618px 0px 22px; background:#FFFDC0 url(images/chimneyhilldallas_logo.png) 2px 2px no-repeat; height:136px; overflow:hidden; } #headerfootergap{ margin:0px 22px; background:#C7824F; height:20px; overflow:hidden; } #outer{ position:relative; margin-left:176px; /*** Left Column Width ***/ width:420px; /*** Center Column Width (takes into account left and right shady border widths) ***/ } #float-wrap{ width:420px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:left; display:inline; } #center{ width:420px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:right; } #left{ float:left; display:inline; width:176px; /*** Left Column Width ***/ margin-left:-176px; /*** NEGATIVE Left Column Width ***/ position:relative; display:table; } #right{ float:left; display:inline; width:176px; /*** Right Column Width ***/ margin-right:-176px; /*** NEGATIVE Right Column Width ***/ position:relative; display:table; } #subfooter1{ margin:0px; background:#BAAF5E; text-align:center; height:64px; overflow:hidden; } #rightcolbottom,#leftcolbottom{ margin:0px 618px 0px 22px; background:#D9D9AE; height:2px; overflow:hidden; } #leftcolbottom{margin:0px 22px -2px 618px} #subfooter1 p{ font-size:65%; line-height:1.75em; vertical-align:bottom; color:#767837; font-weight:bold; } #subfooter1 a:link, #subfooter1 a:visited, #subfooter1 a:focus, #subfooter1 a:hover, #subfooter1 a:active { color:#E7DEB3; text-decoration:none; } a:link#mailme, a:visited#mailme, a:focus#mailme, a:hover#mailme, a:active#mailme { color:#767837; } .side-container{ border-top:2px solid #D9D9AE; margin:0px 24px; } .side-container p{ margin:10px 5px; font-size:80%; } #container-center{}

CT

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Thank you, Doc

I'll follow your perscription and regimen and report back. I'm much obliged, as we say in Texas -- sometimes :o]

Jack A

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 7 years 10 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Works beautifully, of course

I'm still working with your solution and of course it works quite well. I have two more questions:

How long would it take a seasoned pro like you to produce a page design like mine--rather, the one you did for me with links and content? Just wondering what the benchmark is for myself.

Would I be able to use your Pagemaker tool to do this? Probably not, i would think.

Thanks.

Jack A

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

JackyBoy wrote:How long

JackyBoy wrote:
How long would it take a seasoned pro like you to produce a page design like mine--rather, the one you did for me with links and content? Just wondering what the benchmark is for myself.

As it stands, the basic template design about four hours, more or less). Each page after that an hour maybe, depending on the content. But I have tons of snippets I use.

Quote:
Would I be able to use your Pagemaker tool to do this? Probably not, i would think.

No. In fact, the more I do this, the less useful I think that tool is. It encourages people to think the process arse about face (by focusing on design rather than content).