Re: [WSG] resources for media=print?
Thanks John, Chris, Justin. I'll do the recommended reading. I knew it had to be out there, and undoubtedly I could have found it on my own -- but it's handy to be directed to the best choices right off. Cheers, Paul On 5/3/04 6:13 PM, Justin French [EMAIL PROTECTED] wrote: On 04/05/2004, at 10:50 AM, Paul Ingraham wrote: I've been studying CSS steadily for about a three weeks now, and I have yet to come across any information about writing stylesheets for media=print. I know that they exist, but I don't know anything about them. Is this because: (a) it's so simple that there's no need for education resources about on the subject? :-) or (b) I just haven't looked in the right place yet? If there are some good articles or tutorials about this, I'd be grateful if someone could point me in the right direction. Before thinking about ANY topic, go check out A List Apart... usually, someone has already thought about it, and has come up with something pretty detailed to walk your through it without any glitches. In this case, Going to Print by Eric Meyer will help: http://www.alistapart.com/articles/goingtoprint/ And as always, Google can solve just about anything: http://www.google.com/search?num=50hl=enlr=lang_enie=UTF-8oe=UTF -8q=media+print+stylesheet+tutorialbtnG=Search --- Justin French http://indent.com.au * 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 *
Re: [WSG] small css question
Thanks John and Nelson. Hey Paul, I just realized that I was incorrect saying that you can apply text-align: center; directly to the image. If would have to be wrapped in another tag, with that rule applied to the parent. So it looks the answer to my original question is, Yes, to center an image using css, it really is necessary to wrap it in a block level element with text-style:center defined. Huh! Is it just me, or is that kind of kludgy? This seems to mean that I have to apply a style property that has nothing to do with images (text-align) to a class or id of a block level element that exists solely for the purpose of containing an image... weird... awkward... that's a lot of markup and css to replace the (deprecated) align attribute! Or is there still a better way? Cheers, Paul * 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] small css question
So it looks the answer to my original question is, Yes, to center an image
using css, it really is necessary to wrap it in a block level element with
text-style:center defined. Huh!
No, it isn't. As Nelson suggested, using {display : block; margin : 0
auto;} you're not wrapping the img in anything extra, but rather you are
turning the img itself into a block.
Yep. That do indeed work. I didn't believe it until I tried it, and I'm
still not sure I understand it. But it works, and it's clean and simple. I
assumed I was missing something basic and I was right. ;-)
So setting the left and right margins as auto magically accomplishes
centering... because if they're both auto, then they must be equal, and the
only way to have both left and right margins equal is to center the object.
Sweet. I did NOT see that coming. Elegant, but not obvious. Exactly what I
was hoping for.
Thanks! I am only an egg. This has been a good (and useful) introduction
to the list.
Cheers,
Paul
p.s. I'll buy a beer for the first person who correctly identifies the egg
reference. :-) Of course, you'll have to come to Vancouver for it...
*
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] small css question
That's a great trick, too.. simplicity all the way. Yep, that was definitely the kind of solution I was hoping for. Re the egg thing, Noa wrote: Stranger in a Strange Land, OBVIOUSLY. *rolls eyes* :-) I didn't figure it would be particularly hard, although I did get a couple of wrong guesses. It was more about who would get it first. And unfortunately no beer for you this time, Noa, because Scott Parsons in Sydney beat you to it by half an hour. ;-) Anyway, sliding off topic here... thanks again for the help everyone! Paul * 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] small css question
Thanks for the clarifications, Russ. So... Before you jump for joy at this solution you should be aware that it is not supported across older browsers... It's not a big issue, but it's not trivial either: if I want to center an img AND have it supported by older browsers (which shouldn't be much to ask, I wouldn't think), am I right back where I started? Gotta wrap it in p/p and center the contents of the paragraph? This also raises a more general newbie question, but nice and philosophical: are the goals of writing markup and css for old browsers and future browsers mutually exclusive? I want to learn to write good markup and css -- highly accessible, clean, robust, to the standards. That's what this list is all about, right? If you attempt to accommodate older browsers, does your good clean robust and standard markup and css start to fall apart? For more details, take a look at this: http://www.browsercam.com/public.aspx?proj_id=61584 Wow, that's handy! Paul * 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] small css question
The short answer is that if you want to support IE5 and IE5.5 (which are both still very popular browsers) then one method you could use is to wrap your image in a container and use text-align: center; Okay, got that one nailed down now, I think. ;-) To your other question... [snip] A bit brain-dead tonight so I hope that doesn¹t confuse the issue even more for you :) Not at all, Russ. Although you highlighted a number of extra considerations, you also provided an answer: obviously backwards compatibility and clean code are NOT mutually exclusive. Sometimes fussy, perhaps, but not mutually exclusive. Some inevitable compromises, perhaps, but no radical departures from semantically sound code. So you directly addressed my concern. Here I am trying to learn good html and css, and I keep hearing about hackish compromises for older browsers, and I was feeling worried that I might have to start learning intensively in two directions at once: one learning curve for future-proofing, and one learning curve for backwards compatibility! But it sounds like I can focus on the former, and make just a few accomodations for the latter. That's reassuring. In fact, I wouldn't be surprising to discover that good, clean css code makes it generally easier to be backwards compatible. On the other hand, if you are a design control freak, and write elaborate and envelope-pushing css trying to get exactly the look you want in the new browser, I'll bet it gets a lot harder to make your pages look like anything at all in the old ones! Paul p.s. Entirely by coincidence, Russ, I spent the hour between my question and your reply reading Floatutorials and Listutorials at your website. Made the connection between you and there just a moment ago. What are the odds? ;-) Small web... Thanks for the clarifications, Russ. So... Before you jump for joy at this solution you should be aware that it is not supported across older browsers... It's not a big issue, but it's not trivial either: if I want to center an img AND have it supported by older browsers (which shouldn't be much to ask, I wouldn't think), am I right back where I started? Gotta wrap it in p/p and center the contents of the paragraph? This also raises a more general newbie question, but nice and philosophical: are the goals of writing markup and css for old browsers and future browsers mutually exclusive? I want to learn to write good markup and css -- highly accessible, clean, robust, to the standards. That's what this list is all about, right? If you attempt to accommodate older browsers, does your good clean robust and standard markup and css start to fall apart? For more details, take a look at this: http://www.browsercam.com/public.aspx?proj_id=61584 Wow, that's handy! * 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 *
[WSG] my second simple css question
Okay, you guys made good short work of my first simple css question, and it
was a great introduction to this list. Thank you all. Now it's time for
another!
I want a sidebar, and I've created one. Looks lovely. A couple paragraphs
inside a div, floated off to the right and breaking the right margin.
Little background, little border, and so far so good. Looks like this:
main content main content main content
main content main content main content
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main content main content
main content main content main content
Just one problem. The top of the sidebar is always on the same line as the
adjacent paragraph. I'd rather have this:
main content main content main content
main content main content main content
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main content main content
main content main content main content
Just like wrapping text around an inline image. Like so:
pBlah blah for a couple lines div class=rightfloatedsidebarrhubarb
rhubarb rhubarb/div and the some more blah blah blah./p
Which obviously doesn't work, because you can't put divs inside a paragraph,
but I don't know what else to do. I did try to declare div.sidebar
{display:inline}, thinking that might magically make my div into an inline
object, but that caused chaos.
Am I making any sense? Does anyone know what I'm after... and how to do it?
Thanks in advance.
Paul
*
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] my second simple css question
I guess I probably should have just done that in the first place.
Here's how it looks now, to help with the grokking...
http://www.vancouvermassage.ca/screenshot.jpg
Unfortunately, I have no picture of how I want it. :-) But it's very
simple. I just want to move the sidebar down, so that some of the large
paragraph flows above as well as beside it. Should be easy, I'd think.
I tried changing the top margin, of course, but that just pushes it
downwards without the adjacent paragraph flowing into the space above the
sidebar.
Paul
Do you have a picture or URL? Then we can grok it in fullness.
Cheers
James
Paul Ingraham wrote:
Okay, you guys made good short work of my first simple css question, and it
was a great introduction to this list. Thank you all. Now it's time for
another!
I want a sidebar, and I've created one. Looks lovely. A couple paragraphs
inside a div, floated off to the right and breaking the right margin.
Little background, little border, and so far so good. Looks like this:
main content main content main content
main content main content main content
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main content main content
main content main content main content
Just one problem. The top of the sidebar is always on the same line as the
adjacent paragraph. I'd rather have this:
main content main content main content
main content main content main content
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main content main content
main content main content main content
Just like wrapping text around an inline image. Like so:
pBlah blah for a couple lines div class=rightfloatedsidebarrhubarb
rhubarb rhubarb/div and the some more blah blah blah./p
Which obviously doesn't work, because you can't put divs inside a paragraph,
but I don't know what else to do. I did try to declare div.sidebar
{display:inline}, thinking that might magically make my div into an inline
object, but that caused chaos.
Am I making any sense? Does anyone know what I'm after... and how to do it?
Thanks in advance.
Paul
*
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
*
*
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] my second simple css question
Thanks for the suggestion, Darian. It doesn't work, but it does illustrate
precisely why I'm feeling stumped. This seems to just pushes the top of the
sidebar down... but the adjacent paragraph continues to wrap as though it
was still there. Here's a screenshot of that...
http://www.vancouvermassage.ca/screenshot2.jpg
How the devil can I push the top edge downwards AND have the document
content flow above as well as beside it...? It's so easy with an img!
Paul
On 4/28/04 7:34 PM, Darian Cabot [EMAIL PROTECTED] wrote:
Off the top of my head, here's an example...
*** In your CSS: ***
#sidebar {
position: relative;
top: 5em;
float: right;
width: 200px;
padding: 10px;
}
*** HTML: ***
div id=container
div id=sidebarSide bar stuff/div
p class=large-paragraph
Blah blah blah...
/p
/div
This might not work (_) hehe sorry... I'm in my lunch break and can't
test now. Maybe it'll help you find the solution though.
Goodluck ^^
Darian Cabot
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Cabot Consultants Pty Ltd
Software Engineer / Website Design
http://www.cabotconsultants.com.au
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
I guess I probably should have just done that in the first place.
Here's how it looks now, to help with the grokking...
http://www.vancouvermassage.ca/screenshot.jpg
Unfortunately, I have no picture of how I want it. :-) But it's very
simple. I just want to move the sidebar down, so that some of the large
paragraph flows above as well as beside it. Should be easy, I'd think.
I tried changing the top margin, of course, but that just pushes it
downwards without the adjacent paragraph flowing into the space above the
sidebar.
Paul
Do you have a picture or URL? Then we can grok it in fullness.
Cheers
James
Paul Ingraham wrote:
Okay, you guys made good short work of my first simple css question,
and it
was a great introduction to this list. Thank you all. Now it's time
for
another!
I want a sidebar, and I've created one. Looks lovely. A couple
paragraphs
inside a div, floated off to the right and breaking the right margin.
Little background, little border, and so far so good. Looks like this:
main content main content main content
main content main content main content
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main content main content
main content main content main content
Just one problem. The top of the sidebar is always on the same line as
the
adjacent paragraph. I'd rather have this:
main content main content main content
main content main content main content
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main sidebar sidebar sidebar sidebar
main content main content main content
main content main content main content
Just like wrapping text around an inline image. Like so:
pBlah blah for a couple lines div
class=rightfloatedsidebarrhubarb
rhubarb rhubarb/div and the some more blah blah blah./p
Which obviously doesn't work, because you can't put divs inside a
paragraph,
but I don't know what else to do. I did try to declare div.sidebar
{display:inline}, thinking that might magically make my div into an
inline
object, but that caused chaos.
Am I making any sense? Does anyone know what I'm after... and how to
do it?
Thanks in advance.
Paul
*
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
*
*
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
Re: [WSG] my second simple css question
Thanks for detailed comments, Kristof. Just so you know, I never intended to bash my way to a solution with an img of a sidebar. I see the trouble with that. You could argue it's ugly... I do. Or just ineffective, actually. A sidebar should appear to be out of the flow of the main content of the document: related, but separate and different. If its top margin is flush with the top margin of an adjacent paragraph, they are too strongly associated visually, as though the sidebar has more of a relationship with THAT paragraph than the others. ...but to my knowledge you can't reach your wish without putting the sidebar in the middle of your content. Actually, I can't even reach it by doing that! I haven't figured out ANY way of doing it, acceptable or otherwise. So maybe my questions wasn't so simple question, unless the answer is just no, you can't do that. But really? Can this really be impossible? Isn't this the promise of css -- significant control over the rendering of good structural html! Ideally, of course, what I want is to write this in my html... pmain content main content main content/p div class=sidebar h1Sidebar heading/h1 psidebar content/p pmore sidebar content/p /div pmain content main content main content/p And then make css declarations about the sidebar such that the paragraph after it flows above and beside it. Surely this is what the positioning and margin properties are for? This problem is all the more baffling so because the wrapping text seems to accommodate changes in the BOTTOM margin of the sidebar just fine. So why on earth can't the flowing text work with an altered TOP margin? If I can't build what I want, I hope to at least understand why! Paul On 4/29/04 4:02 AM, Kristof Neirynck [EMAIL PROTECTED] wrote: Paul Ingraham wrote: Just one problem. The top of the sidebar is always on the same line as the adjacent paragraph. I'd rather have this: main content main content main content main content main content main content main content main sidebar sidebar sidebar sidebar main content main sidebar sidebar sidebar sidebar Just like wrapping text around an inline image. Like so: pBlah blah for a couple lines div class=rightfloatedsidebarrhubarb rhubarb rhubarb/div and the some more blah blah blah./p Wrapping an image like that would be very wrong. Think of Lynx as the best google emulator on the planet which also happens to give you a clue of what the blind see/hear. if you have an image in your paragraph like this: p style=width:300pxSince joining Real from Manchester United, Beckham has played img style=float:right height=90 width=160 alt=Real Madrid's England international David Beckham src=beckham.jpgin a central rather than a wide position, though he still plays in that role for England./p Lynx would show it like this: Since joining Real from Manchester United, Beckham has played Real Madrid's England international David Beckham in a central rather than a wide position, though he still plays in that role for England. When you use Lorem Ipsum it doesn't matter, but this stuff has to be read too, you know. A pit less confusing would have been this: div style=width:300px p style=float:rightimg height=90 width=160 alt=Real Madrid's England international David Beckham src=beckham.jpg/p pSince joining Real from Manchester United, Beckham has played in a central rather than a wide position, though he still plays in that role for England./p /div And that looks a lot like your sidebar example. div style=width:300px div style=float:right;width:160px; h3sidebar/h3 pThis part is a sidebar./p /div pSince joining Real from Manchester United, Beckham has played in a central rather than a wide position, though he still plays in that role for England./p /div You could argue it's ugly, but to my knowledge you can't reach your wish without putting the sidebar in the middle of your content. Doing it with images is wrong, doing it with sidebars is even worse. ps: The paragraph and alt text used in my example is from the bbc-news site. * 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] Pre-Site Launch Input
your Site looks good to me. One thing I would change is the message at the top of the page. It may be confusing for people using screen readers or other assistive technologies. I would replace the text with a Skip to content link (or similar). Tony, can you explain that a little bit more? I understand your point about the old browser message causing confusion for people using screen readers etc, and it's a good one, but why replace the text with Skip to content? I must be missing something. I can't see how that communicates anything to anyone using any kind of browser... Thanks. Paul * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
