Search box floating instead of locked to page

  • Hey folks:
    WP Newbie here. I am using Delicate Theme and am having trouble editing the .css file correctly. The search box in this theme seems to have a mind of its own. First, the theme is designed to have the search box in the horiz menu bar, but I have replaced (commented out) that menu bar with the menu from the Multi-Level Navigation plugin, which works great. So, I tried to use the search widget in the sidebar, but it just doesn’t show up. Dunno why. So, I un-commented the search portion of the original .css, and it puts the search box just under the menu bar on its own row. This is okay with me, except I would be happier if it would drop onto the right end of the menu bar.
    So, I tried entering a negative top margin, to pop it up over the menu bar, which worked, except when you make the window narrow, the search box travels with the right margin, instead of being locked horizontally at the right edge of the webpage/menu, then covering some of the menu options.

    Thirdly, I wanted to put the text “Search” to the left of the box, but I could only get it to appear on top of the box, making the space between the header and body that much wider (and blacker), so I left it the way it is in the theme with no instruction text, other than what is put inside the box by the theme (that text is in the searchform.php file).

    Short version:
    1. Search box floats with right edge of window, instead of locked on page.
    2. Search box will not appear in sidebar as widget.
    3. Search box has no text “Search” to the left of input box.

    Thanks in advance for your help.

    Here’s the url: https://damariscarbaugh.com/
    Here’s the .css code that I think is relevant (note: I commented out a couple of lines so I could experiment):

    .search{
	float: right;
	width: 200px;
<!--	margin-top: -30px;  -->
<!--	margin-right: 5%;   -->
	font-family: Tahoma, sans-serif;
	color: #dddddd;
	font-weight: bold;
	font-size: 10px;
}
.search_form{
	margin: 0;
	padding: 0;
}
.search_form input{
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

    Code from header (suckerfish is multi-nav menu plugin):

    <?php if (function_exists('suckerfish')) {suckerfish();} ?>

<!--
<div id="menu">
	<ul>
		<li<?php if (is_home()) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
		<?php wp_list_pages('title_li=' ); ?>
	</ul>
-->

	<div class="search">
		<?php include (TEMPLATEPATH . '/searchform.php'); ?>
	</div>

	<div class="clear"></div>
</div>

<!-- end header -->

Viewing 4 replies - 1 through 4 (of 4 total)

  • You’ve commented out the <div id="menu"> But not the closing </div> Just before the <!-- end header -->

    If you’re faced with problems you can’t find the root of, then validate your xhtml code at https://validator.w3.org/ and your CSS at https://jigsaw.w3.org/css-validator/

    Thread Starter rcarbaugh

    (@rcarbaugh)

    jberghem:
    Right on the </div> marker. I thought I got all of them. Thanks. I commented it out and it passes the validator for xhtml now.

    However, that had no bearing on the floating search box. How do I lock that to the right edge of the webpage, and not move with the right edge of the window?

    If you create a container div to hold everything on your page and give it the desired width of the page the floats inside it will stay within that width and not float out to the edge of the browser. If you want the search box in the nav bar you have to place the XHTML above it. A float will only move content beside it that follows not that precedes it.
    Like this:

    <body>
  <div id="container">
    <div id="header"> put header content here </div>
    <div id="menu"> put search box before menu content in here </div>
    <div id="content"> put post and page content here </div>
    <div id="footer"> put footer content here </div>
  </div>
</body>

    Then when you add a float to the search box the menu will move up next to it.

    Thread Starter rcarbaugh

    (@rcarbaugh)

    Bingo. That worked! Thanks a lot.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Search box floating instead of locked to page’ is closed to new replies.