Re: [WSG] my second simple css question

[Kristof Neirynck]

Paul Ingraham wrote:
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!
Forget my previous post.
I've gone all the way with this one:

The sidebar content doesn't move anymore, but it looks as if it did.
I've absolutely positioned it on top of a floating span.
I've even thought about the text-resize possibility.
Now the only thing I need to do is put that span in there dynamically.
I still don't recommend it, but it's less bad than my last example.
--
Kristof
*
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

[Kristof Neirynck]

Paul Ingraham wrote:
...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."
Well then this is the "or otherwise" solution:

I'm strongly against using it in real life.
It puts the sidebar in the middle of a paragraph after the page loaded.
Browsers without javascript support will not see this effect.
--
Kristof
*
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

[Paul Ingraham]

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...

main content main content main content
 
  Sidebar heading
  sidebar content
  more sidebar content
 
main content main content main content

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:
>> 
>>   Blah blah for a couple lines rhubarb
>> rhubarb rhubarb and the some more blah blah blah.
>> 
> 
> 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:
> 
> Since joining Real from Manchester United,
> Beckham has played  alt="Real Madrid's England international David Beckham"
> src="beckham.jpg">in a central rather than a wide position, though he
> still plays in that role for England.
> 
> 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:
> 
> 
> Since 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.
> 
> 
> And that looks a lot like your sidebar example.
> 
> 
> sidebar
> This part is a sidebar.
> 
> Since 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.
> 
> 
> 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] my second simple css question

[Trusz, Andrew]

-Original Message-
From: [EMAIL PROTECTED] On Behalf Of Paul Ingraham


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
   

*** 

Start the sidebar inside the left text:

 Opening left side text.  Interior text. Returning to the
exterior text 

drew 
*
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

[Kristof Neirynck]

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:
  Blah blah for a couple lines rhubarb
rhubarb rhubarb and the some more blah blah blah.
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:
Since 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.

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:


Since 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.


And that looks a lot like your sidebar example.


sidebar
This part is a sidebar.

Since 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.


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.
--
Kristof
*
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

[Paul Ingraham]

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: ***
> 
> 
>Side bar stuff
>
> Blah blah blah...
>
> 
> 
> 
> 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:
 
  Blah blah for a couple lines >>> class="rightfloatedsidebar">rhubarb
 rhubarb rhubarb and the some more blah blah blah.
 
 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

[Darian Cabot]

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: ***


 Side bar stuff
 
  Blah blah blah...
 



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:
>>>
>>>  Blah blah for a couple lines >> class="rightfloatedsidebar">rhubarb
>>> rhubarb rhubarb and the some more blah blah blah.
>>>
>>> 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

[Paul Ingraham]

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:
>> 
>>  Blah blah for a couple lines rhubarb
>> rhubarb rhubarb and the some more blah blah blah.
>> 
>> 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

[James Ellis]

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:
 Blah blah for a couple lines rhubarb
rhubarb rhubarb and the some more blah blah blah.
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
*