On Sat, Mar 10, 2012 at 12:55 AM, David Thorp <[email protected]> wrote: > Hi again Vince, > > Ok, well as recommended by you in the other thread, I've started over, and in > this case I'm now using your code below as a starting point. As I noted in a > previous reply, it seems to be right on the mark... except I've run across > one little snag... > > See here: > http://davidthorp.name/published/browser-0d.html > ...and the corresponding css here: > http://davidthorp.name/published/css/browser-0d.css > > I've done as you described here: > >> You don't necessarily have to make the left sidebar 100%-30px. If you set >> the >> top bar to position:absolute, other elements will go behind it. So, you can >> make the left sidebar 100% height. 30px of it will be obscured at the top, >> but >> you can fix that with a margin on its first child. > > > But the problems now begin when I add "overflow-y: scroll;" to my sidebar. > > It does manage to scroll everything perfectly except for the fact that the > top 30 pixels of the scroll bar are obscured by the top bar... and so it just > looks a little weird. > > I've tried a few things, without success. I'd very much like to know how to > get the scroll bar positioned correctly.
I figured out how to do it using absolute positioning. Rather than set a vertical size on the elements, I just set their top and bottom positions. The top position is the height of the toolbar and the bottom is 0. It seems to work fine in all of the relevant desktop browsers. http://www.ghodmode.com/experiments/sidebar/ -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com > Note: I've aded "opacity: 0.8" to my top bar (toolbar) so you can see the > scroll bar behind it. In the finished version of this there will be no > transparency (ie. it'll be "opacity: 1;"). The problem isn't the fact that > it shows behind the toolbar. The problem is just that it's not positioned > correctly. > > Thanks again for your help! > > David. > > > > > On 01/03/2012, at 1:54 PM, Ghodmode wrote: > >> On Sun, Feb 26, 2012 at 3:58 PM, David Thorp >> <[email protected]> wrote: >>> Greetings all... >>> >>> I'm relatively new to both CSS, and this list, but I've had some very >>> positive experiences on other lists for other programming tools, so I'm >>> hoping this list will be similar :) >>> >>> I've been learning css from the w3schools website, which seems to be pretty >>> good as a crash course, but I'm having some difficulties getting >>> positioning and dimensions of objects to work the way I want. I'm not sure >>> if this is because I don't properly understand the rules and concepts, or >>> I'm just getting syntax or something simple like that wrong. >>> >>> If anyone can help me I'd be grateful... >>> >>> I have a number of <div> objects arranged in various positions: >>> >>> 1. A toolbar across the top that is the full width of the window >>> (width:100%) and 30px in height. >>> 2. A sidebar down the left hand side, that starts under the toolbar (so the >>> top border of it is 30px down the page). It's 138 px wide. >>> 3. Then a content area takes up the rest of the window. >>> >>> >>> I want each of these objects to take up the full height and width of the >>> window (wherever a height and width is not set), regardless of the size of >>> the window, without ever going over the edges of the window. I will use >>> the overflow property to generate scroll bars if the content within each of >>> these objects is larger than the size of the window allows. >>> >>> So this means that: >>> 1. the sidebar's height essentially needs to be (100%-30px). >>> 2. the content area's height needs to be (100%-30px), and its width needs >>> to be (100%-138px). >>> >>> If I set the height of these two objects to auto, then they only go as far >>> down the window as there is content in them, which if that's less than >>> there is room in the window, then they don't reach the bottom of the window. >>> >>> If I set the heights to be 100% then they stretch beyond the height of the >>> window by exactly the 30 pixels of the toolbar, and they force the window >>> scroll bars to appear - no matter what size i make the window. >>> >>> I understand of course that I can't do this: >>> >>> object { >>> height:100%-30px >>> } >>> >>> (well at least it's my understanding i can't do that, and I tried it and it >>> didn't work, but feel free to correct me if I'm wrong there somehow). >>> >>> I'm also having some (different) challenges with the width of the content >>> area, but let's come back to that - one thing at a time. >>> >>> Clearly I'm missing something... What's the best practice for getting the >>> heights the way I want them? >> >> It's difficult to define the _best_ practice. You'll quickly find out that >> there are many ways to do anything you might want to do. >> >> You don't necessarily have to make the left sidebar 100%-30px. If you set >> the >> top bar to position:absolute, other elements will go behind it. So, you can >> make the left sidebar 100% height. 30px of it will be obscured at the top, >> but >> you can fix that with a margin on its first child. >> >> The following is demonstrated at http://www.ghodmode.com/testing/dthorp >> >> HTML: >> <!doctype html> >> <html lang="en"> >> <head> >> <meta charset="utf-8"> >> <title>D. Thorp Sidebar</title> >> >> <link rel="stylesheet" type="text/css" href="style.css"> >> </head> >> <body> >> <div class="top_bar"> >> <p>This is the top bar</p> >> </div> >> <div class="left_bar"> >> <p>this is the left sidebar</p> >> </div> >> <div class="content"> >> <p>Lots of "Lorem Ipsum ..." goes here</p> >> </div> >> </body> >> </html> >> >> CSS: >> /* Setting a height on the body and html elements is important. Without >> that, >> * vertical heights on other elements don't work. >> */ >> body, html { >> height: 100%; >> margin: 0; >> } >> >> body { >> background-color: #bbf; >> } >> >> /* position:absolute on the top_bar allows other elements to go behind it. >> */ >> div.top_bar { >> width: 100%; >> height: 30px; >> position: absolute; >> background-color: #bfb; >> } >> >> /* Since the top_bar has position:absolute, the left_bar can be height:100% >> * without worrying about clearing the top bar. >> */ >> div.left_bar { >> background-color: #fbb; >> height: 100%; >> float: left; >> } >> >> /* Since the left_bar now goes behind the top_bar, its contents could >> * potentially be obscured by the top bar. Setting a margin-top on the >> first >> * child of the left_bar makes sure this doesn't happen. >> * This couldn't be done using padding on the left_bar because that would >> make >> * the left_bar taller than 100% (by 30px) and force a scroll bar >> even if there >> * wasn't any real content taller than the window. >> */ >> div.left_bar *:first-child { >> margin-top: 30px; >> } >> >> /* The content area will go behind the top_bar, too. So, adding >> 30px padding to >> * the top makes sure content isn't obscured. >> * Here, padding is effective because we haven't set the height on the >> content >> * area. >> */ >> div.content { >> padding: 30px 1em 0; >> background-color: white; >> overflow: auto; >> } >> >> /* Setting the first level of children to float:left allows them to be next >> to >> * the side bar. Without this, block elements inside the content >> area would be >> * 100% wide and make the content area too wide to be next to the >> left_bar. It >> * would be forced below the left_bar. >> */ >> div.content > * { >> float: left; >> } >> >> -- >> Vince Aggrippino >> Ghodmode Development >> http://www.ghodmode.com >> >> >>> Thanks for any help! >>> >>> David. ______________________________________________________________________ css-discuss [[email protected]] 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/
