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

css layers

Discuss css layers in the CSS Help forum on Dev Shed.
css layers 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 May 2nd, 2004, 11:05 PM
strattonbrazil strattonbrazil is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 18 strattonbrazil User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 10 m 4 sec
Reputation Power: 0
css layers
I've tried different implementations, but none seem to be working.

I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this?
Reply With Quote
  #2  
Old May 3rd, 2004, 02:06 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,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 24 m 10 sec
Reputation Power: 607
I've made a small example of hot swapping z-indices. It uses the onclick event handler to call a small function.

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.

Ask a better question, get a better answer.
Reply With Quote
  #3  
Old May 3rd, 2004, 08:25 AM
stinkoman's Avatar
stinkoman stinkoman is offline
what's your moniker?
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: Highland Park, NJ
Posts: 201 stinkoman User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Send a message via AIM to stinkoman
gary,

that's a great little script! thanks,

Greg
__________________
new jersey web design
Reply With Quote
  #4  
Old May 3rd, 2004, 08:32 AM
strattonbrazil strattonbrazil is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 18 strattonbrazil User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 10 m 4 sec
Reputation Power: 0
Thanks, that really clears everything up. I think most of the tutorials I saw used .z-index: , which doesn't work.
Reply With Quote
  #5  
Old May 3rd, 2004, 12:45 PM
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,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 24 m 10 sec
Reputation Power: 607
Quote:
Originally Posted by strattonbrazil
Thanks, that really clears everything up. I think most of the tutorials I saw used .z-index: , which doesn't work.
Yeah. The general rule is to convert any hyphenated attribute to the so-called "camel notation."

Examples:

z-index ⇒ zIndex;
background-color ⇒ backgroundColor;
margin-top-width ⇒ marginTopWidth.

cheers,

gary
Last edited by kk5st : May 3rd, 2004 at 12:48 PM.
Reply With Quote
  #6  
Old May 4th, 2004, 07:20 AM
strattonbrazil strattonbrazil is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 18 strattonbrazil User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 10 m 4 sec
Reputation Power: 0
Maybe there's some error in my code I'm not catching, but I'm trying to do the same thing putting two images in the div's and switching them. Is there anything wrong here? I get the alert sometimes, but it never does the switch.

<style type="text/css">
/*<![CDATA[*/
<!--
#first { position: absolute; left: 10px; z-index: 2; width: 640; height: 480;
bgcolor: #f88;
}
#second { position: absolute; left: 70px; z-index: 3 width: 640; height: 480;
bgcolor: #88f;
}

body {
padding: 0;
margin: 0;
font: 100% arial, sans-serif;
color: #333;
background-color: white;
}

p {
font-size: 1em:
}

#div1 {
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 150px;
background-color: #f88;
}

#div2 {
position: absolute;
top: 150px;
left: 150px;
height: 150px;
width: 150px;
background-color: #88f;
}

/*]]>*/
-->
</style>
<script type="text/javascript">
function toFront(onBottom) {
alert(onBottom + "Ugg");
document.getElementById(onBottom).style.zindex = '2';
document.getElementById(onTop).style.zindex = '1';
}
</script>
<body>
<div id="div1" onClick="toFront('div1','div2')">
<img name="headerpiece" src="images/theroyalbangs.jpg" width="100%" height="100%">
</div>
<div id="div2">
<img name="centerpiece" src="images/sam1.gif" onClick="centerpiece.src='images/sam2.gif'">
</div>
</body>
Reply With Quote
  #7  
Old May 4th, 2004, 07:22 AM
strattonbrazil strattonbrazil is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 18 strattonbrazil User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 10 m 4 sec
Reputation Power: 0
Oops, in my code I really do pass the function two parameters...
Reply With Quote
  #8  
Old May 4th, 2004, 01:56 PM
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,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 24 m 10 sec
Reputation Power: 607
Before making all the changes, use my code verbatim. Then, you can add/modify one thing at a time. If it breaks, you'll know what broke it.

cheers,

gary
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > css layers

« 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 1 hosted by Hostway.