» Site Navigation
0 members and 656 guests
No Members online
Most users ever online was 47,180, 07-16-2025 at 05:30 PM.
» Today's Birthdays
» Stats
Members: 75,905
Threads: 249,105
Posts: 2,572,111
Top Poster: JLC (31,651)
|
-
Help from the CSS savvy?
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?
-
Re: Help from the CSS savvy?
-
Re: Help from the CSS savvy?
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;
}
-
Re: Help from the CSS savvy?
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! :rolleye2:
-
Re: Help from the CSS savvy?
Quote:
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.
Quote:
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;
}
-
Re: Help from the CSS savvy?
OH, ok, I misunderstood what to move, there it is! :D Puts quite a gap above col 2 but worth the nice smooth fixed side boxes. Very nice, thank you! :bow:
-
Re: Help from the CSS savvy?
Quote:
Originally Posted by MedusasOwl
OH, ok, I misunderstood what to move, there it is! :D Puts quite a gap above col 2 but worth the nice smooth fixed side boxes. Very nice, thank you! :bow:
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 <br></p></div></center><br><p></p>
and delete the <br><p></p> so it just reads
Thomas Berger <br></p></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
-
Re: Help from the CSS savvy?
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. :D
-
Re: Help from the CSS savvy?
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 :)
-
Re: Help from the CSS savvy?
It IS crazy, I've been getting the hang of it but still... yeash. :rolleyes: 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?
-
Re: Help from the CSS savvy?
Consistently vanishing menu on scrolled down link click on Firefox, working fine on IE. :rolleye2:
-
Re: Help from the CSS savvy?
What you're trying to achieve is such a PITA...that's why you don't see it too often. Cross browser compatibility is one of the most frustrating things in web development.
-
Re: Help from the CSS savvy?
Quote:
Originally Posted by nathanledet
What you're trying to achieve is such a PITA...that's why you don't see it too often. Cross browser compatibility is one of the most frustrating things in web development.
I've officially stopped supporting IE6 :banana:
... i wish!:rolleyes:
-
Re: Help from the CSS savvy?
heh....i've stopped IE all together. i'm almost to the point where I want to set up a world wide boycott on every web site....where users that access a page are presented with a FireFox download... :)
-
Re: Help from the CSS savvy?
Quote:
Originally Posted by MedusasOwl
Sometimes now though when I click on a link after scrolling, the menu box vanishes... Is that a typo issue on my part, or just a glitch that will happen?
It's a glitch, but one you can take care of. The reason the box is disappearing is because "absolute" position is based on the document, while "fixed" is based on the window. To take care of this, we need to tell IE to use "absolute" and everyone else to use "fixed". To do this, just update the "position: absolute;" on col1 & col3 to look like this:
<!--[if IE]>
position: absolute;
<![endif]-->
<!--[if !IE]>
position: fixed;
<![endif]-->
-
Re: Help from the CSS savvy?
Quote:
Originally Posted by iceman25
I've officially stopped supporting IE6 :banana:
... i wish!:rolleyes:
I am so right there with you...I would LOVE to stop supporting IE6, but on the game, 23% of our users use it (a serious pain since it's so ajax/dhtml heavy).
-
Re: Help from the CSS savvy?
Done and done! :banana: I love it! Easy to navigate and aesthetically pleasing. :D Even got a favicon up there now (I'll try and make a better one another day, but its still cute for now).
Thank you, thank you, thank you, thank you! :bow:
I'm always surprised at how many people still use Internet Exploder. Drives me nuts that certain sites like Netflix view now etc won't work with anything else. Bleh. Catering to Exploder is a pain. Needing to find Exploder because a site doesn't care for superior browsers is a pain. Not as many of them around as there used to be though.
-
Re: Help from the CSS savvy?
Ok, I've tried to fix this myself and am at a loss again, so just this last thing or two I swear and I'll let you guys alone, promise! :please:
I assume the lightbox I use for the galleries is being messed with by the menu code. Ever since I fixed and validated all the pages, when you click on a gallery thumbnail it still works but sometimes it jumps all the way to the bottom of the page. The lower on the page the thumbnail, the further it jumps.
http://www.bluegorgon.com/gallery.htm
http://www.bluegorgon.com/snakegallery.htm
The other thing seems to be that the menu is cutting off for some people, something about overflow. The one who told me about this is using a laptop, I don't know if that has something to do with it or not.
:rolleye2:
|
