On Sat, Mar 10, 2012 at 9:05 PM, David Thorp <mailingli...@allaboutabundance.com> wrote: > Duh. Brilliant. Now that you present that, it's pretty obvious. Haha. > Thanks. > > But now we have another challenge. How do we make the sidebar horizontally > resizable, without disappearing behind the headerbar and content (or covering > them up)? ie. it needs to move the left edge of those as we move the right > edge of the sidebar.
That's a job for Javascript. > I spent a good couple of hours trying a few things this afternoon, and I've > tried a few more just now on your code... without success. :( > > The problem seems to be because the sidebar is positioned "absolute"-ly, > we have to set the content and headerbar to absolute positioning as well...? Yep. Well, not the headerbar, but the content and sidebar have to be positioned absolutely because we don't have any way to determine the remaining vertical space in the window after we subtract the height of the header. If you wanted to give the header a percentage height (like 5%) instead of a fixed height, you wouldn't need the absolute positioning. > There seems to be no way to make the left edge of the content and headerbar >relate to the (movable) right edge of the sidebar...? > > What do you think? Well, you would have to use Javascript to monitor the mouse position during throttled click and drag mouse events on the edge of the sidebar and use that information to resize the sidebar and the content area. Way off-topic for this list... and it makes my head hurt. On the other hand, if you just want to toggle the sidebar open or closed when clicking on a "grippy" -type thing, that would be much easier. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com > Gotta say, it's frustrating that CSS seems to be so unintuitive in some ways, > but I'm grateful for the likes of you to help. So thanks, yet again... > > David. > > > > > > On 10/03/2012, at 11:45 PM, Ghodmode wrote: > >> On Sat, Mar 10, 2012 at 12:55 AM, David Thorp >> <mailingli...@allaboutabundance.com> 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 >>>> <mailingli...@allaboutabundance.com.au> 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 [css-d@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 [css-d@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/
