WordPress.org

Ready to get started?Download WordPress

Forums

SearchForm hidden behind Header background (13 posts)

  1. chris@designcymru.com
    Member
    Posted 4 years ago #

    Hi, because of a silly design I received, I had to absolute position my divs. I am trying to position the searchform over the header bg within the header div.

    Because the header div is position:absolute and the searchform is float:right; the search box is displaying BEHIND the header div background when I need it to display in front. I have tried using position:absolute on the searchform but it overlays my nav menu items.

    Any suggestions on how to get around this?

  2. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    sure would be easier with a link to your site

  3. chris@designcymru.com
    Member
    Posted 4 years ago #

    Image

    I have included snapshot of the header because the site is hosted locally right now, hope this helps.

    This is my Header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body style="background-color:#082e56;">
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    <div id="page-wrap">
    	<div id="totum_banner">
    
        </div>
    	<div id="header">
    
            <ul id="nav">
            	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
            </ul>
        </div>
    <!-- End of Header -->

    I pulled the searchform out of the page-wrap div to avoid the position absolute but

    This is my CSS:

    #header {
    	position:absolute;
    	background:url(images/header_img.jpg) #082e55 no-repeat top;
    	left:168px;
    	top:0px;
    	width:611px;
    	height:217px;
    }
    #searchform {
    	width: 220px;
    	padding: 10px 135px 10px 10px;
    	float:right;
    }
  4. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    you say when you position:absolute the searchform, it goes over the nav menu.

    did you get rid of the float:right, and add in the proper positioning values to move the search? top and left values

  5. chris@designcymru.com
    Member
    Posted 4 years ago #

    Yes I did, it was positioned correctly but my menu item was not clickable and seems to be overlaid by the searchform div.

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    ah, I see....cant go position:relative with the #header?

    Small suggestions, sorry...its real hard without being able to poke at a live set with some dev tools

  7. chris@designcymru.com
    Member
    Posted 4 years ago #

    Don't apologize, I really appreciate your help here. Position:relative screws up my positioning and the searchform still hides behind the header even when I tried that. Sorry I can't give you access to the site but hopefully this helps you understand why I needed to absolution position everything. It demonstrates the layout I'm working with.

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    have you messed with z index at all?

  9. chris@designcymru.com
    Member
    Posted 4 years ago #

    I tried z-index:1; under searchform CSS but to no avail... should I be using it elsewhere?

  10. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    z index only works on positioned elements (absolute, relative, fixed)

    so maybe applying a negative z value to the header will get it behing the search?

  11. chris@designcymru.com
    Member
    Posted 4 years ago #

    I've been playing around with it but to no avail. I have content and sidebar sections position:relative to be flexible with content but I need to keep the header position:absolute to prevent the layout screwing up. I can use the z-index to give each layer a priority if you like but even with the search box on top and floating right it overlays all the menu items.

    Has to be a workaround for this one, been searching endlessly but can't find anything. Any other ideas?

  12. chris@designcymru.com
    Member
    Posted 4 years ago #

    I just figured it out. I made searchbox position:relative and added a z-index while leaving header and nav divs without a z-index. Thanks for all your help! Really appreciate it!

  13. jdnelson
    Member
    Posted 4 years ago #

    Hi, I have not been able to find an answer for this one any website, nor wordpress forum....hope you can help.

    I have the search box showing in the header where I want it, and have adjusted css.

    My problem is that you cannot click into the search box to perform search functions. It acts like an image.

    http://ensoftconsulting.com/ensoft is the link.
    Thanks for the help on this matter.

    Jeremy

Topic Closed

This topic has been closed to new replies.

About this Topic