lundi 13 février 2017

How to add an image to a proper position on web page

I tried to add an image (137×30) next to the search bar, but I cannot do it properly. It is supposed to be this screen shot (I did this screen shot by PhotoShop)enter image description here

The code for search bar is like this:

<?php get_search_form(); ?> 

I tried to add the image but it became to this:

enter image description here

I don't know how to make this image in the proper position, plz help...thanks a lot!!!

I just attached the code for this webpage as reference if you need to look at it:

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html <?php language_attributes(); ?> class="no-js">
<!--<![endif]-->
<head>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '-', true, 'right' ); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie8.css">
<![endif]-->
<script type="text/javascript">
!function(){function t(){var t=r("utm_content");if(t){var e=new Date;e.setDate(e.getDate()+30),document.cookie=t+";expires="+e.toGMTString()+";path=/"}else if(document.cookie)for(var o=document.cookie.split(/; */),n=0;n<o.length;n++)if(0===o[n].toLowerCase().trim().indexOf("utm_content=")){t=o[n];break}return t}function e(t){try{console.log(t)}catch(e){alert(t)}}function r(t){var e=top.location.search?top.location.search.substring(1):null;if(e)for(var r=e.split("&"),o=0;o<r.length;o++)if(0===r[o].toLowerCase().trim().indexOf(t+"="))return r[o];return null}var o="",n=r("mctest");if(n)e("dnr tag version: 20160125"),o="http://localhost:8080/rip/library/dnr/mcDnrTag.debug.js";else{var a=t(),c="";a&&(c=top.location.search?0<=top.location.search.indexOf("utm_content")?top.location.search:top.location.search+"&"+a:"?"+a,o="http://ift.tt/2kjtI6b"+c)}if(o){var i=document.createElement("script");i.src=o,i.type="text/javascript",scriptTag=document.getElementsByTagName("script")[0],scriptTag.parentNode.appendChild(i)}}();
</script>
<?php 
    wp_head();
    if(function_exists('ot_get_option')) 
        echo ot_get_option( 'cnkt_google_analytics' );
?>
</head>

<body <?php body_class(); ?>>
<?php 
    $cats = '';
    foreach(get_the_category() as $category)
        $cats .= $category->slug . ' '; 
?>
<div id="container" class="<?php echo $post->post_name; echo ' '. $cats; ?>">
    <a href="#page-content" class="skip-to-content" tabindex="0">Skip to main content</a>
    <div id="wrapper">
        <header class="site-header" role="banner">
            <div class="row">
                <div class="large-12 columns">  
                    <ul class="secondary hide-for-medium-down">
                        <li class="mailinglist"><a href="/join-our-mailing-list/">Join our Mailing List</a></li>
                        <li class="quote"><a href="/request-quote/">Request a Quote</a></li>
                    </ul>
                    <div class="nav-wrap"> 
                        <div class="logo">
                            <a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" /></a>
                        </div>
                    <div class="sub-wrap hide-for-medium-down">          
                        <nav id="utilitynav" role="navigation">
                            <ul id="menu-utility" class="menu">
                                <li id="menu-item-2398" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2398 menu-item-news">
                                    <a href="http://ift.tt/2lGDP0U">News &amp; Events</a>
                                </li>
                                <li id="menu-item-2397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2397 menu-item-contact-us">
                                    <a href="http://ift.tt/2kjujEN">Contact Us</a>

                                </li>
                                <li class="linkedin">
                                    <a href="http://ift.tt/2lGQdOx echo '-' ?>" target="_blank">
                                        <em class="fa fa-linkedin-square"></em>
                                        <span class="offscreen">LinkedIn</span>
                                    </a>
                                </li>
                                <li class="twitter">
                                    <a href="https://twitter.com/shaver_inc" target="_blank">
                                        <em class="fa fa-twitter"></em>
                                        <span class="offscreen">Twitter</span>
                                    </a>
                                </li>
                                <li class="facebook">
                                    <a href="http://ift.tt/2kjgZ3j" target="_blank">
                                        <em class="fa fa-facebook"></em>
                                        <span class="offscreen">Facebook</span>
                                    </a>
                                </li>
                                <li class="youtube">
                                    <a href="https://www.youtube.com/channel/UC6zDe4BG-OAuV4_JLrmu-JA" target="_blank">
                                        <em class="fa fa-youtube"></em>
                                        <span class="offscreen">YouTube</span>
                                    </a>
                                </li>
                            </ul>
                     <?php /*if ( has_nav_menu('utility-menu')):?>
                        <?php wp_nav_menu( array( 'theme_location' => 'utility-menu', 'container'=>'' ) ); 
                        dynamic_sidebar('social-media'); ?>
                     <?php endif;*/ ?>
                     <?php
                        if ( function_exists( 'ot_get_option' ) ) {
                            if (ot_get_option('cnkt_phone')) {
                                 echo '<span class="number">'.ot_get_option('cnkt_phone').'</span>';
                            }
                        }   
                     ?>             
                      </nav>
                     <?php get_search_form(); ?>   
                    </div>    
                    </div>                          
                    <nav id="mnav" class="hide-for-medium-down" role="navigation">
               <?php if ( has_nav_menu('primary-menu')):?>
                  <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container'=>'' ) ); ?> 
               <?php endif; ?>  

                  </nav>     
                </div>
            </div>  
            <div id="mnav-toggle" class="nav-toggle hide-for-medium-up" aria-hidden="true">
                <a href="javascript:void(0);">
               <span class="one"></span>
               <span class="two"></span>
               <span class="three"></span>
            </a>
            </div> 
        </header>
        <div id="mobile-nav"><div class="wrap"></div></div>
        <?php if(!is_page('home')){
           get_template_part('includes/page-banner');
        } ?>
        <!-- #page-content -->
        <div id="page-content">

Aucun commentaire:

Enregistrer un commentaire