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 text-align = center; doesn't work for me.
HTML code in ASP.NET:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Login</li>
<li>Report</li>
<li>Recent cases</li>
<li>About</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
CSS 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 > 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
Indeed the most easiest way is to use text-align: center;. The problem you encounter is that <li> tags are block level elements. Thus it is not possible to apply text-align (applies only on inline elements) on the outer <ul> element in order to center the inner <li> elements. Therefore you have to tell the <li> tags first to behave like inline elements by applying the display property:
Markup:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Style:
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block; // or display: inline;
}
Here is my working example on jsfiddle: http://jsfiddle.net/7MKdk/
Try This:
#nav{
position:absolute;
left:30%;
}
you can remove float
Is this the part you mean?
#nav li a, #nav li {
text-align: center;
float: left;
}
By the way, try removing the float: left part. Your code almost drove me crazy. You should add IDs and classes.
Try margin:auto with exact width and remove float:left
jsfiddle link
At first float:left is needed to calculate exact width of ul. And then we need to make float:none to make use of margin:auto;
Try this:
#nav{
margin-left:10px; (Increase the px until the nav reach center)
}
Related
I made a simple 2 tier navigation menu with only one dropdown menu. I've added a 🢓 entity to that 2 tier dropdown menu and it's enlarging its containing element. There's no margin/padding/border that causes this problem. Is there a way to fix that without removing the HTML entity?
nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 1rem 0;
background-color: cornflowerblue;
color: white;
border-right: 2px solid white;
border-top: 2px solid white;
font-family: sans-serif;
font-weight: bold;
}
/* appears when floating */
nav#menu ul ul {
display: none;
position: absolute;
top: 100%;
}
nav#menu ul ul li a{
display: block;
text-decoration: none;
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 1rem 0;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul ul li {
float: none;
width: 190px;
padding: 0;
}
nav#menu ul li:hover > ul {
display: block;
}
nav#menu > ul::after {
content: "";
display: block;
clear: both;
}
.level2 li {
border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Menu</title>
</head>
<body>
<nav id="menu">
<ul>
<li>Home</li>
<li>Menu 🢓
<ul class="level2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Products</li>
<li>Help</li>
<li class="lastitem">About</li>
</ul>
</nav>
</body>
</html>
Yes, there is. The enlargement is caused by the glyph for the character entity being drawn from a different font, with different font metrics.
What I recommend doing is putting the entity reference in a span, and giving the span a minimal line-height. Something like this:
nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 1rem 0;
background-color: cornflowerblue;
color: white;
border-right: 2px solid white;
border-top: 2px solid white;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul li a span { /* <== the added rule */
line-height:1px;
}
/* appears when floating */
nav#menu ul ul {
display: none;
position: absolute;
top: 100%;
}
nav#menu ul ul li a{
display: block;
text-decoration: none;
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 1rem 0;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul ul li {
float: none;
width: 190px;
padding: 0;
}
nav#menu ul li:hover > ul {
display: block;
}
nav#menu > ul::after {
content: "";
display: block;
clear: both;
}
.level2 li {
border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Menu</title>
</head>
<body>
<nav id="menu">
<ul>
<li>Home</li>
<li>Menu <span>🢓</span>
<ul class="level2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Products</li>
<li>Help</li>
<li class="lastitem">About</li>
</ul>
</nav>
</body>
</html>
I loaded your code up and opened it in a browser, and all of the menu items are the same size. But yes, you can wrap the arrowhead in a span tag, assign it a class, and customize it to either shrink the font-size or set the line-height or whatever you want really.
I think there's a quite a few different ways you can fix this.
I encountered this problem when trying to apply styles to the hover state of a link.
I couldn't quite come up with the right phrase to google this problem so apologies if this is a duplicate post. I might also add that I am a complete beginner.
Anyway this is what happens:
The padding is not being applied inside the header, it is instead spilling out into the main page content.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Header 1</h1>
<nav>
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
</header>
</body>
</html>
CSS:
#font-face{
font-family: LobsterTwoBoldItalic;
src: url(../fonts/LobsterTwo-BoldItalic.ttf);
}
* {
box-sizing: border-box;
margin: 0;
font-family: LobsterTwoBoldItalic;
}
header {
height: 100px;
width: 100%;
background: #3399FF;
position: relative;
}
header h1 {
float: left;
padding: 20px;
color: #FFF;
font-size: 48px;
}
header nav {
float: left;
}
header nav ul {
padding: 0;
list-style: none;
position: absolute;
bottom: 0px;
}
header nav ul li {
display: inline-block;
font-size: 32px;
}
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
header nav ul li a:hover{
background: #CCC;
color: #217C7E;
}
What is it that I'm doing wrong?
Change
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
to
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 1px 25px;//this puts it to the bottom of the nav bar in JS fiddle
}
You can try it in jsfiddle here : http://jsfiddle.net/v93mzvvj/
Padding adds space to the inside of the element.
What you want is to change it so the padding on the bottom is only 0px, this way you get the spacing you want around the text, without going past the bottom of the navigation bar.
JSFiddle
Simply change this part of your CSS file:
header nav ul li a{
text-decoration: none;
color: #FFF;
--> padding: 20px 25px 0px 25px;
}
Why is the logo here having a slight overlap at the bottom portion? The CSS and HTML are given below. I've tried overriding the css properties respective to the logo <li> element. but it didn't work.
working fiddle
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul id="nav">
<li>WORK</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="logo">
<a href="#" style="padding:0;">
<img src="logo.png" />
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: right;
text-align: center;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
Depends on what you're trying to accomplish.
http://jsfiddle.net/66eKE/3/
#nav {
list-style-type: none;
margin: 0;
padding: 0;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
background: #000;
float: left;
width: 100%;
}
#nav li {
margin: 0;
padding: 0;
width: 19%;
text-align: center;
display: inline-block;
float: right;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}
#nav a:link, #nav a:visited {
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
This makes it so you can resize your logo to whatever you want. The menu item may be floating outside the div. In that case you either need to float the parent, hide the parent with overflow, or clear the float.
Refactor
I refactored a few things such as the drop shadow and background color on the parent. This allows the majority of the effect to be dependent on the parent div rather than the individual items. I'm only assuming here though. Do you have a photoshop mockup of what you want? Gives us a better idea of what you need for CSS.
I'm using this: http://jsfiddle.net/fJSVz/ as my basic menu, and it's working fantastically for a bottom fixed menu. That said, I need to display the second-level list items that appear when you hover over the menu to be displayed ABOVE, CENTERED, and INLINE (on one line) instead of one-on-top-of-the-other. Any clue what I need to alter to get this to work? I'm tearing my hair out over this!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Dropup Demo</title>
<style type='text/css'>
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
</style>
</head>
<body>
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
#navigation li ul {
/*position: absolute;*/
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
Position absolute is the reason it makes the ul on top of the that .
Here is an fixed one http://jsfiddle.net/fJSVz/36/ .
it can't be inline becouse its width=the width of its parent width, so if you want them become inline, you need give te second ul width larger than its parent, then their li can be on one line..
so
#navigation ul li ul{
width:400%; /* in this case it will be 4*100px */
}
#navigation ul li ul li{
display:inline-block
}
here is the example
when parent is relative and the child is absolute, the child width can't be more than its parent, you need manualy put it larger.
i am styling a navigation menu using the following css. I have found that it works perfectly in chrome but absolutely none of the css is beign applied in firefox or IE.
Is there something obvious that i havent done or have done here?
<style type="text/css">
#ddm {
margin: 0;
padding: 0;
}
#ddm li {
float: left;
list-style: none;
font: 8pt Tahoma, Geneva, sans-serif;
}
#ddm li a {
display: block;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
white-space: nowrap;
color:Red;
border: none;
}
#ddm li a:hover {
color:White;
background-color:#444444;
}
#ddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#ddm li ul li {
float: none;
display: inline
}
#ddm li ul li a { width: auto; }
#ddm li ul li a:hover { }
</style>
<ul id="ddm">
<li>
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</li>
</ul>
Both of you are correct. There must be something else outside of the markup that is interfering somehow with IE and FF. Sorry for any time wasting.
The last line display: inline is missing a ; at the end which is causing your problem