Help from the CSS savvy?

***MedusasOwl*** · 11-08-2007, 05:59 PM

We have a lot of very clever and web savvy members, so I take advantage.

Here is my problem.

I want to make both the menu and the quote on each page of Blue Gorgon remain stationary when you scroll, so you can always see them alongside the long center as you read. This way, it looks nice and people don't have to scroll back up to use the menu. I've been working on this, and I can make the menu stay... but then the quote box vanishes or does weird things. I've been pretty much learning CSS as I go with BG, and am apparently not savvy enough to solve this problem with google-fu alone.

If I use {position:absolute;} or {position:fixed;} on the menu, the center column scoots left underneath it. If I{ float: center;} the center column, everything looks right *except* that the quote box, the third column, goes awol. So even if I try to use fixed or absolute on the third column, who will know? It vanishes or goes crazy! If I float it left, it hovers in the same spot as the menu, and any other float it's gone. It's frustrating because the menu flows so beautifully, but the quote column... argh.

Anybody know how I can get both the first column -the menu- and the third column -the quote- to remain fixed on my site while keeping the 3 column layout smooth and symmetrical?

**Nate** · 11-08-2007, 06:26 PM

Try this:

http://www.dynamicdrive.com/dynamici...staticmenu.htm

***ctrlfreq*** · 11-08-2007, 07:01 PM

The fixed will work fine, but not in all browsers... to pull it off, you need to do the following:

1) Move the col3 div above the col2 div. The divs that are fixed need to be in the DOM before the scrolling one, otherwise they'll disappear (technically, they're there, but not visible due to being off the page)

2) Set the locations of the boxes in css, using the left attribute to define the location of the quote box like so:

#col1
{
position: fixed;
width: 20%;
background-color: #99CCFF;filter:alpha(opacity=75);opacity:.75;
margin-left: 3%;
border-color: green;
border-style: outset;
border-width: 4px;
display: block;

}

#col3
{
left: 76%;
position: fixed;
width: 20%;
background-color: #99CCFF;filter:alpha(opacity=75);opacity:.75;
border-color: green;
border-style: outset;
border-width: 4px;
display: block;
}

#col2
{
top: 0;
width: 48%;
margin: auto;
background-color: #99CCFF;filter:alpha(opacity=95);opacity:.95;
border-color: green;
border-style: outset;
border-width: 4px;
}

***MedusasOwl*** · 11-09-2007, 04:58 AM

Hmm, that makes sense but still having the same problem... The absolute tag is supposed to be the IE version of fixed, but that doesn't seem to be working at all tonight so who knows. I'm using the contact page as a test for it.

http://www.bluegorgon.com/contact.htm

I may resort to Java if I can't get the CSS version to work, but I think it flows a lot smoother in CSS. Less jerky and abrupt. If it just wouldn't eat the other box, I'd be all set!

Thanks again, this is making me a bit crazy!

***ctrlfreq*** · 11-09-2007, 01:31 PM

Originally Posted by MedusasOwl

Hmm, that makes sense but still having the same problem...

The quote column disappearing is because you've got it under the center column. In the HTML (not the style definition), literally move the entire col3 div just above the col2 div, and it will show up.

Originally Posted by MedusasOwl

The absolute tag is supposed to be the IE version of fixed, but that doesn't seem to be working at all

No, the position: absolute is a completely different thing than position: fixed, it's just that pre-IE7, position: fixed was not supported by IE (even though it was in the CSS standard when IE4 was released -- just another example of MS not getting it right).

That said, it can be made to work like position: fixed, but you have to do a few things.

1) Add the following line just above your <HTML> tag to put IE < 7 into *LOL* "standards compliance mode" (note: this should ALWAYS be on EVERY page you make to be valid HTML anyway).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2) Add the following to your style definitions (this creates a canvas to absolute position on, and the margin is to keep from having a second set of scroll bars for the div)

html, body {
height: 100%;
overflow: auto;
margin: 0px;
}

3) Update the style for cols 1 & 3 as follows (modified the positioning properties, as well as changing the margin-left to a literal left in col1):

#col1 {
position: absolute;
width: 20%;
background-color: #99CCFF;filter:alpha(opacity=75);opacity:.75;
left: 3%;
border-color: green;
border-style: outset;
border-width: 4px;
display: block;
}

#col3 {
left: 76%;
position: absolute;
width: 20%;
background-color: #99CCFF;filter:alpha(opacity=75);opacity:.75;
border-color: green;
border-style: outset;
border-width: 4px;
display: block;
}

***MedusasOwl*** · 11-09-2007, 04:24 PM

OH, ok, I misunderstood what to move, there it is!

Puts quite a gap above col 2 but worth the nice smooth fixed side boxes. Very nice, thank you!

***ctrlfreq*** · 11-09-2007, 04:53 PM

Originally Posted by MedusasOwl

OH, ok, I misunderstood what to move, there it is!

Puts quite a gap above col 2 but worth the nice smooth fixed side boxes. Very nice, thank you!

The gap above col2 is because of the extra markup at the end of the line that has col3 on it. Look for the following:

Thomas Berger </div></center> 

and delete the so it just reads

Thomas Berger </div></center>

and your gap will disappear.

Also, make sure you add the doctype and the "html, body" style tags, and change all the positions from "fixed" to "absolute" so the fixed menus will work in IE < 7

***MedusasOwl*** · 11-09-2007, 05:48 PM

There we go, I was fixing the other pages and noticing that they were even when just the contact one wasn't. It's always some little detail I miss. Thank you again! I got it now.

***ctrlfreq*** · 11-09-2007, 05:53 PM

No problem... I know how confusing doing CSS based layout can be, especially once you start figuring in all the different browsers, and their varying levels of adherence to standards

***MedusasOwl*** · 11-09-2007, 06:57 PM

It IS crazy, I've been getting the hang of it but still... yeash.

The code doesn't like a java graphic on my index, but I'll just change out the graphic, been meaning to do that anyway.

Sometimes now though when I click on a link after scrolling, the menu box vanishes and I need to reload. Is that a typo issue on my part, or just a glitch that will happen?

» Site Navigation

» Online Users: 576

» Search Forums

» Today's Birthdays

» Stats

Thread: Help from the CSS savvy?

Thread Tools

Display

Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Re: Help from the CSS savvy?

Posting Permissions