| 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 |
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,
Best regards,
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.
QUOTE(pyost @ Nov 29 2006, 04: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.
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,
QUOTE(pyost @ Nov 29 2006, 07:22 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.
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.
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:
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?
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:
CODE
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;
}
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?
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
~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
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:
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
CODE
#ocene a:hover span {
display: block;
background-color: #e5e5e5;
................
z-index: 100;
}
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
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.
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.
Latest Entries
Yup, exaclty the problem I'm worried about.
It basically looked like that in IE7 with most of the except the last one in which the gray area was completely soild, but it Firefox it was completely solid on each hover.
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?
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.
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
I didn't quite understand this part. Would you mind exaplaining it again (since I don't have IE7)?
QUOTE(saint-michael @ Dec 1 2006, 09:20 PM)
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
QUOTE
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)?
Similar Topics
Keywords : Hidden Pop Css Trick Can39t Conduct Completely
Keywords : Hidden Pop Css Trick Can39t Conduct Completely
Offen happens to see your images used in someone's website. Here is a little trick how protect
them, from the right-click 'Save Image As..' If you use tables, you can use the
'real' picture as backgroung in a cell and use a 1x1 tranparent GIF to cover it. See the
code to understand. CODE ...
Looking for hidden, pop, box, css, great, trick, conduct, completely
|
*SIMILAR VIDEOS*
Searching Video's for hidden, pop, box, css, great, trick, conduct, completely
| ||
|
advertisement
|
