SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to place PNG over navigation

    I am developing a site for a designer and his design calls for part of the image in the content area to lay on top of the navigation in one place. I have tried negative margins, and absolute positioning but either way, it makes the navigation inactive in that part as expected. Is there a way around this?

    See attached image.

    wentwood.jpg

    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Your image is still pending approval.

    Try this:
    Code:
    <div>
       <img src="/afiles/images/billy_connolly_05.jpg" alt="blurb" />
       <ul style="display:inline-block; margin:-50px 0 0 -150px; background-color:#9ff">
          <li><a href="#1">one</a></li>
          <li><a href="#2">two</a></li>
          <li><a href="#3">three</a></li>
          <li><a href="#4">four</a></li>
       </ul>
    </div>
    
    <div style="width:333px; background: #cfc url(/afiles/images/billy_connolly_05.jpg) no-repeat">
       <ul>
          <li><a href="#1">one</a></li>
          <li><a href="#2">two</a></li>
          <li><a href="#3">three</a></li>
          <li><a href="#4">four</a></li>
       </ul>
    </div>
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  3. #3
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure I am following your code.

    here is a link to the image that may show better what I am trying to do.
    http://dl.dropbox.com/u/18576442/cla...04m/index.html

    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  4. #4
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    If you are trying to get the links overlaid then try this:

    Code:
    <!DOCTYPE HTML> 
    <html>
    <head>
    <title> title </title>   
    <style type="text/css">
     #west  {width:755px; height:330px;  background: #cfc url(wentwood.png) no-repeat}
     #west ul {display:inline-block; margin:2em 0; list-style-type: none;}
     #west ul li  {float:left;} 
     #west ul li a:link {font-size:1.4em; color:red; padding:0 1em 0 0; font-weight:700;}
    </style>
    </head>
    <body> 
    
    <div id="west">
       <ul>
          <li> <a href="#1">one</a>   </li>
          <li> <a href="#2">two</a>   </li>
          <li> <a href="#3">three</a> </li>
          <li> <a href="#4">four</a>  </li>
       </ul>
    </div>
    
    </body>
    </html>
    Output:
    westwoodUntitled-1.jpg
    Last edited by John_Betong; Jun 19, 2014 at 22:41. Reason: added screen-dump
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  5. #5
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you are trying to put the image as the background of the navigation which according to your code is to be 330px tall. That is too tall for the navigation area. Another thing I did not mention is that the image that i am tryign to get to overlay will change from time to time so I would prefer not to make it a code change in css. I really need to kep it as part of the content area.

    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    It looks like you are trying to put the image as the background of the navigation which according to your code is to be 330px tall. That is too tall for the navigation area.
    I am under the impression that it is essential to have the image in the background
    otherwise the menu will be hidden.
    I purposely set a DIV background-colour and made the height
    100px greater than the background image to illustrate the changes.


    Another thing I did not mention is that the image that i am tryign to get to overlay will change from time to time so I would prefer not to make it a code change in css. I really need to kep it as part of the content area.
    I do not understand your extra requirements, please supply a link to the page or include the page source.
    Last edited by John_Betong; Jun 19, 2014 at 22:59. Reason: added quotes
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  7. #7
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    If the content changes and the menu is fixed then try this:

    HTML Code:
    <!DOCTYPE HTML> 
    <html>
    <head>
    <title> title </title>   
    <style type="text/css">
     #menu   {position:absolute; top:1.8em; left:0.5em;}
     #menu li  {float:left; list-style-type: none;} 
     #menu li a:link  {font-size:1.4em; padding:0 0.5em; font-weight:700;}
     #menu li a:link  {color:red; text-decoration:none;}
     #menu li a:hover {color:green; text-decoration: underline; background-color: #cff;}
    </style>
    </head>
    <body> 
    
    <div id="content">
      <img src="wentwood.png" style="margin:0" alt="west" />
    
      blurb goes here and here<br />
      blurb goes here and here<br />
      blurb goes here and here<br />
      blurb goes here and here<br />
      blurb goes here and here<br />
      blurb goes here and here<br />
    </div>
    
    <div id="menu" style="">
       <ul>
          <li> <a href="#1">one</a>   </li>
          <li> <a href="#2">two</a>   </li>
          <li> <a href="#3">three</a> </li>
          <li> <a href="#4">four</a>  </li>
       </ul>
    </div>
    
    </body></html>
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •