Note that there are some explanatory texts on larger screens.

plurals
  1. POunable to align navbar to center
    primarykey
    data
    text
    <p>I have searched lots of question in this forum and it doesnt seems to help. I'm trying to center my navigation bar however despite following most of the answers <code>text-align = center;</code> doesn't work for me.</p> <p><strong>HTML code in ASP.NET:</strong></p> <p></p> <pre><code>&lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;untitled&lt;/title&gt; &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt; &lt;!--[if lt IE 8]&gt; &lt;script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Report&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Recent cases&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt; &lt;script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/scripts.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>CSS Code:</strong></p> <pre><code>body { font-family: helvetica, arial, sans-serif; background: #e3e3e3; text-align: center; } /* MENU */ #nav { text-align: center; background: #e5e5e5; float: left; margin: 0; padding: 0; border: 1px solid white; border-bottom: none; } #nav li a, #nav li { text-align: center; float: left; } #nav li { text-align: center; list-style: none; position: relative; } #nav li a { text-align: center; padding: 1em 2em; text-decoration: none; color: white; background: #292929; background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); border-right: 1px solid #3c3c3c; border-left: 1px solid #292929; border-bottom: 1px solid #232323; border-top: 1px solid #545454; } #nav li a:hover { background: #2a0d65; background: -moz-linear-gradient(top, #11032e, #2a0d65); background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); } /* Submenu */ .hasChildren { position: absolute; width: 5px; height: 5px; background: black; right : 0; bottom: 0; } #nav li ul { display: none; position: absolute; left: 0; top: 100%; padding: 0; margin: 0; } #nav li:hover &gt; ul { display: block; } #nav li ul li, #nav li ul li a { float: none; } #nav li ul li { _display: inline; /* for IE6 */ } #nav li ul li a { width: 150px; display: block; } /* SUBSUB Menu */ #nav li ul li ul { display: none; } #nav li ul li:hover ul { left: 100%; top: 0; } #nav li ul </code></pre>
    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