Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout

2004-12-17 Thread bgilbertnc 


what if you want one of the columns to have a border around it, say the right column. How can this be done?

Bruce Gilbert
webmaster
DPS-Original Message- From: Mani Sheriar <[EMAIL PROTECTED]>Sent: Dec 16, 2004 6:06 PM To: [EMAIL PROTECTED] Subject: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout 
 
  
 

 
  Clean
  Clean
  DocumentEmail
  
  
   
   
   
   
  
  MicrosoftInternetExplorer4
 






Hi Everyone!

This is my first post to this group after reading it for a while. I must say, I’m kinda scared to post to you guys! However, I really need your help.

I think I may have found the Holy Grail … that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST.

What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms?

Also, I read the usual css blogs as much as I have time for, but I’m not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it.

Here’s the link: http://www.ManiSheriar.com/holygrail

By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a “skip to content” link at the top, no?

Anyway – thanks for any feedback, and please be gentle with me. ;~)

Mani (like Bonnie)

Mani Sheriar
Sheriar Designs | www.ManiSheriar.com



**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout

2004-12-17 Thread bgilbertnc 
I was able to achieve the border on my right column with adding a border to by 
bgimage, thanks Mani. One problem I am having though. I have a header image 
that is exactly 800px, so I want my whole page to be no more than 800px wide. I 
have set my #wrapper to 800px. In IE my right column overlaps the header to the 
right a little bit. It doesn't do this in moz, ff, netscape. Is there way to 
compensate for this IE irregularity? (no padding or margin on wrapper)

Bruce Gilbert
webmaster
DPS

-Original Message-
From: Mani Sheriar [EMAIL PROTECTED]
Sent: Dec 17, 2004 9:22 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout

what if you want one of the columns to have a border around it, say the
right column. How can this be done?

If you want one of the columns to have a border, then you just apply the
border property to the column and your 200x1 pixel gif can have that
border on it as well.  Should work fine.

One of the main reasons that I struggled to create this layout is so
that you could have different colors for the background, header, footer,
and all three columns (none of the colors are shining through from
underlying elements).  This can be extended to different backgrounds as
well ... which is the REAL reason that I worked on this design.  If you
wanted some sort of fancy background for the side columns (or any
element) then you would just apply that background to the column and the
wrapper div.

IE 5.2 OS X (Mac): extra padding added to the width of the left and
right columns
Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif
(could be a known CSS bug related to IE implementation of box
model-padding and border added to width)
See: http://tantek.com/CSS/Examples/boxmodelhack.html

Call for help:

Does anyone have any ideas about this problem in IE 5.2 OS X
(screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have
already implemented the box model hack, so I'm not sure what the issue
could be.

 Anyone come up with, or implemented, a 3-column layout of this sort in
which the left and right columns also stretch as a percentage of the
page width?

I haven't tried it yet, but one theory is to make the background
repeater very long (horizontally), and set it to repeat-y, but set its
x-axis start position as a percentage. I haven't tried it yet, but one
theory is to make the background repeater very long (horizontally), and
set it to repeat-y, but set its x-axis start position as a percentage.

I actually started working on an all-liquid layout at first. I ended up
going to a single-column liquid layout just because this would work
better for a project I'm about to embark on.  What you suggest is
exactly how I planned to try to implement the backgrounds (I didn't get
that far yet, though). However, I might try to follow up on the
all-liquid layout just to see if it can be done.  If I get to it and get
it to work, I'll post it here.


Quick Note:

Dejan - Wow ... THANK YOU for your help.  I'm sure those screen shots
will be very helpful and I really appreciate your time.

Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925|914.0741
 
 



**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**


**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**