#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9

    CSS menu with a watermark overlap


    Alright, I am developing a new website. I am using a watermark that begins in header and goes over the css menu in box. The positioning of all containers is correct and it views perfectly. I have a wrapper around those 2.

    *The issue is when the zindex is high it shows water mark beginning in header and stretches over the menu, when that happens the menu will not work properly. If I lower the zindex then the css menu covers bottom of my watermark it works, but then you cant see bottom half of my water mark.

    The water mark is in .png format.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    I found a review stateing to make a image overlapped on links you have to do something: <div style="width:269px; height:395px; float:left; margin:10px 0 15px 150px; border: 1px solid #666666; position:relative;">
    YOUR LINKS HERE
    <div style="width:269px; height:395px; position:absolute; top:0; left:0;">
    <img src="/files/2010/10/face.png" />
    </div>
    <div style="width:269px; height:395px; position:absolute; top:0; left:0; filter:alpha(opacity=0); -moz-opacity:.0; opacity:.0;">
    YOUR LINKS HERE
    </div>
    </div>

    but, I can't get it to work with this...
    Basically I need to be able to click content behind my .png image. It is just one charater. Any tips would be greatly appreciated. As of the now the positioning is correct and overlap is correct. I just cant click the active menu buttons that the image over laps. the image is transparent and saved as png.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    We would need to see an example page to help you with this.

    As long as it's not Flash or some other plugin, the file type doesn't matter. PNGs, GIFs, and JPEGs will all act the same.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    WATERMARK EXAMPLE

    If you look at the menu, its a css menu. The menu doesn't work because the table that overlaps from absolute positioning contains a translucent image. I am trying to get the image over lapped and be able to click the active menu that lays underneath it. basically a solid overlap that needs to be able to click content underneath it.

    the positioning is fine. I just never played with so many overlaps in my life and I have a sweet design, im just trying to implement it.

    I been searching different methods and currently playing with it. Trying to find the best solution.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    I found a forum that a guy had a simliar problem, but it was back in 2004.

    http://csscreator.com/node/4607

    No one posted a actual solution that works. This may help to understand my problem if the link above doesn't help.

    Here is my code.......

    CSS in website

    Code:
    <style type="text/css"> 
    <!-- 
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    .twoColFixRtHdr #container { 
    	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #fff ;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    } 
    .twoColFixRtHdr #header1 { 
    	background: ; 
    	padding: 0 0px 0 0px;
    	width: 780px;
    	z-index: -1; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    } 
    .twoColFixRtHdr #header { 
    	background: ; 
    	padding: 0 0px 0 0px; 
    	z-index: -1; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    } 
    .twoColFixRtHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    .twoColFixRtHdr #sidebar1 {
    	float: left; /* since this element is floated, a width must be given */
    	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	/*background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    	padding: 15px 10px;
    }
    .twoColFixRtHdr #mainContent { 
    	margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 0 20px;
    	/* remember that padding is the space inside the div box and margin is the space outside the div box */
    } 
    .twoColFixRtHdr #footer { 
    	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    	background: #DFAE3C; 
    } 
    .twoColFixRtHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    	text-align: center;
    	font-size: 12px;
    }
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    
    
    #comment{
    	position: fixed;
    }
    div#layer1 {
      z-index: 1;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 780px;
      height: 200px;
      border: 0px solid #000;
    }
    div#layer2 {
    	
      z-index: 2;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 780px;
      height: 200px;
      border: 0px solid #000;
    
    }
    div#layer3 {
      
      background-color: #12204D;
      z-index: 3;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 780px;
      height: 200px;
      border: 0px solid #000000;
    
    }
    #header-wrapper {
      position: relative;
      margin: 0 auto; // this will center the wrapper in its parent
      width: 780px;
      height: 200px;
      index: -1;
    }
    #rotating1 {
    	background-image: url(images/mainimage1.png); 
    	width: 780px;
    	height: 200px;
    	z-index:1;
    }
    #rotating2 {
    	background-image: url(images/mainimage.png); 
    	width: 780px;
    	height: 200px;
    	z-index:2;
    }
    #rotating3 {
    	background-image: url(images/mainimage1.png);
    	width: 780px;
    	height: 200px;
    	z-index:3;
    }
    #header-wrapper {
      position: relative;
      margin: 0 auto; // this will center the wrapper in its parent
      width: 780px;
      height: 200px;
    }
    #shadow-container {
    	width: 185px;
    	position: relative;
    	left: 3px;
    	top: 3px;
    	margin-right: 3px;
    	margin-bottom: 3px;
    	
    }
     
    #shadow-container .shadow2,
    #shadow-container .shadow3,
    #shadow-container .container {
    	width: auto;
    	position: relative;
    	left: -2px;
    	top: -2px;
    }
     
    	#shadow-container .shadow1 {
    		background: #F1F0F1;
    	}
     
    	#shadow-container .shadow2 {
    		background: #DBDADB;
    	}
     
    	#shadow-container .shadow3 {
    		background: #B8B6B8;
    	}
     
    	#shadow-container .container {
    		background: #12204D;
    		border: 1px solid #848284;
    		padding: 10px;
    	}
    .whiteText {
    	color: #FFF;
    }
    orangeText {
    	color: #BD8F1F;
    }
    #shadow-container .shadow1 .shadow2 .shadow3 .container p {
    	color: #BD8F1F;
    	font-size: 16px;
    }
    #shadow-container .shadow1 .shadow2 .shadow3 .container #form1 {
    	color: #BD8F1F;
    }
    .twoColFixRtHdr #container #sidebar1 #shadow-container .shadow1 .shadow2 .shadow3 .container .comment #form1 {
    	font-size: 12%;
    }
    .twoColFixRtHdr #container #sidebar1 #shadow-container .shadow1 .shadow2 .shadow3 .container .comment #form1 {
    	font-size: 12px;
    }
    .twoColFixRtHdr #container #sidebar1 #shadow-container .shadow1 .shadow2 .shadow3 .container .comment #form1 {
    	font-size: 12pt;
    }
    .twoColFixRtHdr #container #sidebar1 #shadow-container .shadow1 .shadow2 .shadow3 .container .comment #form1 {
    	font-size: 10pt;
    }
    --> 
    </style>


    Code in website
    Code:
    <body class="twoColFixRtHdr">
    
    <div id="container">
      <div id="header">
      <div id="header-wrapper">
      <div id="layer1">
        <div id="layer2"></div>
                  
      <div id="layer3"><table width="774" height="270" border="0">
      <tr>
        <td width="333" height="240"><img src="images/B.png" width="321" height="225
        " /></td>
        <td width="431"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table> 
      </div>
    </div>
    </div>
        
     <!-- end #header --></div>
      
       <div id="header1">
         <ul id="MenuBar1" class="MenuBarHorizontal">
           <li>
             <div align="center"><a href="#">Home</a> </div>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Attorneys</a>
             <ul>
               <li><a href="#" class="MenuBarItemSubmenu">Attorneys</a>
                 <ul>
                   <li><a href="#">Todd Bailess</a></li>
                   <li><a href="#">Kim</a></li>
                 </ul>
               </li>
               <li><a href="#" class="MenuBarItemSubmenu">Assistants</a>
                 <ul>
                   <li><a href="#">Dara Kent</a></li>
                 </ul>
               </li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Practice Areas</a>
             <ul>
               <li><a href="#">Car Accidents</a></li>
               <li><a href="#">Criminal Defense</a></li>
               <li><a href="#">Employment Law</a></li>
               <li><a href="#">Family Law</a></li>
               <li><a href="#">Mining/Workplave Injury</a></li>
               <li><a href="#">Nursing Home Injuries</a></li>
               <li><a href="#">Wage/Payment Collection</a></li>
             </ul>
           </li>
           <li>
             <div align="center"><a href="#">Contact Us</a></div>
           </li>
         </ul>
      </div><br />
    
      <div id="sidebar1">
    <?php include ("comment.html"); ?>
    
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <h1> Main Content </h1>
        <p>web 2.0 certified</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    	<!-- end #mainContent --></div>
    	<!-- This clearing element should immediately follow the #mainContent div in o rder to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>copyright 2010 bahomedia  2011 Web coming soon</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    The "b.png" is the image that does the overlap. I must be able to click through that image to be able to actively select the menu items the reside underneath that B image.
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    FWIW I think I would reduce the size of the image (possibly with image editing software so it doesn't distort) so that it sits in the blue banner and doesn't overlay the menu buttons. (Or increase the height of the banner, although this might make it too tall.)

    Or use z-index so that the menu buttons sit one level above the image, even though it won't look quite as nice.

    It is (technically) possible to have the image/watermark clickable and then measure the click co-ordinates and work out if these co-ordinates are currently over one of the menu buttons. But this will probably be a bit of a mare to get right (and to work with different browsers).

    .. but I'm not the expert that others are. Andy.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    Is it possible to assign a unique image to every menu block on a css menu. Like what if I just inserted to unique photos on far to left buttons? how would i go by doing that? I really want that effect!
  14. #8
  15. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    Sorry, I don't understand the question.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    css menu, horizontal menu.

    You have like 7 links going across, roll over effects.
    I want link one and two to have 2 unique images on off and on states. from all the other 6 links... basically each link for the horizontal menu class in css.
  18. #10
  19. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    With css and <a> tags you can provide different images for the different states of the link: (default), hover, active and visited.

    Code:
    #uniqueid a { background-image: url('images/some.gif'); }
    /* the default image */
    #uniqueid a:hover { background-image: url('images/other.gif'); }
    plus many other properties that you can change.

    Although there is quite a bit more you can do with this, I don't believe you can switch images if the link is clicked and then un-clicked. (Links don't have on and off states.) I think you would need JavaScript to do this.

    But others know an awful lot more css than me
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    I know how to add images to hover state etc... I was more or less saying having like 5 different images for hover state depending on the link of the horizontal bar. I been playing with that 'B' all day now... I got it to work better, not the best but I think its doable the way I have it now... just top of nav doesnt work on 2 buttons.

    You can view what i been working on today and see the Issue I had with the 'B' at link below
    example:
    http://bailesslaw.com/pilot/bailess_new.php
  22. #12
  23. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    I was more or less saying having like 5 different images for hover state depending on the link of the horizontal bar
    I thought I'd answered that
    Code:
    #uniqueid1 a { background-image: url('images/some1.gif'); }
    #uniqueid1 a:hover { background-image: url('images/other1.gif'); }
    
    #uniqueid2 a { background-image: url('images/some2.gif'); }
    #uniqueid2 a:hover { background-image: url('images/other2.gif'); }
    /* etc, etc.. */
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    125
    Rep Power
    9
    oh, my apologies. lol Ive been developing 2 websites today... mind is fried!!!!

    one you were assiting me with, the other is www.huntingtonnightlife.com/mainClient

    I'm more of a programmer then a webdeveloper. I have a hard time learning all these new rules when it comes to web development. My proficiency is php and sql/plsql, etc, somewhat java

IMN logo majestic logo threadwatch logo seochat tools logo