WordPress.org

Ready to get started?Download WordPress

Forums

Search field in header next to title and subtitle (7 posts)

  1. jokkesvin
    Member
    Posted 5 years ago #

    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

  2. jokkesvin
    Member
    Posted 5 years ago #

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

  3. jokkesvin
    Member
    Posted 5 years ago #

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

  4. jokkesvin
    Member
    Posted 5 years ago #

    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 :)

  5. chaoskaizer
    Member
    Posted 5 years ago #

    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;
    }
  6. jokkesvin
    Member
    Posted 5 years ago #

    Hmm, is that better chaoskaizer?

  7. jokkesvin
    Member
    Posted 5 years ago #

    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}

Topic Closed

This topic has been closed to new replies.

About this Topic