Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter image above list items
    primarykey
    data
    text
    <p>I am working on a project and having trouble with my UL>LI style.</p> <p>i am trying to put images all over the list and i want when i hover over the link the image color change so i use 2 images </p> <p>1 orange &amp; 1 blue</p> <p>but i am unable to centrise the images over top navigation links.</p> <p><img src="https://i.stack.imgur.com/ThHQb.jpg" alt="enter image description here"></p> <p>the codes are :</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="TopMenu"&gt; &lt;ul style="display:"&gt; &lt;li class="HeaderLiveChat" style="display:none"&gt;&lt;/li&gt; &lt;li class="First" style="display:"&gt; &lt;a href="/account.php"&gt;My Account&lt;/a&gt; &lt;/li&gt; &lt;li style="display:"&gt; &lt;a href="/orderstatus.php"&gt;Order Status&lt;/a&gt; &lt;/li&gt; &lt;li style="display:"&gt; &lt;a href="/wishlist.php"&gt;Wish Lists&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="/giftcertificates.php"&gt;Gift Certificates&lt;/a&gt; &lt;/li&gt; &lt;li class="CartLink" style="display:"&gt; &lt;a href="/cart.php"&gt; &lt;/li&gt; &lt;li style="display:"&gt; &lt;div&gt; &lt;a onclick="" href="/login.php"&gt;Sign in&lt;/a&gt; or &lt;a onclick="" href="/login.php?action=create_account"&gt;Create an account&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;br class="Clear"&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>/* Top Navigational Menu */ #TopMenu { position: absolute; right: 10px; top: 70px; font-size: 10px; text-align: right; } #TopMenu ul, #TopMenu li { list-style: none; padding: 0; margin: 0; } #TopMenu ul li { display: inline; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0px; padding: 0px 4px 0 6px; } #TopMenu ul li.First { border-left: 0; } #TopMenu ul li.home { background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat; height:16px; width:16px; } #TopMenu a { color: #333; } #TopMenu a:hover, #TopMenu a:visited { color: #333; } #TopMenu li div { display: inline; } </code></pre> <p>Please kindly help me to solve this</p> <p><strong>NOTE:</strong></p> <p>I want changed icon over each link, the above image is just an example image</p> <p>Thank you</p>
    singulars
    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.
 

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