Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-17 Thread Ben Davies 
Hi Linda,

Thanks for your suggestion. One thing very relevant that I have not
mentioned is that the content and sidebar need to appear below a
header of unknown height. I think this means absolute positioning is
not going to work. Sorry for not mentioning that.

Сергей Кириченко

Thanks for the links. I laughed really hard when I translated your
insult as well. It loses something in the translation, however :)

After a bit of fiddling I got the solution at
http://www.alistapart.com/articles/multicolumnlayouts/ to work
consistently across a few browsers. It is an interesting approach
which can provide equal height backgrounds for the content and sidebar
without faking it with a background image.

Not sure I would have found it with a search of any keywords I would
have used, however.

Thanks again.

Ben Davies


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-16 Thread Linda Mitchell 
Not sure if this is what you want but to have the content first in the body
but have the sidebar appear firt you can use:

html, body {
width: 100%;
margin:0;
}

#cont {
float: left;
padding:10px;
margin-left: 220px;
}
#sidebar {
background: #DD;
margin: 10px;
font-size:90%;
width:200px;
position: absolute;
left: 0px;
top: 0px;
}




content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content 


 Sidebar Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar
Sidebar 




This seems to work 

Linda
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Ben Davies
Sent: Monday, 17 August 2009 4:14 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

Hi Kepler,

>You may want to try max-width on your main content. I'm not sure if that
will work for you since you didn't post a link.

I tried max- and min-width in a few combinations and could not get it to
work (and makes my content no longer fluid ).

Hi Mark

Thanks for the sample code. The problem with that approach is that if the
window is too small the sidebar will drop down. If it is too large my
content area will grow but I will introduce a big gap between the sidebar
and the content.

The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:


test

#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}






 Sidebar Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar
Sidebar 

content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content 






Ben Davies


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-16 Thread Сергей Кириченко 
learn to search, елки палки
http://www.alistapart.com/articles/multicolumnlayouts/
http://www.alistapart.com/articles/fauxabsolutepositioning/

2009/8/17 Ben Davies 

> Hi Kepler,
>
> >You may want to try max-width on your main content. I'm not sure if that
> will work for you since you didn't post a link.
>
> I tried max- and min-width in a few combinations and could not get it
> to work (and makes my content no longer fluid ).
>
> Hi Mark
>
> Thanks for the sample code. The problem with that approach is that if
> the window is too small the sidebar will drop down. If it is too large
> my content area will grow but I will introduce a big gap between the
> sidebar and the content.
>
> The markup below demonstrates what I currently have. Works great but I
> suspect content-first source ordering is impossible:
>
> 
> test
> 
> #cont {
> padding:10px;
>margin-left: 220px;
> }
> #sidebar {
>float:left;
>background: #DD;
>margin: 10px;
>margin-right:0px;
>font-size:90%;
>width:200px;
> }
> 
> 
> 
> 
>
> 
>  Sidebar Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar
>  Sidebar
> 
>
> content
> content content content content content content content content content
> content
> content content content content content content content content content
> content
> content content content content content content content content content
> content
> content content content content content content content content content
> content
> content content
> 
>
> 
> 
>
>
>
> Ben Davies
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>


-- 
С уважением,
Кириченко Сергей
верстальщик
тел. +7 (904) 333-46-25
starhack.ru


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-16 Thread Mark Huppert 
Ben

If the window gets below a certain width,
then inevitably the content must pop up
above the fixed width sidebar. That is the whole point 
of the content first approach, I thought.

It's true that with an extremely wide screen a 
gap will open up. I guess if that's a problem for your
client, then it's your problem.

Another way to handle this is to use javascript to 
manually adjust the style settings according to the
screen size.


regards

Mark


Mark Huppert
Library Web Development  &
Integrated Library Management System Coordinator
Division of Information
R.G. Menzies Building (#2)
The Australian National University
ACTON ACT 0200

T: +61 02 6125 2752 
F: +61 02 6125 4063
W: http://anulib.anu.edu.au/about/

CRICOS Provider #00120C


-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Ben Davies
Sent: Monday, 17 August 2009 4:14 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order
Limitations

Hi Kepler,

>You may want to try max-width on your main content. I'm not sure if
that will work for you since you didn't post a link.

I tried max- and min-width in a few combinations and could not get it
to work (and makes my content no longer fluid ).

Hi Mark

Thanks for the sample code. The problem with that approach is that if
the window is too small the sidebar will drop down. If it is too large
my content area will grow but I will introduce a big gap between the
sidebar and the content.

The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:


test

#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}






 Sidebar Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar
Sidebar


content
content content content content content content content content content
content
content content content content content content content content content
content
content content content content content content content content content
content
content content content content content content content content content
content
content content







Ben Davies


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-16 Thread Ben Davies 
Hi Kepler,

>You may want to try max-width on your main content. I’m not sure if that will 
>work for you since you didn’t post a link.

I tried max- and min-width in a few combinations and could not get it
to work (and makes my content no longer fluid ).

Hi Mark

Thanks for the sample code. The problem with that approach is that if
the window is too small the sidebar will drop down. If it is too large
my content area will grow but I will introduce a big gap between the
sidebar and the content.

The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:


test

#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}






 Sidebar Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar  Sidebar


content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content







Ben Davies


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-16 Thread Mark Huppert 
Ben
 
This works ok - or have I misunderstood you? Maybe
the alignment isn't good enough for the 'big end of town' though.
 

test

#cont {float:right;width:81%;border:1px solid red;}
#sidebar {float:left;width:200px;background-color:green;color:#ff;}



content
ABC

 

regards

Mark


Mark Huppert
Library Web Development  &
Integrated Library Management System Coordinator
Division of Information
R.G. Menzies Building (#2)
The Australian National University
ACTON ACT 0200

T: +61 02 6125 2752
F: +61 02 6125 4063
W: http://anulib.anu.edu.au/about/

CRICOS Provider #00120C



 

  _  

From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Ben Davies
Sent: Monday, 17 August 2009 1:35 PM
To: Web Standards Mailing List
Subject: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations


Hi Everyone, 

I am working on a site with a fixed sidebar panel and fluid content.
After some research I think I have discovered a CSS source order
limitation particular to this layout. Can anyone confirm whether this
sounds correct:

- To put my content first in the markup, my content needs to be floated
(for a following sidebar)

- My content is fluid, so I can not assign a width

- According http://css.maxdesign.com.au/floatutorial/introduction.htm
you must set an explicit width on a floated elemented except img tags as
per the W3C (he references
http://www.w3.org/TR/CSS2/visuren.html#floats, but I can not find exact
statement). 

- Therefore my fluid content can not appear with in my markup, my fixed
width sidebar must appear first and be floated instead.

Does that sound right? Regardless of W3C I could not get my content to
remain fluid, come first in the markup and still allow my fixed-width
sidebar to float up beside it.

Thanks for any feedback.

Ben Davies


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*** 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations

2009-08-16 Thread Kepler Gelotte 
- To put my content first in the markup, my content needs to be floated (for
a following sidebar)
- My content is fluid, so I can not assign a width

 

You may want to try max-width on your main content. I'm not sure if that
will work for you since you didn't post a link.



Best regards,

Kepler Gelotte

Neighbor Webmaster, Inc.

156 Normandy Dr., Piscataway, NJ 08854

  www.neighborwebmaster.com

phone/fax: (732) 302-0904

 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***