Databases
StackOverflow2013
Postsdbo
POWhat is causing the gap in my horizontal scroller in my header.php? Is it the code, or do I need css?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is causing the gap in my horizontal scroller in my header.php? Is it the code, or do I need css?
    text
    copied!<p>I'm trying to implement a horizontal news ticker in a Wordpress-based blog. When doing so, everything is fine, but there's a "gap" that's kinda bothering me between the header.php and the body. It just looks like it's a "mistake" ... kind of unprofessional.</p> <p>It looks like this:</p> <p><img src="https://i.stack.imgur.com/1ST6M.jpg" alt="gap in header.php"></p> <p>I'm new to php, but I can hack things out sometimes, but not here. The theme is responsive, which is why you see "responsive" being called. The code in my header.php where the issue lies is this -- and you can see where I inserted the <strong>newsticker</strong>:</p> <pre><code> &lt;?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?&gt; &lt;?php wp_nav_menu(array( 'container' =&gt; '', 'menu_class' =&gt; 'sub-header-menu', 'theme_location' =&gt; 'sub-header-menu') ); ?&gt; &lt;?php } ?&gt; &lt;/div&gt;&lt;!-- end of #header --&gt; &lt;?php if ( function_exists('insert_newsticker') ) { insert_newsticker(); } ?&gt; &lt;?php responsive_header_end(); // after header hook ?&gt; &lt;?php responsive_wrapper(); // before wrapper ?&gt; &lt;div id="wrapper" class="clearfix"&gt; &lt;?php responsive_in_wrapper(); // wrapper hook ?&gt; </code></pre> <p>The <strong>wrapper hook</strong> is the last line in header.php. I've tried putting the 'insert_newsticker' line in various places, but they always seem to leave a gap. There is no css associated with this ticker. Maybe I have to implement css, and if so, how would I do so in a php page? Or should I alter the php to eliminate this gap? Any guidance in this regard would be greatly appreciated!</p> <p>And again, being new to php, if I'm not providing enough information, please let me know what to provide. Thanks!</p> <p><strong>EDIT:</strong></p> <p>Here is the HTML output when I Firebug it or view the source:</p> <pre><code>The header logo and menu are up here .... then comes the news ticker &lt;script type="text/rocketscript" language="javascript"&gt; jQuery(document).ready(function(){ jQuery('#news-ticker').cycle({ speed: 3000, timeout: 6000, height: 'auto', fx: 'scrollLeft', pause: 1, containerResize: 1 }); }); &lt;/script&gt; &lt;ul id="news-ticker" style="overflow:hidden;"&gt; &lt;li&gt; &lt;span class="tickerLink"&gt;news story and link is in here ... &lt;/span&gt;&lt;/li&gt; &lt;li&gt; &lt;span class="tickerLink"&gt;2nd news story ... there are 7 of 'em ... &lt;/span&gt;&lt;/li&gt; &lt;li&gt; &lt;/ul&gt; &lt;div id="wrapper" class="clearfix"&gt; &lt;div id="content" class="grid col-620"&gt; &lt;div class="breadcrumb-list"&gt;&lt;a href="http://www.domain.org"&gt;Home&lt;/a&gt; &lt;span class="chevron"&gt;&amp;#8250;&lt;/span&gt; &lt;span class="breadcrumb-current"&gt;About Us&lt;/span&gt;&lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload