Re: [css-d] Width 100% Question - 3rd Attempt
Troy,
Thanks for your input. I got to view it in 1024x768 and I see what you mean.
I'll heed your suggestions thanks!
Elli
--- On Wed, 1/20/10, Troy Harshman tmha...@gmail.com wrote:
From: Troy Harshman tmha...@gmail.com
Subject: Re: [css-d] Width 100% Question - 3rd Attempt
To: Elli Vizcaino elli...@yahoo.com
Cc: cs...@css-discuss.org
Date: Wednesday, January 20, 2010, 11:11 AM
I viewed your site in 1024x768 and
main sections were misaligned and I
did have to scroll horizontally. You won't want to
leave it like
that. All of the important stuff does fit within my screen,
so you're
fine with the widths. I would center all of the important
stuff and
then center the background image, and not force a width of
1600px
(which will likely produce a scroll). The important stuff
would be
viewable down to 1024 without a horizontal scroll, they
would just not
see all of the background. Those with higher
resolutions will see the
rest of the background. So basically, fixed width and the
amount of
background shown will depend on the resolution of the user.
Here is an
example of a site that does this - http://www.webdesignerwall.com/
On Wed, Jan 20, 2010 at 10:30 AM, Elli Vizcaino elli...@yahoo.com
wrote:
--- On Tue, 1/19/10, Alan Gresley a...@css-class.com
wrote:
From: Alan Gresley a...@css-class.com
Subject: Re: [css-d] Width 100% Question - 3rd
Attempt
To: Elli Vizcaino elli...@yahoo.com
Cc: cs...@css-discuss.org
Date: Tuesday, January 19, 2010, 8:29 PM
Elli Vizcaino wrote:
3rd attempt not sure why my email isn't
coming through
to this group.
Hello Gang,
I have the main wrapper of a site I'm coding
set to
width: 100% it contains a background image that
repeats
across width of page (repeat-x). However I notice
that when
I resize the viewport the wrapper's background
only goes
across to the width of the resized window and any
containers
set to a specified width within it, then look
off.
If I set a min-width to the wrapper then
everything
looks fine. I am wondering why min-width has to be
set in
order for the main wrapper to stretch across the
viewport. I
thought setting it to 100% would take care of that
just the
way a background image set to repeat-x on the body
element
does, no matter what size the viewport is.
For an idea of what I'm talking about, go
here: http://keithkemper.net/html/index.html
and resize your
window.
TIA,
Elli
Hello Elli,
Ok, take a look at this page (testing something
else),
http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr.htm
which has a white background on body and
blue
background on the html. This is normal for
XHTML.
Since from the specs on overflow [1] has this.
UAs must apply the 'overflow' property set on the
root
element to the viewport. When the root element is
an HTML
HTML element or an XHTML html element, and
that element
has an HTML BODY element or an XHTML body
element as a
child, user agents must instead apply the
'overflow'
property from the first such child element to the
viewport,
if the value on the root element is 'visible'.
In layman terms, the body is the *initial
containing block* for the wrapper. When you resize
the
window, the wrapper element overflows the
body
element into the HTML. So the 100% declared on the
wrapper
is still 100% of the width of the body
element. This
leaves you with two simple choices. You may need
to check
which works better the your page.
#kk_main_wrapper {
float:left;
}
or
body {
float:left;
}
On my test page, this works with the later.
1. http://www.w3.org/TR/CSS21/visufx.html#overflow
-- Alan http://css-class.com/
Alan,
Thanks for your response it helped give me a better
understanding as to why my wrapper although set to width
100% was not viewing as 100% once the window got resized.
I went ahead and tried out some of your suggestions and what
I discovered was that whether I applied the overflow
property to either the html, body or wrapper container
(which btw worked in having a 100% view of wrapper w window
resized) was that it removed the scroll bars from the
browser window, thus making it impossible for someone to
view the site as intended. Basically any one with a lower
resolution than what I had set as my min-width would not be
able to see the complete site. So in this case, I realize
I'm better off setting min-width so folks can at least get
scrollbars to view site if need be. Unless you know of a
way, that I can apply overflow hidden so my wrapper
stretches across window, whether resized or not and the
scroll bars can remain intact?
Elli
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css
Re: [css-d] Width 100% Question - 3rd Attempt
--- On Tue, 1/19/10, Alan Gresley a...@css-class.com wrote:
From: Alan Gresley a...@css-class.com
Subject: Re: [css-d] Width 100% Question - 3rd Attempt
To: Elli Vizcaino elli...@yahoo.com
Cc: cs...@css-discuss.org
Date: Tuesday, January 19, 2010, 8:29 PM
Elli Vizcaino wrote:
3rd attempt not sure why my email isn't coming through
to this group.
Hello Gang,
I have the main wrapper of a site I'm coding set to
width: 100% it contains a background image that repeats
across width of page (repeat-x). However I notice that when
I resize the viewport the wrapper's background only goes
across to the width of the resized window and any containers
set to a specified width within it, then look off.
If I set a min-width to the wrapper then everything
looks fine. I am wondering why min-width has to be set in
order for the main wrapper to stretch across the viewport. I
thought setting it to 100% would take care of that just the
way a background image set to repeat-x on the body element
does, no matter what size the viewport is.
For an idea of what I'm talking about, go here:
http://keithkemper.net/html/index.html and resize your
window.
TIA,
Elli
Hello Elli,
Ok, take a look at this page (testing something else),
http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr.htm
which has a white background on body and blue
background on the html. This is normal for XHTML.
Since from the specs on overflow [1] has this.
UAs must apply the 'overflow' property set on the root
element to the viewport. When the root element is an HTML
HTML element or an XHTML html element, and that element
has an HTML BODY element or an XHTML body element as a
child, user agents must instead apply the 'overflow'
property from the first such child element to the viewport,
if the value on the root element is 'visible'.
In layman terms, the body is the *initial
containing block* for the wrapper. When you resize the
window, the wrapper element overflows the body
element into the HTML. So the 100% declared on the wrapper
is still 100% of the width of the body element. This
leaves you with two simple choices. You may need to check
which works better the your page.
#kk_main_wrapper {
float:left;
}
or
body {
float:left;
}
On my test page, this works with the later.
1. http://www.w3.org/TR/CSS21/visufx.html#overflow
-- Alan http://css-class.com/
Alan,
Thanks for your response it helped give me a better understanding as to why my
wrapper although set to width 100% was not viewing as 100% once the window
got resized. I went ahead and tried out some of your suggestions and what I
discovered was that whether I applied the overflow property to either the html,
body or wrapper container (which btw worked in having a 100% view of wrapper w
window resized) was that it removed the scroll bars from the browser window,
thus making it impossible for someone to view the site as intended. Basically
any one with a lower resolution than what I had set as my min-width would not
be able to see the complete site. So in this case, I realize I'm better off
setting min-width so folks can at least get scrollbars to view site if need be.
Unless you know of a way, that I can apply overflow hidden so my wrapper
stretches across window, whether resized or not and the scroll bars can remain
intact?
Elli
__
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] Width 100% Question - 3rd Attempt
I viewed your site in 1024x768 and main sections were misaligned and I
did have to scroll horizontally. You won't want to leave it like
that. All of the important stuff does fit within my screen, so you're
fine with the widths. I would center all of the important stuff and
then center the background image, and not force a width of 1600px
(which will likely produce a scroll). The important stuff would be
viewable down to 1024 without a horizontal scroll, they would just not
see all of the background. Those with higher resolutions will see the
rest of the background. So basically, fixed width and the amount of
background shown will depend on the resolution of the user. Here is an
example of a site that does this - http://www.webdesignerwall.com/
On Wed, Jan 20, 2010 at 10:30 AM, Elli Vizcaino elli...@yahoo.com wrote:
--- On Tue, 1/19/10, Alan Gresley a...@css-class.com wrote:
From: Alan Gresley a...@css-class.com
Subject: Re: [css-d] Width 100% Question - 3rd Attempt
To: Elli Vizcaino elli...@yahoo.com
Cc: cs...@css-discuss.org
Date: Tuesday, January 19, 2010, 8:29 PM
Elli Vizcaino wrote:
3rd attempt not sure why my email isn't coming through
to this group.
Hello Gang,
I have the main wrapper of a site I'm coding set to
width: 100% it contains a background image that repeats
across width of page (repeat-x). However I notice that when
I resize the viewport the wrapper's background only goes
across to the width of the resized window and any containers
set to a specified width within it, then look off.
If I set a min-width to the wrapper then everything
looks fine. I am wondering why min-width has to be set in
order for the main wrapper to stretch across the viewport. I
thought setting it to 100% would take care of that just the
way a background image set to repeat-x on the body element
does, no matter what size the viewport is.
For an idea of what I'm talking about, go here:
http://keithkemper.net/html/index.html and resize your
window.
TIA,
Elli
Hello Elli,
Ok, take a look at this page (testing something else),
http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr.htm
which has a white background on body and blue
background on the html. This is normal for XHTML.
Since from the specs on overflow [1] has this.
UAs must apply the 'overflow' property set on the root
element to the viewport. When the root element is an HTML
HTML element or an XHTML html element, and that element
has an HTML BODY element or an XHTML body element as a
child, user agents must instead apply the 'overflow'
property from the first such child element to the viewport,
if the value on the root element is 'visible'.
In layman terms, the body is the *initial
containing block* for the wrapper. When you resize the
window, the wrapper element overflows the body
element into the HTML. So the 100% declared on the wrapper
is still 100% of the width of the body element. This
leaves you with two simple choices. You may need to check
which works better the your page.
#kk_main_wrapper {
float:left;
}
or
body {
float:left;
}
On my test page, this works with the later.
1. http://www.w3.org/TR/CSS21/visufx.html#overflow
-- Alan http://css-class.com/
Alan,
Thanks for your response it helped give me a better understanding as to why
my wrapper although set to width 100% was not viewing as 100% once the
window got resized. I went ahead and tried out some of your suggestions and
what I discovered was that whether I applied the overflow property to either
the html, body or wrapper container (which btw worked in having a 100% view
of wrapper w window resized) was that it removed the scroll bars from the
browser window, thus making it impossible for someone to view the site as
intended. Basically any one with a lower resolution than what I had set as my
min-width would not be able to see the complete site. So in this case, I
realize I'm better off setting min-width so folks can at least get scrollbars
to view site if need be. Unless you know of a way, that I can apply overflow
hidden so my wrapper stretches across window, whether resized or not and the
scroll bars can remain intact?
Elli
__
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-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] Width 100% Question - 3rd Attempt
3rd attempt not sure why my email isn't coming through to this group. Hello Gang, I have the main wrapper of a site I'm coding set to width: 100% it contains a background image that repeats across width of page (repeat-x). However I notice that when I resize the viewport the wrapper's background only goes across to the width of the resized window and any containers set to a specified width within it, then look off. If I set a min-width to the wrapper then everything looks fine. I am wondering why min-width has to be set in order for the main wrapper to stretch across the viewport. I thought setting it to 100% would take care of that just the way a background image set to repeat-x on the body element does, no matter what size the viewport is. For an idea of what I'm talking about, go here: http://keithkemper.net/html/index.html and resize your window. TIA, Elli __ 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] Width 100% Question - 3rd Attempt
Elli Vizcaino wrote:
3rd attempt not sure why my email isn't coming through to this group.
Hello Gang,
I have the main wrapper of a site I'm coding set to width: 100% it contains a
background image that repeats across width of page (repeat-x). However I
notice that when I resize the viewport the wrapper's background only goes
across to the width of the resized window and any containers set to a
specified width within it, then look off.
If I set a min-width to the wrapper then everything looks fine. I am
wondering why min-width has to be set in order for the main wrapper to
stretch across the viewport. I thought setting it to 100% would take care of
that just the way a background image set to repeat-x on the body element
does, no matter what size the viewport is.
For an idea of what I'm talking about, go here:
http://keithkemper.net/html/index.html and resize your window.
TIA,
Elli
Hello Elli,
Ok, take a look at this page (testing something else),
http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr.htm
which has a white background on body and blue background on the
html. This is normal for XHTML. Since from the specs on overflow [1]
has this.
UAs must apply the 'overflow' property set on the root element to the
viewport. When the root element is an HTML HTML element or an XHTML
html element, and that element has an HTML BODY element or an XHTML
body element as a child, user agents must instead apply the 'overflow'
property from the first such child element to the viewport, if the value
on the root element is 'visible'.
In layman terms, the body is the *initial containing block* for the
wrapper. When you resize the window, the wrapper element overflows the
body element into the HTML. So the 100% declared on the wrapper is
still 100% of the width of the body element. This leaves you with two
simple choices. You may need to check which works better the your page.
#kk_main_wrapper {
float:left;
}
or
body {
float:left;
}
On my test page, this works with the later.
1. http://www.w3.org/TR/CSS21/visufx.html#overflow
--
Alan http://css-class.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/
