CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

div layers help

Discuss div layers help in the CSS Help forum on Dev Shed.
div layers help Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 28th, 2004, 05:35 PM
thindery thindery is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 283 thindery User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 52 m 42 sec
Reputation Power: 0
div layers help
I hope someone can help me with this, please have a look at a page I have created:

http://www.funnestgames.com/header_1.php

Now before rolling over any of the links on the left side, notice the text "Rollover game for preview". I have been trying to get that inside the white rectangular outlined box, but the only way I know is if i use css and specify a certain number of pixels from the left side. I can't do this because the website is centered, and resizing the page would change the widths and it all gets messy, i hope you have the idea.

I have the same problem if you rollover a link, you can barely read it but it says loading below the text "rollover game for preview"

does anyone know a way to solve my problem? please view source on page if you can help me out and see what i did wrong. the divs start at approx line 135 thanks

Code:
<center>
						<div style="width:100px; height:100px;background-color:#E0E1E2; border: 1px double #ffffff; font-size:11px; font-weight:700; color:#333333; text-align:center;">Game Preview
						<div style="position: absolute; top: 300px;">Rollover game for preview</div>
						<div id="preview" style="width:100px; height:100px;background-color:#E0E1E2; visibility:hidden; z-index:99;">
 						<img name="preview_img" src="spacer.gif" style="height:100px; width: 100px; visiblility:hidden; " onload="showmehideme()">
						<div id="loading" style="font-size:11px; font-weight:700; color:#333333; text-align:center; position: absolute; top: 300px;">Loading...</div>
 						</div>
						</div>
						</center>
Reply With Quote
  #2  
Old June 29th, 2004, 12:40 AM
TheJim01's Avatar
TheJim01 TheJim01 is offline
Coconuts migrate?
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Feb 2004
Location: http://middle.nowhere.com
Posts: 1,895 TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)TheJim01 User rank is General 3rd Grade (Above 100000 Reputation Level)  Folding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate FolderFolding Points: 70160 Folding Title: Intermediate Folder
Time spent in forums: 2 Weeks 5 Days 11 h 8 m 20 sec
Reputation Power: 1176
PHP Code:
<div style="position: relative; top: 0px; left: 0px; width:100px; height:100px;background-color:#E0E1E2; border: 1px double #ffffff; font-size:11px; font-weight:700; color:#333333; text-align:center;">Game Preview
  <div style="position: absolute; top: 50px; left: 0px;">Rollover game for preview</div>
  <div id="preview" style="width:100px; height:100px;background-color:#E0E1E2; visibility:hidden; z-index:99;">
    <img name="preview_img" src="spacer.gif" style="height:100px; width: 100px; visiblility:hidden; " onload="showmehideme()">
    <div id="loading" style="font-size:11px; font-weight:700; color:#333333; text-align:center; position: absolute; top: 300px;">Loading...</div>
  </div>
</div> 



You were missing the "left" attribute from your "Rollover game for preview" div, and were shifting it down /way/ too much. I also added positioning to the parent div, because I remember reading that a div can only be positioned inside a container that has been positioned... I could be wrong about that one though.
__________________

Proud member of the T.S.N.B.U.F.L (tables should not be used for layout) alliance.

"Only use elements for their intended purpose. You wouldn't try to make coffee with a telephone, would you?" -Me
Reply With Quote
  #3  
Old June 29th, 2004, 02:08 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,674 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687
Quote:
Originally Posted by Jim
I remember reading that a div can only be positioned inside a container that has been positioned... I could be wrong about that one though.
You got that pretty much right. If, for example, an absolute positioned (AP) element is in a non-positioned element, it will take as its reference the nearest positioned ancestor. This can lead to some nasty surprises.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.
Reply With Quote
  #4  
Old June 29th, 2004, 10:45 AM
thindery thindery is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 283 thindery User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 52 m 42 sec
Reputation Power: 0
thank you guys so much! I really appreciate it.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > div layers help

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway. 
Stay green...Green IT