Jump to content
xisto Community
pyost

A Hidden Pop-up Box With CSS Only A great trick I cant conduct completely

Recommended Posts

I am currently developing an online application where people will be able to store their school grades along with comments. I wanted to make comments look elegant, so I decided to use a hidden box that would appear when hovering over a certain grade. I've found a way to do it without JavaScript, and that is by using pure CSS and relative/absolute positioning. But that's not the main problem.

 

When I hover over a grade, the normal text is covered by the box (it overlaps the text), but the other grades aren't. I suppose that is happening because the grades have "position: relative" :P And that's what I need help about. How to alter my CSS so the box overlaps everything?

 

You can see the problem here, and my CSS file here

Share this post


Link to post
Share on other sites

Can you please check your problem link because it doesn't shows your problem, only opens your page but nothing happens when hover over a grade.Best regards,

Share this post


Link to post
Share on other sites

What browser are you using? I am sure the pop-up box works in Firefox and customizing it for other browsers will be sorted out later on.

Share this post


Link to post
Share on other sites

What browser are you using? I am sure the pop-up box works in Firefox and customizing it for other browsers will be sorted out later on.

Basically I use IE 6 and Firefox 1.5x, when i view it with IE nothing happens as i said and right now i just view it with FF and works fine.

When you say to overlap everything do you mean to overlap all the text that appears on your page, for example overlapping your sidebar???? May be you can use the z-index property to do that.

Best regards,

Share this post


Link to post
Share on other sites

When I hover over a grade, the normal text is covered by the box (it overlaps the text), but the other grades aren't. I suppose that is happening because the grades have "position: relative" :P And that's what I need help about. How to alter my CSS so the box overlaps everything?

 

Right. Well, the problem here is not related to the position but rather to the z-index.

 

 

All you have to do is make the following modifications to the Cascading Style Sheet file:

 

 

#ocene a.imp {

color: #ff0000;

z-index: 1;

}

 

#ocene a:hover span {

display: block;

background-color: #e5e5e5;

border: 1px solid #000000;

width: 300px;

position: absolute;

top: 30px;

left: 15px;

padding: 2px;

font-weight: normal;

color: #000000;

z-index: 2;

}

 

 

This will set the span container higher than its OWN container on the stack order. And the nice thing here is that it won't affect any other aspect of the document, since the z-index only works on elements that have been positioned, e.g. the <a> block.

 

 

I hope that's what you were asking for, pyost. If not, please let us know so that we could continue working on it :P

 

 

-------

EDIT:

-------

 

I'm sorry, TavoxPeru. I wrote my post while you were writing yours and didn't notice it :P

 

 

 

 

Cheers.

Edited by TaMeR (see edit history)

Share this post


Link to post
Share on other sites

I have never heard of that property before, and I'll be sure to remember it, but it isn't helping here. I tried editing various CSS parts with z-indexes, but it didn't change. I probably wasn't quite precise at explaining the problem, so here's a specific screenshot.

Share this post


Link to post
Share on other sites

Yes, pyost, that's what I understood from your first post. And the modification I mentioned above fixes this.

 

 

I saved the page in question and the style sheet file to my hard disk, changed the <link href="..."> attribute accordingly, modified the style sheet file, and opened the page. The box now covers all the page content within its dimensions.

 

 

Are you sure you modified the style sheet file properly? Perhaps you could try copying and pasting the following code directly into the style sheet after clearing it and see how it goes... it's your original CSS with the modification:

 

