Support » Themes and Templates » SearchForm hidden behind Header background

SearchForm hidden behind Header background

  • 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?

Viewing 12 replies - 1 through 12 (of 12 total)
  • sure would be easier with a link to your site


    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">
    <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" />
    <body style="background-color:#082e56;">
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    <div id="page-wrap">
    	<div id="totum_banner">
    	<div id="header">
            <ul id="nav">
            	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
    <!-- End of Header -->

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

    This is my CSS:

    #header {
    	background:url(images/header_img.jpg) #082e55 no-repeat top;
    #searchform {
    	width: 220px;
    	padding: 10px 135px 10px 10px;

    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

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

    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

    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.

    have you messed with z index at all?

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

    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?

    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?

    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!

    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.


Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘SearchForm hidden behind Header background’ is closed to new replies.
Skip to toolbar