Topic: CSS Postioning Question

I was wondering if any one can help me out with something I am trying to do with positioning "boxes".

I have a left column navigation that is generated based on user access rights. I wont bore you with the code logic here.  What I am trying to do its this.

Say I have a default navigation menu box, (not logged in), on the left hand side of the page that that has the following rules applied to it:

#navBox1 {
  position:absolute;
  width:150px;
  top:100px;
  left:20px;
  border:1px solid black;
  background-color:#C8CCD0;
  padding:0px;
  z-index:2;
}

And I want to add another navigation menu box just below it that has a 20 px space between the bottom part of "navBox1", and the top of the new navigation menu box, call it "navBox2".  The height of "navBox1" will adjust depending if the user is logged in or not.  When the user logs in, "navBox2" should appear just below "navBox1" with a 20px pad between them.  "navBox2" will also adjust its size and contents depending on the users level of access.  To further complicate matters, I also need to have a 3rd "navbox" below "navBox2" that will also adjust its height automatically based on the users level of access.

The logical end of the menu building is in place.  The markup was all done with tables. (I know, ugg!)  I am now trying to go to the next level and update it to today's "web standards" and make it a CSS site thats XHTML 1.0 strict.

Any takers?  I would greatly appreciate it.  thanks in advance!

Re: CSS Postioning Question

Create a container called #nav, then create classes .box1 and .box2 in that id. The only attributes #nav should have are containing elements (width, padding, margin...)

Re: CSS Postioning Question

ok, I will give that a whirl..  TY!

Re: CSS Postioning Question

hmmm.  Can't seem to get it to work.  would the style container be #nav .box1 {....}  or #nav>.box1 {...}

5 (edited by Paul 2005-01-20 18:54)

Re: CSS Postioning Question

Assuming divs

<div id="nav>
   <div class="box1">content</div>
   <div class="box2">content</div>
   <div class="box3">content</div>
</div>

Set the positioning on #nav
Put the borders and everything else on .box1, .box2, .box3
Give .box1, .box2  bottom margins to space them.

EDIT
Put the width on #nav as well and padding and borders on .box1 etc.

Why are you using absolute positioning for this?

Re: CSS Postioning Question

Paul wrote:

Assuming divs

Yes divs are being used

Why are you using absolute positioning for this?

I have a class called contentBox thats position is relative and has a z-index greater than the nav box.  I use this class for each content box created.  Actually,  a main content box, and a footer box (e.g. like the one at the bottom of the page). like this.

.contentBox {
   position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
   width:auto;
   margin: 0 0 20px 170px;
   border:1px solid black;
   background-color:white;
   padding:0px;
   z-index:3;
}

To be completely honest, I got this class from bluerobot.com  I am still new to using CSS for postioning elements.  Only used it in the past for colors and padding.  The way I learn is from example, then reading the specs.  I also have picked up a couple of books in the past couple of days, and I am just scratching the surface.

Your example is what I eventually did.  I was reading into things way to much.  If you know of a better way to achieve this.  I am all ears and eyes wink .  I really do appreciate all the feedback and help I get from here.  Being that Web Auth/dev is a hobby for me, I can't afford to take any formal education on this subject.  Having a wife and kids adds to the time constraints.  Its a simple two-column layout with navigation boxes on the left and content on the right.  The resources I found on the web helped some, but I wanted to come up with my own "look-and-feel".

Thanks again!

Re: CSS Postioning Question

Take a look at http://www.bwongar.com/ - Is that kind of the format you're looking for?

8 (edited by Paul 2005-01-20 20:14)

Re: CSS Postioning Question

If absolute positioning is doing the job thats fine. The other way was using floats. One tip. If you trek around most of the css geek sites and the examples held up as good design they all have one thing in common, they are all fixed width. CSS fixed width layouts are dramatically easier than fluid width layouts.

A good example of a two column layout that can be adapted to any look you like is here
http://www.projectseven.com/tutorials/c … /index.htm
You even get the sample files to download.

9 (edited by buzzkill 2005-01-20 21:01)

Re: CSS Postioning Question

Bwongar.com wrote:

Take a look at http://www.bwongar.com/ - Is that kind of the format you're looking for?

Yes, but not fixed width.  Nice layout btw big_smile


Paul wrote:

A good example of a two column layout that can be adapted to any look you like is here
http://www.projectseven.com/tutorials/c ? /index.htm
You even get the sample files to download.

