Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Width of Anchor</h2> <p>Anchors are by default displayed as <code>inline</code> elements. An <code>inline</code> element will only be given the minimum amount of height and width necessary to display its contents. </p> <p>You could declare that they should be displayed as <code>block</code> elements. This way, the browser will honor the <code>width</code> declaration you have provided. </p> <p>To then prevent your links from overflowing out the right of your list elements by 10px, remove the width specification for the <code>li</code>.</p> <pre><code>.servicesNavigation li { float: left; list-style: none; /* width: 219px; */ &lt;-- Remove this declaration } ul.servicesNavigation li a { display: block; &lt;-- Add this declaration padding: 3px 5px; background-color: #ccc; color: #000; text-decoration: none; width: 219px; } </code></pre> <h2>Next/Previous</h2> <p>I would suggest adding the following tags somewhere outside of your list, styled any way you'd like:</p> <pre><code>&lt;a id="previous" href="#previous"&gt;previous&lt;/a&gt; &lt;a id="next" href="#next"&gt;next&lt;/a&gt; </code></pre> <p>Then you can easily bind a handler to the <code>click</code> event of each to find the link corresponding with the new tab to display and in turn trigger <em>its</em> <code>click</code> event.</p> <pre><code>$('#next').click(function() { var selectedLink = $('div.servicesInfo ul.servicesNavigation a.selected').first(); selectedLink.parent().next().children().click(); return false; }); $('#previous').click(function() { var selectedLink = $('div.servicesInfo ul.servicesNavigation a.selected').first(); selectedLink.parent().prev().children().click(); return false; }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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