SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    Karachi, Pakistan
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Menu Coming down

    Hello,

    I have a drop down menu which uses java as well as css.. the problem is that when the menu drops down it comes under the '<select>' thing.. the drodown in form.. I want the menu to be shown at top of everything...

    Also, in the header I want to display different images (3 of them) for each page

    Like for about us images will be different, contact images will be different..

    But I want the header to be only one..

    How can this be done?

    can we apply php codes like (<? echo(''); ?>) in the css..??

    Please help me on these..

    Thanks...

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all a shot in the dark as I haven't seen the code, but:

    Try playing around with the z-index of the container of your dropmenu in the CSS to make it display over the form.

    Regarding the header graphics: Add a class to the body tag e.g.
    Code:
    <body class="about">
     <div id="header"><img src="spacer.gif" /></div>
    ...
    Then in your CSS:
    Code:
     body{
      text-align: center;
      margin: 0;
      padding: 0;
      }
    
     #header{
      width: 500px;
      margin: 0 auto;
      background-position: left top;
      background-repeat: no-repeat;
      }
    
     .about #header{ background-image: url(bg_about.gif); }
     .contact #header{ background-image: url(bg_contact.gif); }
     .portfolio #header{ background-image: url(bg_portfolio.gif); }
    This way your header code can be identical for each page, but display a different image based on the class of the body tag.


    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    Karachi, Pakistan
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Andy,

    Thanks for the help.. well

    z-index is set to 100 and if I remove it then the menu comes below every thing.. if I increase then no change?? What shall I do?

    For different images.. this is a great idea for me but as body tag will also be in the header file so how will I cal different classes for different pages... can I call them through <? echo('somefunction'); ?>).. I think this can be done in the body tag.. what do you say?

    Again, thanks for your help...

    take care bye

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mahd
    I have a drop down menu which uses java
    Do you mean Java, or JavaScript?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    he problem is that when the menu drops down it comes under the '<select>' thing..
    The select element is a windowed element and is on top of everything in ie and the only way to get on top of it is to use some sort of scripting.

    http://dotnetjunkies.com/WebLog/jkin...07/21/488.aspx
    http://dotnetjunkies.com/WebLog/jkin...0/30/2975.aspx

    Suffice to say its no easy job and the easiest solution is to move either the select or the menu.

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    Karachi, Pakistan
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks! got the answer!!

    Will ask again if anything goes wrong


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
  •