I have the following CSS Menu with float:left; how could I make this center. Where do I add margin:0 auto?
CSS:
/* === 7. Navigation === */
#nav{
width:100%;
margin:30px auto;
}
.ie7 #nav{
padding:10px 0 0 30px;
}
#nav ul li{
margin:0 auto;
}
#nav li{
float:left;
text-align:center;
list-style:none;
font-weight:bold;
}
#nav li a{
margin-right:30px;
text-decoration:none;
color:#5d5e5d;
}
#nav li a:hover{
text-decoration:underline;
}
#nav li a:active{
font-family:inherit;
font-size:inherit;
color:#fff;
}
HTML:
<ul id="nav"><!--Navigation-->
<li id="homenav">Home</li>
<li id="portfolionav">Portfolio</li>
<li id="contactnav">Contact</li>
</ul>
If you don't have an specified width to center your menu you can just declare your list items as display:inline-block instead of float:left and jut set the text-align property to center, like so:
CSS
#nav > li {
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
list-style:none;
font-weight:bold;
}
#nav {
text-align:center;
}
This way your menu will center regardless of a width.
Add display property of your #nav as table and margin for both left and right auto.
#nav{
display:table;
margin-left:auto;
margin-right:auto;
}
First your #nav element needs to have a width less than 100%. Then add "margin:0 auto" and it should center.
Take a look at this article. It works for me when ever I am having centering issues. Its also cross-browser compatible.
Inside #nav {...};. Be aware that your nav needs a fixed-width in order for this to work.
Related
I have border-bottom on my li's but I have padding-left:10px on my ul so it nudges everything to the right by 10px.
I'm wondering if its possible to knock the border back over to the left? or is this not possible as the border is a part of the ul?
html
<ul class="menuoptions">
<li>Home</li>
<li>Firewalls</li>
<li>SSL VPN Encryption</li>
<li>Security In Education</li>
<li>Wireless Access Points</li>
</ul>
CSS
.menuoptions {
position:relative;
height:30px;
width:225px;
color:#666;
line-height:40px;
font-weight:bold;
padding-left:10px;
margin-top:-10px;
top:10px;
list-style:none;
}
.menuoptions li {
border-bottom:solid 1px #ccc;
}
Fiddle
You're applying this padding to your ul but not to the li elements. Firstly you need to reset the padding of the ul to 0 (as most browsers apply padding-left to the ul element by default):
.menuoptions {
...
padding: 0;
}
Then give the padding-left to your li elements:
.menuoptions li {
...
padding-left: 10px;
}
Working JSFiddle demo.
It is a part of the ul, however you could use margin-left:10px instead of padding (as long as it is a block element) and remove that part of the border.
I have an oddly specific error concerning CSS, Firefox and Windows.
Let me explain: I use
vertical-align:sub;
... and it displays correctly with Firefox on Linux and IE on Windows but not with Firefox and Windows. I use the same version of Firefox on both Linux and Windows.
Some pictures of the problem (sorry for the inconvenience but, I can't post pictures or more than 2 links yet, so I have to do it like that):
http://www.mercuryproductions.de/kram/Errors.html
link to the page: http://www.sontag-consult.com/
If I fiddle around with the vertical-align I can get it to work with FF on Win, but it messes up the other combinations.
This is how I would do it:
CSS
Add this to your CSS file:
ul
{
margin:0;
padding:0;
}
ul li
{
margin:0 0 0 3px;
padding:0;
display:inline-block;
list-style-type:none;
}
ul li:first-child
{
margin-left:0;
}
ul li a
{
padding:3px 8px;
display:block;
font-weight:bold;
text-decoration:none;
color:#fff;
background-color:#000;
}
ul li a i
{
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
background:url(/sprites.png) no-repeat;/*your img file here*/
}
HTML
And this is what your HTML code should look like:
<ul>
<li>
<i></i>Lang 1
</li><li>
<i></i>Lang 1
</li><li>
<i></i>Lang 1
</li>
</ul>
DEMO
BTW, it's probably recommended that you use image sprites.
Updated:
Solution 1 (IMG tags):
CSS
ul li a img
{
margin:2px 5px 0 0;
border:0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
HTML
<ul>
<li>
<img src="/deutsch.png">Deutsch
</li>
</ul>
Demo
Solution 2 (w/ image sprites):
CSS
ul li a i
{
background:url(/sprites.png) no-repeat;
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
ul li a i.deutsch
{
background-position:0 0;
}
Solution 3 (w/o image sprites):
CSS
ul li a i
{
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
ul li a i.deutsch
{
background:url(/deutsch.png) no-repeat center center;
}
HTML
<ul>
<li>
<i class="deutsch"></i>Deutsch
</li>
</ul>
Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it's appears like inline block and it's too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.
any help or advice will be appreciated!
http://jsfiddle.net/an4Ng/
My code is:
nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}
nav ul li{
float:left;
position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{
text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
overflow:visible;
position:static;
}
nav ul li ul{
width: auto; height: auto;
display:block;
position:absolute;
border:3px solid gray;
background-color: black;
}
nav ul li ul li a{
text-decoration:none;
font-size:large;
margin-top:15px;
}
nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}
I just threw this together but how's this?
http://jsfiddle.net/PgVQC/3/
Obviously I haven't tested it in IE7 but it's how I tend to do my dropdown menus.
You might have to throw in a bit of jquery to get the menu to display in IE7, here's an example from a site I built a few weeks ago.
http://jsfiddle.net/9L4EC/2/
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach
just wondering if some one could help me with css hack for safari on mac, what I'm trying to do looks good on safari for windows but looks different on mac,
on my top navigation I'm trying to center everything,it looks centered on firefox,ie,safari but on safari on mac it's not centered, so I wanted to give it left margin that could only be visible on safari for mac.
<div id="main_nav">
<ul>
<li>about us</li>
<li>women</li>
<li>men</li>
<li>beauty</li>
<li>the lust</li>
<li>press</li>
</ul>
</div>
#main_nav {
width:74.7em;
height:2.3em;
position:absolute;
top:13.9em;
left:0;
background:#000;
margin:0 0 0 6.9em;
text-align:center;
}
#main_nav ul {
width:49em;
height:1.7em;
color:#FFF;
font-size:1.3em;
letter-spacing:.2em;
text-alight:left;
margin:0 auto 0 auto;
}
#main_nav ul li {
display:inline;
list-style-type:none;
}
#main_nav ul li a {
display:block;
height:1.6em;
float:left;
color:#FFF;
text-decoration:none;
margin:0em 0 0 4em;
padding-top:.2em;
}
#main_nav ul li:first-child a {
margin-left:0.5em;
}
#main_nav ul li a:hover {
background-color:#90F;
}
thanks
I do not have a Mac to test on, but this CSS seems to do the trick in Safari, Chrome, Firefox, Opera, and Internet Explorer on Windows. (I only posted the changed part)
#main_nav {
width:74.7em;
height:2.3em;
margin:13.9em auto 0;
background:#000;
text-align:center;
}
#main_nav ul {
width:49em;
height:1.7em;
color:#FFF;
font-size:1.3em;
letter-spacing:.2em;
text-alight:left;
margin:0 auto;
}
Small thing... This line in #main_nav ul is redundant as the short form allows you to specify the first two and have the same values applied to the opposite sides:
margin:0 auto 0 auto;
So, the equivalent version is:
margin:0 auto;