Search field in header next to title and subtitle

  • Another issue I’ve got with my search field is that I’d like for it to be placed in my header to the right (in line with the title and sub title of my blog). That should be possible, right?

    Click here for more info.

    This is the code in the header:

    <?php /* contentheader.php - this file can be overriden in a childtheme creating a file with the same name*/ ?>

<div id="wrap">

<div id="accessnav">

[ <a href="#content"><?php _e('Content','basic2col'); ?></a> | <a href="#sidebar"><?php _e('Sidebar','basic2col'); ?></a> ]

</div>

<div id="header">

<h1><a accesskey="h" href="<?php bloginfo('url'); ?>/">
<span title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></span></a></h1>

<p><?php bloginfo('description'); ?></p>

 <form method="get" id="searchform" action="<?php bloginfo('home');?>/">

<h4 class="search">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>s&oslash;g" onblur="if(this.value == '') {this.value = 's&oslash;g';}" onfocus="if(this.value == 's&oslash;g') {this.value = '';}" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />

</h4>

</form>

</div>

<?php basic2col_navbar(); /*loading navbar.php if it exists*/ ?>

<div id="content">

    And this is the CSS:

    /*searchform*/

#searchform {
	float:right;
	display:inline;
}

#searchform label {
display:none; /* Skjuler overskriften p? s?gefeltet - smart! */
font-weight:bold;
}

#searchform input#s {
width:50%;
}

#searchform input.submit {
width:30%;
}

#accessnav {
display:none;
}

#wrap {
background : transparent;
max-width:672px; /* 65em oprindeligt */
margin:5px auto;
padding:0px;
text-align:left;
}

/*header*/

#header {
background : transparent;
border-bottom:4px solid #b4b4a8;
margin:4px 4px 40px; /* Sidste margin styrer afstanden ned til indholdet */
padding:15px 10px;
}

#header h1{ /* BLOG TITEL */
padding:0px;
font-size:1.4em;
display:inline;
}

#header p {
padding:0px;
margin:2px 10px;
font-size:1.1em;
display:inline;
}

    Any help is greatly appreciated as I’ve spent ages trying to figure this out…

    It’s sort of a general issue that I keep running into which is: how to place to elements next to each other: one aligned to the left and the other aligned to the right but both on the same line. Hooow?

    Thanks

    – Joaquim

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter jokkesvin

    (@jokkesvin)

    It just looks really awful right now, so any help would be great ??

    Thread Starter jokkesvin

    (@jokkesvin)

    I tried to put display:inline; on the style that controls the search field, but with no effect ??

    Thread Starter jokkesvin

    (@jokkesvin)

    Okay problem solved! Finally ??

    I borrowed some code from the theme “blue-mist” (from header.php and style.css) and incorporated it into my own.

    I basically placed the search form inside this div:

    <div class=”search”></div>

    And then added this css to the class “search”:

    #header .search {
    color:#635b5c;
    font-size:.92em;
    float:right;
    }

    I think float:right did the trick ??

    I think you can do it like the following

    <?php /* contentheader.php - this file can be overriden in a childtheme creating a file with the same name*/ ?>

<div id="wrap">

<div id="accessnav">

[ <a href="#content"><?php _e('Content','basic2col'); ?></a> | <a href="#sidebar"><?php _e('Sidebar','basic2col'); ?></a> ]

</div>

<div id="header">
<div class="col-1">
 <h1><a accesskey="h" href="<?php bloginfo('url'); ?>/" rel="home">
<span title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></span></a></h1>
 <p><?php bloginfo('description'); ?></p>
</div>
<div class="col-2">
 <form method="get" id="searchform" action="<?php bloginfo('home');?>/">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>s&oslash;g" onblur="if(this.value == '') {this.value = 's&oslash;g';}" onfocus="if(this.value == 's&oslash;g') {this.value = '';}" name="s" id="s" />
<button type="submit" id="searchsubmit"><span title="Search">s&oslash;g</span></button>
</form>
</div>

</div> <!-- /#header -->

<?php basic2col_navbar(); /*loading navbar.php if it exists*/ ?>

<div id="content">

    then add inside css

    #header{padding-bottom:38px}
#header .col-1{
 float: left;
 width: 398px /* blog-name & description = (189 + 209) */
}
#header .col-2{margin-left:auto;width:160px}
#searchform #s{padding:3px}
#searchform button{
 border:1px solid #ccc;
 background-color: #eee;
 font-size: 1em;
 padding: 2px;
}

#content{clear:both}

    remove your previous css for

    #searchform {
	float:right;
	display:inline;
}

    Thread Starter jokkesvin

    (@jokkesvin)

    Hmm, is that better chaoskaizer?

    Thread Starter jokkesvin

    (@jokkesvin)

    Oh I just found out that I don’t need this:

    <div id=”accessnav”>

    [ <?php _e(‘Content’,’basic2col’); ?> | <?php _e(‘Sidebar’,’basic2col’); ?> ]

    </div>

    Anyways, what does this tag do?:

    #content{clear:both}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Search field in header next to title and subtitle’ is closed to new replies.