Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.


Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox

@ yordan	:	(19 June 2013 - 02:28 PM) Long Life To Asta New Era
@ agyat	:	(19 June 2013 - 01:58 PM) New Era Start At Asta Or Asta Start In New Era.
@ yordan	:	(16 June 2013 - 05:41 PM) You're Welcome, Agyat!
@ agyat	:	(16 June 2013 - 07:38 AM) Thanks Yordan...
@ velma	:	(16 June 2013 - 12:06 AM) I Have Asked Opa To Check For A Backup.. He'll Let Me Know Soon
@ velma	:	(16 June 2013 - 12:05 AM) It Seems That Someone Has Deleted That Topic Since I Found The Url Of The Topic But It Gives Me An Error
@ yordan	:	(15 June 2013 - 10:31 PM) @velma : It's A Tuto On How To Create A Login Program.
@ yordan	:	(15 June 2013 - 10:31 PM) Happy Birthday To Youuuuuu Agyat!
@ yordan	:	(15 June 2013 - 10:31 PM) Ba$
@ agyat	:	(15 June 2013 - 04:41 PM)
@ agyat	:	(15 June 2013 - 04:41 PM) Where The Hall I Were? 15Th Is Almost At End And No-One Wished Me "happy Birthday"!!!
@ velma	:	(14 June 2013 - 10:39 AM) Which Tutorial Is He Searching For?
@ velma	:	(14 June 2013 - 10:38 AM) Which Tutorial Is He Searching For?
@ yordan	:	(14 June 2013 - 07:47 AM) Ok, Have A Look Tomorrow.
@ yordan	:	(13 June 2013 - 03:19 PM) @velma, Can You Have A Look At Feelay's Problem? Seems That His Tutorial Is Not Searchable Today.
@ Feelay	:	(13 June 2013 - 08:11 AM) Oh, Haha
@ velma	:	(12 June 2013 - 05:39 PM) Lately My Levels Of Procrastination..... sigh
@ velma	:	(12 June 2013 - 05:38 PM) I'll Do It Later
@ velma	:	(12 June 2013 - 05:38 PM) Procrastinators.. People Who Keep Saying "i'll Do This In A Bit"
@ Feelay	:	(12 June 2013 - 02:05 PM) Deal Punishments To What?

A Hidden Pop-up Box With CSS Only

Started by pyost, Nov 29 2006 07:22 PM

Reply to this topic

21 replies to this topic

#1 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 29 November 2006 - 07:22 PM

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"

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

#2 TavoxPeru

Super Member

[HOSTED]
876 posts

Gender:Male
Location:Lima - Peru
Interests:Web and Software development, Internet, Computers, Electronic music, music, soccer.
myCENTs:13.21

Posted 29 November 2006 - 07:57 PM

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,

#3 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 29 November 2006 - 09:38 PM

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.

#4 TavoxPeru

Super Member

[HOSTED]
876 posts

Gender:Male
Location:Lima - Peru
Interests:Web and Software development, Internet, Computers, Electronic music, music, soccer.
myCENTs:13.21

Posted 29 November 2006 - 10:02 PM

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,

#5 Guest_TaMeR_*

Guests

Posted 29 November 2006 - 10:11 PM

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" 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

-------
EDIT:
-------

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

Cheers.

Edited by TaMeR, 29 November 2006 - 10:17 PM.

#6 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 29 November 2006 - 10:26 PM

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.

Attached Files

css_problem.png 930bytes 21 downloads

#7 Guest_TaMeR_*

Guests

Posted 29 November 2006 - 10:35 PM

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?

Edited by TaMeR, 29 November 2006 - 10:42 PM.

#8 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 29 November 2006 - 10:46 PM

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

#9 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 30 November 2006 - 04:30 PM

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

#10 FirefoxRocks

Super Member

[HOSTED]
988 posts

Gender:Male
Location:Ontario, Canada
myCENTs:92.36

Posted 30 November 2006 - 11:09 PM

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.

#11 vizskywalker

Techno-Necromancer

Members
1,018 posts

Location:The Net

Posted 01 December 2006 - 05:42 AM

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

#12 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 01 December 2006 - 12:54 PM

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 update
2) Don't know how to update/don't even know that there is an update

I 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

#13 Guest_jlhaslip_*

Guests

Posted 01 December 2006 - 07:00 PM

Does this page help you at all?
http://www.jlhaslip....mples/tooltips/

Edited by jlhaslip, 30 August 2007 - 03:53 AM.

#14 toby

Super Member

Members
611 posts

Posted 01 December 2006 - 07:13 PM

Does this page help you at all?
http://jlhaslip.trap...mples/tooltips/

Oddly in Opera 9, you have to click the link to see the first line.

#15 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 01 December 2006 - 07:38 PM

Does this page help you at all?
http://jlhaslip.trap...mples/tooltips/

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.

#16 vizskywalker

Techno-Necromancer

Members
1,018 posts

Location:The Net

Posted 01 December 2006 - 07:53 PM

What about JavaScript? I'm not a JS fan, but if it can solve this problem, I'll have to use it sad.gif

Javascript can be used to accomplish this, I know because I've done it before. But it is extremely messy, and ugly. If we can't think of anything else, I'll take a crack at coming up with some JS code for you. All of my samples use Javascript's UOOP so they probably aren't what's best suited and I'd need to convert.

~Viz

#17 saint-michael

SM- the Man -The Myth - The Legend Himself

Members
477 posts

Gender:Male
Location:Drinking da rootbeers
Interests:look up and then look for a corner in a round room
myCENTs:61.67

Posted 01 December 2006 - 08:20 PM

what about the transparency effect in IE7 you have on the 2+? All them except for the last one are transparent.

although this could have been fixed a z-index of 100 seems to be a bit extreme if you remember the problem I was having (fixed it) a z-index of 1-5 should be sufficient unless I am missing something.

Also have you thought about what mac Ie 5 would look like and netscape as well?

#18 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 01 December 2006 - 09:47 PM

I know z-index of 1 would have been enough, but I prefer it this way. If necessary, I can insert more classes with the index between 1 to 100. And 100 is a better-looking muber

Also have you thought about what mac Ie 5 would look like and netscape as well?

I didn't want to think about Mac, because I'm 100% sure that 0.01% of the visitors would be using it. In my country, XP is the way to go

what about the transparency effect in IE7 you have on the 2+? All them except for the last one are transparent.

I didn't quite understand this part. Would you mind exaplaining it again (since I don't have IE7)?

#19 saint-michael

SM- the Man -The Myth - The Legend Himself

Members
477 posts

Gender:Male
Location:Drinking da rootbeers
Interests:look up and then look for a corner in a round room
myCENTs:61.67

Posted 02 December 2006 - 08:10 PM

Well since I can't show you a print screen (erased the example) basically I could see through the box when you hover over the score. It that to all of them except for the last set of scores.

#20 pyost

Way Out Of Control - You need a life :)

Members
1,090 posts

Gender:Male
Location:Belgrade, Serbia
myCENTs:67.69

Posted 02 December 2006 - 10:34 PM

I think I know what you are talking about, and that's probably what I want to solve. But it wasn't completely transparent, right? You could see the other grades, but not the table lines - and in the bottom, there were no grades behind the comment. Am I right?

Back to Web Design and HTML

Reply to this topic

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users