Prev: How to place a picture centered on a webpage / with fixed offset of 300 pixels from left border?
Next: making an invisible div element visible on mouse hover
From: Mason C on 21 Dec 2009 21:40
I'm trying to do this in html 4.01 strict, validated, and getting "[browser]CSS1compat"

MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right column.

( incidentally, I'd like to center it on the reader's screen, but don't know how -- and it sure isn't "liquid" )

Please, your 1- minute reaction: Am I doing it all wrong?


Container and three columns:

#boxBig { POSITION: relative; text-align: center; margin-left: 310px; margin-top: -20px; margin-right: 10px; }

#sideLeft { POSITION: relative; text-align: center; margin-left: -100px; margin-top: 20px; }

#columnCenter { POSITION: relative; text-align: center; margin-left: 80px; margin-top: -680px; width: 546px; }

#sideRight { POSITION: relative; text-align: center; margin-left: 555px; margin-top: -925px; }

BODY { POSITION: relative; MARGIN: 0px; BACKGROUND: #666633;
background: url("ranchoview-s.jpg"); background-attachment: fixed;
}


MasonC thanks for previous advise about this site-in-process
From: Chris F.A. Johnson on 21 Dec 2009 22:15
On 2009-12-22, Mason C wrote:
> I'm trying to do this in html 4.01 strict, validated, and getting "[browser]CSS1compat"
>
> MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right column.
>
> ( incidentally, I'd like to center it on the reader's screen, but don't know how -- and it sure isn't "liquid" )
>
> Please, your 1- minute reaction: Am I doing it all wrong?

I'm skeptical of anything that specifies everything in px.

Without a URL, I can't add anything more.


> Container and three columns:
>
> #boxBig { POSITION: relative; text-align: center; margin-left: 310px; margin-top: -20px; margin-right: 10px; }
>
> #sideLeft { POSITION: relative; text-align: center; margin-left: -100px; margin-top: 20px; }
>
> #columnCenter { POSITION: relative; text-align: center; margin-left: 80px; margin-top: -680px; width: 546px; }
>
> #sideRight { POSITION: relative; text-align: center; margin-left: 555px; margin-top: -925px; }
>
> BODY { POSITION: relative; MARGIN: 0px; BACKGROUND: #666633;
> background: url("ranchoview-s.jpg"); background-attachment: fixed;
> }
>
>
> MasonC thanks for previous advise about this site-in-process


--
Chris F.A. Johnson <http://cfajohnson.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
From: Mason C on 22 Dec 2009 21:34
On Tue, 22 Dec 2009 17:10:47 -0500, "Beauregard T. Shagnasty" <a.nony.mous(a)example.invalid> wrote:

[lots of snipping]

"Study this template:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm "

This may indeed be the holy grail for me.

Learning CSS is not my business, but I need its results.

I'm going to (try to) adopt that template -- and give due credit and
link at the bottom to Matthew.

Thanks Beauregard, for the advise. (And you too, dorayme.)

Happy holidays and a good new year.

Mason C
 | 
Pages: 1
Prev: How to place a picture centered on a webpage / with fixed offset of 300 pixels from left border?
Next: making an invisible div element visible on mouse hover