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
>> <[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/
>
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
