OT: Using CSS for layering (was RE:
web design and screen resolution)
Joseph Sinclair
plug-discuss at stcaz.net
Sun Feb 12 01:08:55 MST 2006
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>
Craig White wrote:
> On Sat, 2006-02-11 at 22:22 -0700, Joseph Sinclair wrote:
>
>>Craig White wrote:
>>
>>>On Sat, 2006-02-11 at 19:54 -0700, Joseph Sinclair wrote:
>>>
>>>
>>>>It looks like you may be encountering a defect in the browser at this point. The code you have SHOULD print correctly. That it doesn't is a sign the browser is not rendering the page correctly.
>>>
>>>----
>>>Actually, I wondered that myself since I am developing the code on a
>>>remote system that has CentOS 4 which has Firefox 1.07 so I downloaded
>>>it back to my house BEFORE I posted it - just to verify and it does very
>>>similar things on Firefox 1.15 and IE 6.01 on my WinXP system so that in
>>>my mind rules out browser issue. (the same code I posted this last
>>>time). Same thing with Firefox 1.07 on my Linux desktop too (FC-4)
>>>-----
>>
>>----
>>Actually, the fact that all the browsers do it doesn't make it not a defect, it makes it a common defect. The CSS spec says that the formatting should work the same on page and screen if possible. Since it's almost certainly both possible and not difficult, I would say the behavior you see is a defect.
>>That said, the fact that the defect is present certainly doesn't help your situation.
>>----
>>
>>>>I noticed one thing from earlier. When you placed the image in the DIV background, it viewed correctly on screen, but did not print at all. One of the settings in most browsers is whether to print background colors and images or not. The default in many systems is to not print these things. In Firefox you can change this via File|Page Setup. I wonder if you might have better results if you tried putting the image on the background again, and just set that option before print preview?
>>>>It wouldn't be ideal, but it should at least get you the option to produce what you're looking for in the face of this defect in the browser's CSS z-ordering support.
>>>
>>>-----
>>>yeah - html printing options are kind of lousy and I can probably do
>>>that - that's clearly not the direction I wanted to go...as you know, I
>>>can just put in a table to contain objects where I want them to be and
>>>be done with it...It's just a new setup and I'm trying to work out all
>>>of the modeling before I start making dozens of print forms.
>>
>>----
>> How would using tables enable you to put text on top of an image. In my experience anything that works with tables works just as well with CSS layout, in almost all cases. I'd be interested to see a simple example where table layout creates the effect on page and screen that you're looking for.
>>----
>>
>>>The truth is that all the web browsers also default to putting url's,
>>>page numbers, date & time and stuff on printouts so the page setup
>>>options will have to be visited anyway...as far as I can tell, those
>>>settings seem to get lost when you quit and restart Firefox.
>>>
>>>Thanks for the great wisdom - as always - you are the best...
>>>
>>>ps...I am trying to work through the examples in the css section of
>>>w3.org that you pointed out in case I am missing something but it
>>>appears that on screen is one thing and on paper is an entirely
>>>different matter for html.
>>
>>----
>>The screen and page are definitely different, there are even some styles that only apply to print media. That might, BTW, help you find what you're looking for, since you could probably set the screen and print layouts a bit differently using media types.
>>Another solution might be to use SVG for the graphic, have the SVG place text on top of the raster image, then include the SVG in the HTML via an object tag. That would be another way to composite the information the way you want.
>
> ----
> No - you misunderstood...I didn't want text over the graphic at all.
>
> I simply want it inline with the graphic but I want to control it and
> not let the vague handling of html allow the text to jump around. That
> is why I was going for the <div> tags and obviously a table allows me to
> have two side by side cells
>
> -------------------------------------------------------------------
> | | |
> | | |
> | | |
> | picture here | text would go here |
> | | |
> | | |
> | | |
> -------------------------------------------------------------------
>
> It's simple to do and inline is the default but I can't have these
> things bouncing around since it is their logo and the header of the
> page. I wanted absolute positioning for the logo to the left and the
> text to the center of the page.
>
> As you can see, I can have a table lock things into place and the issue
> I have to deal with is that the 'text' really isn't in the center of the
> page itself, but rather in the center of the table which is an entirely
> different thing but for now, it will work.
>
> Thanks
>
> Craig
>
> ---------------------------------------------------
> PLUG-discuss mailing list - PLUG-discuss at lists.plug.phoenix.az.us
> To subscribe, unsubscribe, or to change you mail settings:
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
>
More information about the PLUG-discuss
mailing list