html {	height: 100%;}body {	background: #ffffff url(images/bg.png) repeat-x top left;	margin: 0;	padding: 0;	font-family: Verdana, Tahoma, Arial, "sans serif";	font-size: 12px;	text-align: center;}a {	text-decoration: none;	color: #2780f9;}a:hover {	color: #000000;}td {	font-size: 12px;}#wrapper {	margin: 30px auto 0px auto;	background-color: #ffffff;	width: 788px;	border: 1px solid #ffffff;	text-align: left;}#header {	width: 100%;	background: #8d9299 url(images/logo.jpg) no-repeat top left;	height: 100px;}#ocene a {	text-decoration: none;	margin-left: 5px;	margin-right: 5px;	color: #0000ff;	font-weight: bold;	position: relative;}#ocene a:hover {	border: none;}#ocene a span {	display: none;}#ocene a.imp {	color: #ff0000;	z-index: 1;}#ocene a:hover span {	display: block;	background-color: #e5e5e5;	border: 1px solid #000000;	width: 300px;	position: absolute;	top: 30px;	left: 15px;	padding: 2px;	font-weight: normal;	color: #000000;	z-index: 2;}#ocene td {	line-height: 20px;	text-align: center;	padding: 2px;	width: 125px;}#ocene #top1 {	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;}#ocene #top2 {	border-top: 1px solid #dedede;	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;	background-color: #f0f0f0;	height: 30px;	line-height: 30px;}#ocene #top3 {	border-top: 1px solid #dedede;	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;	background-color: #f0f0f0;	height: 30px;	line-height: 30px;	}#ocene .subject {	border-right: 1px solid #dedede;	border-left: 1px solid #dedede;	border-bottom: 1px solid #dedede;	background-color: #f0f0f0;}#ocene .empty {	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;}#ocene .avg {	border-bottom: 1px solid #dedede;	border-right: 1px solid #dedede;}#ocene .avgempty {	border-bottom: 1px solid #dedede;}#ocene .main {	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;}#ocene .allavg {	border-right: 1px solid #dedede;	border-left: 1px solid #dedede;	border-bottom: 1px solid #dedede;	width: 400px;}input {	background-color: #ffffff;	border: 1px solid #000000;	padding: 1px;}#sidebar {	width: 200px;}.module {	width: 200px;	background: #ffffff url(images/module.png) repeat-x top left;	margin-bottom: 20px;	font-size: 12px;}.module h3 {	height: 40px;	line-height: 40px;	padding: 0 10px 0 10px;	margin: 0;		font-size: 20px;	text-transform: lowercase;	font-weight: normal;	border-bottom: 1px solid #ffffff;}.module a {	display: block;	width: 180px !important;	width: 200px;	margin: 0 auto 0 auto;	padding: 0 10px 0 10px;	line-height: 22px;	text-decoration: none;	color: #000000;	border-bottom: 1px solid #ffffff;}.module a:hover {	color: #ffffff;	background-color: #8d9299;}#active {	color: #ffffff;	background-color: #8d9299;}#footer {	height: 30px;	text-align: center;	line-height: 30px;	background-color: #8d9299;	color: #46494d;}#footer a {	color: #46494d;}#footer a:hover {	color: #ffffff;}

And I know it might be too obvious, but I forget to do it all the time... did you refresh the page after you modified the style sheet? :P

Edited by TaMeR (see edit history)

Share this post


Link to post
Share on other sites

Wierd.. It's working now, but it isn't logical! I have set the z-index property in a.imp, but not in a, and that's when it's working. However, if I set it for a, too, it isn't displayed correctly. It's weird, because only the red grades are .imp. Any explanation why this is so?

 

~edit~

 

Aah, the problem is still there, sort of. The blue grade comments are working fine, but the red grade ones are above red and below blue grades :P

Share this post


Link to post
Share on other sites

OK, as far as I can see, the problem is solved in both Opera and Firefox. I just added the second CSS modification, which is this:

#ocene a:hover span {	display: block;	background-color: #e5e5e5;................	z-index: 100;}

That way, I am telling the comment to be above everything else with a z-index of 100. However, Internet Explorer doesn't seem to get it. It still displays grades above the comment. I don't know it it's because the anchors are relative, but it is really bothering me :P

Share this post


Link to post
Share on other sites

Internet Explorer is such a weird browser.

Firefox and Opera seem to display it properly. And yes, your problem is solved with a z-index with positioning. You can learn more about CSS at the W3Schools website.

 

I don't think that it is a huge issue because the grades are small but if you want to fix that, I'd recommend a little more than CSS. :P

Share this post


Link to post
Share on other sites

It seems to work fine in IE7. You may just want to put a link at the bottom to the firefox download page or the IE7 download page or both. IE6 is outdated, and people really ought to upgrade to IE7 if they still use it.~Viz

Share this post


Link to post
Share on other sites

Yeah, it does work fine in IE7, but many people are still using IE6 probably because they:1) Have an extremely slow connection, so they can't update2) Don't know how to update/don't even know that there is an updateI am still following the rule that it must be the same in all browsers, or at least most of them. And leaving out IE6 (and lower) isn't an option for me.What about JavaScript? I'm not a JS fan, but if it can solve this problem, I'll have to use it :P

Share this post


Link to post
Share on other sites

Does this page help you at all?

http://forums.xisto.com/no_longer_exists/


Actually, that is mostly the code I use. Therefore, you have the same problem, too. When I reduced the font size, the box connected to the first link appeared behind the third link. z-index would solve the problem, but only in IE7, Firefox and Opera.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.