OT: Using CSS for layering (was RE: web design and screen resolution)

Sun Feb 12 08:41:08 MST 2006

On Sun, 2006-02-12 at 01:08 -0700, Joseph Sinclair wrote:
> Obviously I completely misunderstood what you wanted.  If you're wanting the text and graphic side-by-side, then it's absolutely possible, and in some ways easier, to do with CSS layout.
> I apologize for the rabbit trail we've been following all day trying to do something you were not trying to accomplish.
> 
> I also finally figured out why the print preview wasn't applying your style.  In your code, you have media="screen" in the style element.  This ensures that the style rules in that element ONLY apply on screen media, so the styles did not apply to print or print preview.
> I generally do not apply the media attribute to my style elements, or else I apply the all media type, at least when initially developing the stylesheet.
> 
> Sometimes, a problem seems complex, but really it's something really simple...
> 
> Here's some example XHTML to accomplish what you actually wanted, note the media="all" on the style element:
> 
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> 
> <html xmlns="http://www.w3.org/1999/xhtml">
>   <head>
>     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
>     <title>Referral Note</title>
>     <link href="../../../public/stylesheets/th_stylesheet.css" rel="stylesheet" type="text/css" media="all" />
>     <style type="text/css" media="all">
>     <!--
>       #section1 { height: 118px; width: 100px; left: 36px; top: 20px; position: absolute; visibility: visible; }
>       #section2 { height: 150px; width: 400px; left: 170px; top: 20px; position: absolute; visibility: visible; }
>     -->
>     </style>
>   </head>
> 
>   <body>
>     <div id="section1">
>       <img src="../../../public/images/tobyLogo_2005.gif" alt="" height="112" width="128" border="0" />
>       <div id="section2">
>         <h1>REFERRAL NOTE</h1>
>       </div>
>     </div>
>   </body>
> </html>
> 
----
yeah - I only had the text over the top of the graphic to test out your
suggestions for 'siblings' - otherwise, that <div> wasn't relevant at
all...I thought you understood that.

As for the solution...indeed that is the solution and that's what I get
for having GoLive generate the css for me. Thankfully, I have figured
out using css with Quanta and I sort of prefer it anyway - they've got a
beautiful interface to css editing.

Now Joseph...I really appreciate you cluing me in and indeed you are
correct...media="screen" was the problem and apparently that is the
default of css when it's not specified media="all" which is likely why
the examples that I was working through from the c3.org site did the
same thing.

If I had one regret...I wish you could figure out my stupidity earlier
in threads.

;-)

Thanks

Craig