Posted 1 year 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?
Posted 1 year ago #
sure would be easier with a link to your site
Posted 1 year ago #
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('«', 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;
}
Posted 1 year 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
Posted 1 year ago #
Yes I did, it was positioned correctly but my menu item was not clickable and seems to be overlaid by the searchform div.
Posted 1 year 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
Posted 1 year 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.
Posted 1 year ago #
have you messed with z index at all?
Posted 1 year ago #
I tried z-index:1; under searchform CSS but to no avail... should I be using it elsewhere?
Posted 1 year 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?
Posted 1 year 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?
Posted 1 year 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!
Posted 1 year 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
This topic has been closed to new replies.
