[css-d] fluid layout - vertical
How can I tweak this website so that the bottom part of the site would be better visible on a widescreen laptop? The main area is a flash file and I suppose I can make it smaller, but are there other ideas for solutions? I have looked at Maxdesign's article on liquid layouts ( http://www.maxdesign.com.au/articles/liquid/), but my concern is height, not width... http://elizabethfarley.web.officelive.com/StoneTheater/index.html Thanks so much, -- Elizabeth Farley __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] fluid layout - vertical
How can I tweak this website so that the bottom part of the site would be better visible on a widescreen laptop? The main area is a flash file and I suppose I can make it smaller, but are there other ideas for solutions? I have looked at Maxdesign's article on liquid layouts ( http://www.maxdesign.com.au/articles/liquid/), but my concern is height, not width... http://elizabethfarley.web.officelive.com/StoneTheater/index.html Thanks so much, -- Elizabeth Farley __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout - vertical
Elizabeth Farley wrote:
How can I tweak this website so that the bottom part of the site would be
better visible on a widescreen laptop?
http://elizabethfarley.web.officelive.com/StoneTheater/index.html
Thanks so much,
I suppose that depends on what you mean by better visible.
Personally, I'd think /think/ white-space. Open it vertically --
widescreen, or not...
#wrapper {border:1px solid red;padding-top:50px;}
#navBar {border:1px solid red;margin-bottom:50px;}
#mainArea {border:1px solid red;margin-bottom:50px;}
Best,
~d
--
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout - vertical
On Mon, Aug 2, 2010 at 12:25 PM, David Laakso
da...@chelseacreekstudio.comwrote:
Elizabeth Farley wrote:
How can I tweak this website so that the bottom part of the site would be
better visible on a widescreen laptop?
http://elizabethfarley.web.officelive.com/StoneTheater/index.html
Thanks so much,
I suppose that depends on what you mean by better visible.
Personally, I'd think /think/ white-space. Open it vertically --
widescreen, or not...
#wrapper {border:1px solid red;padding-top:50px;}
#navBar {border:1px solid red;margin-bottom:50px;}
#mainArea {border:1px solid red;margin-bottom:50px;}
Best,
~d
--
http://chelseacreekstudio.com/
David,
I see what you are saying - spread out the elements on a vertical line, but
can I manipulate the css (ie using a percentage like you would on widths) to
make it fluid based on the height of the screen? So that the taller the
screen the more spread out the elements and the shorter the screen the
closer the elements (no scrolling vertically or horizontally)?
Is there a way to do that? Should I be spending more time googling this
concept? Sorry if I am asking a question with an obvious answer
--
Elizabeth Farley
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout - vertical
Elizabeth Farley wrote:
Elizabeth Farley wrote:
How can I tweak this website so that the bottom part of the site would be
better visible on a widescreen laptop?
http://elizabethfarley.web.officelive.com/StoneTheater/index.html
Thanks so much,
I suppose that depends on what you mean by better visible.
Personally, I'd think /think/ white-space. Open it vertically --
widescreen, or not...
#wrapper {border:1px solid red;padding-top:50px;}
#navBar {border:1px solid red;margin-bottom:50px;}
#mainArea {border:1px solid red;margin-bottom:50px;}
Best,
~d
--
http://chelseacreekstudio.com/
David,
I see what you are saying - spread out the elements on a vertical line, but
can I manipulate the css (ie using a percentage like you would on widths) to
make it fluid based on the height of the screen? So that the taller the
screen the more spread out the elements and the shorter the screen the
closer the elements (no scrolling vertically or horizontally)?
Is there a way to do that? Should I be spending more time googling this
concept? Sorry if I am asking a question with an obvious answer
I am not sure that /percent/ will work for creating vertical spacing of
horizontal gutters. Nevertheless, and either way, yes -- it is possible
-- to manipulate height [ and width ] depending on user screen width
[dpi], and or media, using CSS3 media queries [1]. I do not see any
big deal in that media queries is /not/ supported in IE 6/7/8 [but your
client may]: It is promised for the forthcoming IE 9. For wide-screen
see the final example [2] at max-width 1300.
Best,
~d
w3c media queries
[1] http://www.w3.org/TR/css3-mediaqueries/
responsive web design
[2] http://www.alistapart.com/articles/responsive-web-design/
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout - vertical
On Aug 3, 2010, at 5:11 AM, Elizabeth Farley wrote: but can I manipulate the css (ie using a percentage like you would on widths) to make it fluid based on the height of the screen? So that the taller the screen the more spread out the elements and the shorter the screen the closer the elements (no scrolling vertically or horizontally)? That wouldn't work at all :-). percentage values for _vertical_ padding/margin are computed based on the width of the element. In other words, the wider the screen, the taller the vertical padding would be (assuming the width of the elements is adjusted depending on the screen width. see http://www.w3.org/TR/CSS21/box.html#propdef-padding Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
