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-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/ __________________________________________________ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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/
