This is what I want:
This is what I got:
Now as you can see I have this submit search button misplaced and the right edge of navigation menu.
So my code:
Search html:
<div id="searchbar"><?php include (TEMPLATEPATH . '/searchform.php'); ?></divSearch css:
#searchbar{ width: 165px; height: 41px; background-image:url(images/header_search.png); background-repeat:no-repeat; background-position:left; position:relative; float:right; right: 0; top: 0; } #searchform{ width: 185px; padding: 4px 8px 0 8px; overflow: hidden; } #searchform input{float: left;} #searchform #s{ width: 145px; height: 19px; border: 0; color: #999; font-style:italic; font-weight: 500; font-size:12px; padding-top: 7px; padding-left: 7px; background: url("images/input-bg.gif") no-repeat 0 0; } #searchform #searchsubmit{ width: 45px; height: 23px; background: url("images/submit.gif") no-repeat 0 0; margin-left: 5px; border: 0; cursor: pointer; }
Navi html
<div id="navi_vasak" style=""> <ul id="navigation"> <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li> <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?> </ul><div id="navi_parem"></div>Navi CSS
#navigation{ width: 718px; height: 32px; background-image:url(images/header_navi_bg.png); background-repeat:repeat-x; margin-left:14px; margin-right:14px; } #navi_vasak { width:14px; height: 32px; background-image:url(images/header_navi_left.png); background-repeat:no-repeat } #navi_parem { width:14px; height: 32px; background-image:url(images/header_navi_right.png); background-repeat:no-repeat; } #navigation li{ list-style-type: none; height: 32px; text-align: center; float: left; } #navigation li a{ height: 26px; display: block; padding-top: 8px; padding-left: 20px; padding-right: 20px; color: #929292; text-decoration: none; } #navigation li a:hover{ background: url(images/header_navi_li.png); background-repeat:no-repeat; background-position:center; } #navigation .current_page_item a, #navigation .current_page_item a:hover{ height: 26px; display: block; padding-top: 8px; color: #929292; text-decoration: none; }