seo Question posted in
Some basic information to get you started with this can be found here.

Div inline not working – SEO

I want to display the menu in inline form but it’s not working .Any help ?(Don’t worry about the pictures).Here is a screenshot of what I want to achieve.The “As seen ” will occupy the red holder on the screenshot.

<div class="header" style="display:inline;">

  <div style="font-size:26px;">
    <span> As seen on</span>
  </div>

  <div>
    <a href="https://www.marketingignite.com/basic-commonsensical-seo-tips-and-tricks/" target="_blank"><img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/marketing_ignite_logo.png" /></a>
  </div>

  <div>
    <a href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.gif" alt="Logo Buyseoleads"></a>
  </div>

  <div class="seenBefore2" style="font-size:26px;">
    <span>As seen on</span>
  </div>

  <div>
    <a href="http://www.releasewire.com/press-releases/explaining-the-advantage-of-verified-and-exclusive-ppc-and-seo-leads-how-buy-seo-leads-helps-agencies-achieve-greater-success-and-conversions-549381.htm" target="_blank"><img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/release_wire_logo.png"/></a>
    <!--img src="<?php //echo get_template_directory_uri(); ?>/images/daily-news-newspaper-headline.jpg" alt="Daily News Newspaper Headline"-->
  </div>

</div>
Tags:

5

Answers


  1. 0

    The problem is that display: inline; won’t allow any block styling. And you used it on block element. If you want elements to be on the same line, you should consider using, for example, float property

    .header div {
  float: left;
}

    But do not forget about clearing the floats.

    Login or Signup to reply.
  2. 0

    If I understand you correctly, you want your blocks (as seen on, with image) in a row? If so, you can use floats. Note also I have replaced your images with placeholdit ones.

    https://jsfiddle.net/aa8zs200/

    <div style="width: 100%; position: relative;">

  <div style="float: left; margin-right: 10px;">
    <div style="font-size:26px;"><span> As seen on</span></div>
    <div>
      <a href="https://www.marketingignite.com/basic-commonsensical-seo-tips-and-tricks/" target="_blank">
        <img style="vertical-align: middle; background-color:#000;" src="http://placehold.it/350x150" /> </a>
    </div>
  </div>
  <div style="float: left; margin-right: 10px;">
    <div style="font-size:26px;"><span> As seen on</span></div>
    <div>
      <a href="<?php echo esc_url(home_url()); ?>"><img src="http://placehold.it/350x150" alt="Logo Buyseoleads"></a>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Not a lot to go on here but I’ll give it a try.

    Every <div> has block context by default. Setting display: inline; on a parent <div> will not get inherited by child <div>s. Apply display: inline; to all <div>. Use <span> instead of <div> as it’s an inline element by default and won’t try to take up the whole width of the parent element by default.

    Personally I would change the markup a bit if you’re Looking to create a menu. Use <nav>, <ul>, <li>, <a> etc. instead. Perhaps something like I have below.

    ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  padding: 3px 6px;
  float: left;
}
li img {
  vertical-align: middle;
}
    <header>

  <nav>
    <ul>
      <li>As seen on
        <a href="#">
          <img src="http://placehold.it/50x50/ffcc00/">
        </a>
      </li>
      <li>As seen on
        <a href="#">
          <img src="http://placehold.it/50x50/cc0000/">
        </a>
      </li>
    </ul>
  </nav>

</header>
    Login or Signup to reply.
  4. 0 
    span{
margin:0;
padding:0;
}

    or

    span{
display:block;
float:left;
padding:0 10px;
}
    Login or Signup to reply.
  5. 0

    For this question,You should set the display:inline attribute for all of the inner divs, not for the outer div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search