Topic: (I hope..) a simple cSS question - 'table' layout Pages that link to <a href="https://ozoneasylum.com/backlink?for=11077" title="Pages that link to Topic: (I hope..) a simple cSS question - &amp;#039;table&amp;#039; layout" rel="nofollow" >Topic: (I hope..) a simple cSS question - &#039;table&#039; layout\

 
Author Thread
Kaniz
Bipolar (III) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 10-16-2003 07:30 Edit Quote

http://65.50.81.109/tbs/template.asp

I am trying to get it so the left nav-bar extends its black background all the way down to the footer, regardless of the lenght of the content .. yet this seemingly simple problem has me stumped, can anyone help?

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 10-16-2003 08:26 Edit Quote

I'm afraid to say that I don't think this can be done with CSS currently. Give it some time to see if anyone disagrees with me, though.

[edit: actually, yeah, it can be done in a few different ways. None of them are good, in my opinion. Among your options:

- float the content to the right, instead of the sidebar to the left.
- put both content and sidebar inside a relatively positioned div with left:0, top:0, and absolutely position the sidebar, while simultaneously giving the content a left margin to leave room for it.

Both of these solutions then requires that you make use of background colors or vertically-repeating background images to make the blackness stretch all the way.]

[This message has been edited by Slime (edited 10-16-2003).]

Kaniz
Bipolar (III) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 10-16-2003 13:53 Edit Quote

as much as I wanted to avoid it, opt'd for a table-layout for the time being. Just cleaned up/re-did the old template by hand which somehow, managed to use like, 12 different table cells and a zillion small graphic files and drove me NUTS when using it.

i'll fiddle around with your suggestions and see if I can get it working .. would like to get all my stuff over to a CSS layout

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-16-2003 17:10 Edit Quote

Yep, you'd think that would be a simple thing to do but from what I gathered back when I was trying to do the same thing it's just not possible with CSS.

What I'd suggest would be to make the page take up the entire broswer window. Then you could specify the background color of the page as black and float that white content div on the right like Slime suggested. That could be easily done and I think it would look a lot better to have the entire page black anyway.

:::11oh1:::

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 10-16-2003 21:18 Edit Quote

Yup, this is a tough one. Don't think we'll be able to find a quick CSS solution for this but...

I know a way to approximate the effect, but it requires a structural hack. What you do is nest both the content div and sidebar div in a "container" div, set the background of the container div to black, and then set the background of the content div to white. This way, the container will expand with the content, making the black area expand with it.

Once again, this isn't a perfect solution, but it's as close as I've come.



Kaniz
Bipolar (III) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 10-16-2003 22:22 Edit Quote

Hrmm, was thinking. - What about using javascript?

once the page is loaded, get the height of the 'content' ID and then set the height of the navbar to the height of the contentID.

pesducode

- on page load/reload/re-size
-- x=contentID.height
-- navbarID.height=x;
?




twItch^
Maniac (V) Mad Scientist

From: the west wing
Insane since: Aug 2000

IP logged posted posted 10-17-2003 06:41 Edit Quote

Damn nay-sayers.

Yes, it can be done with CSS--and rather easily. Here's how:

Step one, make a box to contain everything (in your case, you want it to be 740px for some reason). The area is set with a background color of #000 because you'll want the left side to reach the bottom, and appear black. The right side will be defined as #fff.

code:
#big_box { width : 740px; background : #000; }


Next, make the box for the left-hand stuff, which you want to be 153px.

code:
#left_side { width : 153px; float : left; }


Finally, make the content area on the right, which you have defined as a shady 500px. I would suggest using the rest of that 740px, putting it at 587px, which I will use for the purposes of this example. Note the background color.

code:
#right_side { width : 587px; float : right; background : #fff;}


Now, link them together, nesting the left and right side divs into the big box div.

code:
<div id="big_box"><div id="left_side">---left side content--</div><div id="right_side">--right side content--</div></div>


Notice the lack of line breaks between divs. That is important, or you'll get a bit of white space in some browsers.

-S

[This message has been edited by twItch^ (edited 10-17-2003).]

trib
Paranoid (IV) Inmate

From: Den Haag, Netherlands
Insane since: Sep 2002

IP logged posted posted 10-17-2003 07:31 Edit Quote

Blah .. ignore me I was rambling and suddenly realised it ... unfortunately "delete-post" only works for forum moderators ...


[This message has been edited by trib (edited 10-17-2003).]

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-17-2003 16:37 Edit Quote

Man, his example is gone but I don't think yours would work Steve. He has a button or something at the bottom of his left div that he wants to always be at the bottom near where the content div ends.

I think.

:::11oh1:::

twItch^
Maniac (V) Mad Scientist

From: the west wing
Insane since: Aug 2000

IP logged posted posted 10-17-2003 21:16 Edit Quote

Even then, krets, just make another div at the bottom which uses a background image of black on the left, white on the right, left-align, put the image in.

OR, you can make a new id to do relative positioning to stick an image down at the bottom. Totally doable.

-S

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 10-17-2003 21:18 Edit Quote

Pssst, Krets... that's twItch^


twItch^: Heh, that's the method I just described, although I thank you for elaborating. And no, it wouldn't work if he wanted a button at the bottom of the sidebar

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-17-2003 21:24 Edit Quote

Yes, but I know who the man behind the curtain is...

:::11oh1:::

twItch^
Maniac (V) Mad Scientist

From: the west wing
Insane since: Aug 2000

IP logged posted posted 10-17-2003 23:19 Edit Quote

Of course it would work. It just takes an extra id for positioning.

If you can do it in tables, you can do it in css. That's it's frigging point.

Fugging non-believers.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu