2017-02-13 11 views
1

Я попытался добавить изображение (137 × 30) рядом с панелью поиска, но я не могу сделать это правильно. Он должен выглядеть следующим образом:Как добавить изображение в нужную позицию на веб-странице

enter image description here

Код для панели поиска выглядит так:

<?php get_search_form(); ?> 

Добавление изображения дал мне этот результат:

enter image description here

Как правильно настроить изображение?

Код для этого сайта, как ссылки, если вам нужно, чтобы посмотреть на него:

<!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="https://script.advertiserreports.com/redirector/dnr"+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://test-shaver-inc.pantheonsite.io/resource-center/news/">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://www.shaverinc.com/contact-us/">Contact Us</a> 

           </li> 
           <li class="linkedin"> 
            <a href="https://www.linkedin.com/company/shaver-industries-inc<?php 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="https://www.facebook.com/ShaverIndustriesInc?fref=ts" 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"> 
+0

Пожалуйста, опубликуйте сгенерированный HTML, а не PHP. – TricksfortheWeb

+0

К сожалению, исходный код этой веб-страницы - PHP .... –

+0

Да, но когда вы откроете его в веб-браузере, он будет генерировать HTML. Можете ли вы опубликовать этот HTML-код? – TricksfortheWeb

ответ

0

Я понять это сам, я должен использовать Div + таблицу, чтобы понять это

<div style="position: relative; width: 600px;"> 
         <table style="width: 100%"> 
        <tr> 
        <td width="80%"><?php get_search_form(); ?></td> 
        <td width="20%"><img src="<?php echo get_template_directory_uri(); ?>/img/flags.png"></td> 
        </tr> 
        </table> 
        </div> 
0

Добавить идентификатор за пределами вашей input и img и добавить ниже CSS. Пример демонстрации добавлен так. Смотрите на скрипку http://jsfiddle.net/wD5T9/

HTML

<div id='searchWrapper'> 
    <input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/> 
    <img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/> 
</div> 

CSS

#searchWrapper img { 
    vertical-align: middle; 
} 
+0

Привет, Быть, спасибо за помощь, но это не работает ...Изображение все еще отображается под панелью поиска –

0

Вот решение вашей проблемы .... enter image description here

Ваш Html

<div class="searchform"> 
<form method="get" action="http://www.shaverinc.com"> 
    <label for="search" class="offscreen">Search Products</label> 
    <input type="search" placeholder="Search Products" id="s" name="s" value=""> 
    <button type="submit"><i class="fa fa-search"></i><span class="offscreen">Submit</span></button> 
</form> 
</div> 
<div class="flags">Hello</div> 

Ваш CSS Здесь .....

.searchform { 
position: relative; 
overflow: hidden; 
height: 34px; 
width: 90%; 
display: inline-block; 
float: left; 
} 
.flags{ 
display: block; 
width: 9%; 
height: 34px; 
position: relative; 
float: left; 
background: #ccc; 
} 

Манипулирование ширину в соответствии с вашими потребностями ...

+0

Что случилось, чувак ... Ваша проблема решена ..... ?? По крайней мере, расскажи нам что-нибудь .... – Prateek