Advanced Search

Return to Snippet

Revision: 10128
at December 9, 2008 09:33 by skylenewman
Updated Code 
HTML:
<H1 id="overall-id" title="Text of the Title">
<SPAN class="title-ir-image"></SPAN>
<SPAN class="title-ir-text">Text of the Title</SPAN>
</H1>

#overall-id {width: 300px; 
height: 100px; 
position: relative; }

#overall-id span{ background: url(http://#) no-repeat; 
position: absolute; 
width: 100%; 
height: 100%;  }

span.title-ir-image {z-index:-1;}

span.title-ir-text {z-index:-999;}

Revision: 10127
at December 9, 2008 09:31 by skylenewman
Initial Code 
HTML:
<H1 id="overall-id" title="Text of the Title">
<SPAN class="title-ir-image"></SPAN>
<SPAN class="title-ir-text">Text of the Title</SPAN>
</H1>

#overall-id {width: 226px; 
height: 86px; 
position: relative; }

#overall-id span{ background: url(http://nearme.net/DNN/Portals/65/title-about-byb.gif) no-repeat; 
position: absolute; 
width: 100%; 
height: 100%;  }

span.title-ir-image {z-index:-1;}

span.title-ir-text {z-index:-999;}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
In original Shea Enhancement, image had higher z-index than drop-down menu items. Changing z-index of entire H1 made text appear above image in some browsers. Could not change z-index of menu items.

Added an extra span tag and two classes to the mix. The new span allows the text to be pushed further back in the z-index.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Title Image Replacement for DNN (Shea  Enhancement, revised for Z-Index issue)

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
image

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS