Just to clarify, what I mean is, as soon as I add "resize:horizontal;" to the div.sidebar {}, it breaks.
On 11/03/2012, at 12:05 AM, David Thorp 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. > > 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...? > 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? > > 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/ ______________________________________________________________________ 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/