I have a couple of Al's books.  He seems to be a big fan of DW.  I have DW4 Magic, and his e-book, I forget the title.  both are geared towards using Dreamweaver so he uses the term "layer" for div layout objects. not to be confused with NS <layer>.  DW4 Magic does not really get into using CSS for layout other than changing the look (colors and fonts).  Most of the book revolves around DHTML.  this is where the term layer gets used a lot.  His second book starts off with a table design and using CSS inlue of JS for rollovers.  and then goes into how to make the same page using CSS.  Just after my last post I remebered this book.  I never got into the CSS-P sections. 

BTW, he has some very tasteful artistic layouts.  My wife is an artist and loves his work. Who said CSS layouts boxy? wink

I guess the reason I steered away from floats was the problems I have read about with IE.

Again, I can't thank the both of you enough!

Re: CSS Postioning Question

have a look at http://dragonfighter.gary13579.info/cms.php floats, 3 columns, header, footer works fine in firefox and ie big_smile

Re: CSS Postioning Question

hahaha big_smile hmm that looks vaguely familiar wink

12

Re: CSS Postioning Question

I second Paul's suggestion of using floats.  There's also no need for an extra div (though I'd probably use one for simplicity).  Anyhoo, I whipped up a quickie version of the basic layout you are talking about.   You will notice that both of the nav divs are given float: left, and the bottom one is given clear: left as well.  That forces it to fall under the first one.  You'll also see that the first nav div gets a 20px bottom margin like you mentioned.

13 (edited by Bwongar.com 2005-01-21 01:42)

Re: CSS Postioning Question

Excellent example, roo. This is a very powerful layout scheme as just changing the CSS file can make it look drastically different. That's the power of CSS.

It's also useful to note that they don't line up the same in IE and Firefox.  Not the problem of the author, but of Microsoft. smile

14

Re: CSS Postioning Question

The difference in the way they line up is because Gecko calculates the top margin of box1 from the top of main not the top of the screen. I had that problem with profile and admin. The way around it is to put a wrapper div around the whole lot and give that a top margin instead.

For you next exercise buzzkill put main before the floats in the markup and give the left column a full height background colour.

15

Re: CSS Postioning Question

Paul wrote:

The difference in the way they line up is because Gecko calculates the top margin of box1 from the top of main not the top of the screen. I had that problem with profile and admin. The way around it is to put a wrapper div around the whole lot and give that a top margin instead.

For you next exercise buzzkill put main before the floats in the markup and give the left column a full height background colour.

Good info!  There's another way around that, however, that doesn't require an extra div.

Set the margin-top to both #navBox1 and #main to 0, and set the body to have padding-top of 12px.  The body itself is, afterall, just another container.  smile

Re: CSS Postioning Question

First thing, this seems to be a hot topic yikes  Just like anything in life there is more than one way to skin a cat.

roo:  I take what makes navbox2 drop below navbox1 is the clear: left; property.  Thanks for the very simple example.  The engineer in me wanted to make things a lot harder than they needed to be.

Paul wrote:

For you next exercise buzzkill put main before the floats in the markup and give the left column a full height background colour.

I am all over it smile

I like the idea of the wrapper because I am finding it easier to add other elements into the page and still keep scale.  Although I still have found I needed to work around IE...  like italic text breaking a float.  Whats up with that.

17

Re: CSS Postioning Question

Yup, it's the clear:left that does it.

If there's one bit of advice I can offer when it comes to working with CSS it's to keep it as simple as you possibly can.  It's easy to get very complicated very quickly with CSS, and it tends to cause trouble when you do.  smile

Re: CSS Postioning Question

roo wrote:

It's easy to get very complicated very quickly with CSS, and it tends to cause trouble when you do.  smile

Yeah tell me about it.  I was fiddling with a design last night.  I thought I was all set.  It looked great in FF.  Then I looked at it in IE.  This is when I found out that IE does not like/support the min-width or min-height property.  I made a separate Style sheet for IE that sets the width of a block level element i.e. <p> that was inside a div = to the value I set for min-width of the div on my main style sheet.   This is just a matter of preference. I like to keep my bug fixes in a separate file so I can keep track of them.

Thanks again, hopefully someday we wont have to worry too much about fixes or backwards compatibility to browsers that where around when the 386 was the king CPU. I guess it really matters who your target audience is.  If I know that my audience tends to be on the cutting edge of technology.  I won?t even bother to try and support NS4 or IE4. I know people have a lot of beef with how the browser makers follow the WC3 specs.  In their defense, one of my job responsibilities is to read and interoperate specifications for large scale construction projects, and what it all comes down to is how the person using the spec. interoperates it.  This is why I have to submit items to the authors, in this case consulting engineers, for approval.  If I don?t meet the intent of the specification, I have to make the required corrections and resubmit. 

Wouldn?t be nice if browsers had to be reviewed by the WC3 for compliance before they are release to the public. smile