Welcome Guest ( Log In | Register )



3 Pages V   1 2 3 >  
 Reply to this topicStart new topic
> A Hidden Pop-up Box With CSS Only, A great trick I can't conduct completely
pyost
post Nov 29 2006, 07:22 PM
Post #1


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 998
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500
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" unsure.gif 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
Go to the top of the page
 
+Quote Post
TavoxPeru
post Nov 29 2006, 07:57 PM
Post #2


Super Member
Group Icon

Group: [HOSTED]
Posts: 744
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
pyost
post Nov 29 2006, 09:38 PM
Post #3


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 998
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500
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.
Go to the top of the page
 
+Quote Post
TavoxPeru
post Nov 29 2006, 10:02 PM
Post #4


Super Member
Group Icon

Group: [HOSTED]
Posts: 744
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
TaMeR
post Nov 29 2006, 10:11 PM
Post #5


Newbie [ Level 2 ]
Group Icon

Group: Banned
Posts: 14
Joined: 9-November 06
From: Egypt
Member No.: 17,108
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" unsure.gif 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 smile.gif


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

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




Cheers.

This post has been edited by TaMeR: Nov 29 2006, 10:17 PM
Go to the top of the page
 
+Quote Post
pyost
post Nov 29 2006, 10:26 PM
Post #6


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 998
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500
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 File(s)
Attached File  css_problem.png ( 930bytes ) Number of downloads: 21
 
Go to the top of the page
 
+Quote Post
TaMeR
post Nov 29 2006, 10:35 PM
Post #7


Newbie [ Level 2 ]
Group Icon

Group: Banned
Posts: 14
Joined: 9-November 06
From: Egypt
Member No.: 17,108
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:

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;
}



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? smile.gif




This post has been edited by TaMeR: Nov 29 2006, 10:42 PM
Go to the top of the page
 
+Quote Post
pyost
post Nov 29 2006, 10:46 PM
Post #8


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 998
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500
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 laugh.gif
Go to the top of the page
 
+Quote Post
pyost
post Nov 30 2006, 04:30 PM
Post #9


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 998
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500
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:

CODE
#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 sad.gif
Go to the top of the page
 
+Quote Post
FirefoxRocks
post Nov 30 2006, 11:09 PM
Post #10


Super Member
Group Icon

Group: [HOSTED]
Posts: 650
Joined: 12-July 06
From: Ontario, Canada
Member No.: 14,464
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. smile.gif
Go to the top of the page
 
+Quote Post
« Next Oldest · Web Design and HTML · Next Newest »
 

3 Pages V   1 2 3 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 30th August 2008 - 04:30 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation