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.
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/
