What is the best way to center this nav bar?
I know I can center if I add
#nav ul {
margin:0 auto;
width:720px;
}
or if I remove width and add padding to #nav, but none of these seems right because If I ever need to add another item to the nav bar I will need to change the numbers. any ideas?
this is the code I have so far:
#nav {
background:url(../images/nav-background.jpg) repeat-x;
height:50px;
width:960px;
text-transform:uppercase;
position:fixed;
}
#nav ul li {
display: table-cell;
vertical-align:top;
line-height:3.8em;
}
#nav li {
display:inline;
font-family: 'Philosopher', sans-serif;
font-size:0.9em;
letter-spacing:0.1em;
font-weight:700;
}
#nav li a {
color:#848484;
text-decoration:none;
padding:5px 8px;
}
#nav li a:hover {
color:#fff;
background-color:#636566;
}
.nav-separator {
padding:0 2px;
}
#nav .logo a:hover {
background:none;
}
<div id="nav">
<ul>
<li>Lourenço<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Áreas de Atuação</li>
<li class="logo"><img src="images/logo-lourenco-advogados.png" /></li>
<li>Clientes<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Notícias<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Contato</li>
</ul>
</div>
Try:
#nav {
text-align: center;
}
#nav ul li {
display: inline-block;
}
You can use:
min-width: Apx; /* any value */
width: auto;
margin:0 auto;
Related
I'm trying to use PureCSS, and get menudrop downs using CSS (rather than via either YUI or Jquery for portability reasons).
This is what I have so far:
http://jsfiddle.net/ket262p3/3/
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li class="pure-menu-separator"></li>
<li>Test3</li>
</ul>
</li>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</li>
</ul>
</div>
and:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-horizontal ul {
padding:0;
margin:0;
font-weight: bold;
width: 100%;
position: relative;
}
.pure-menu-horizontal ul li {
float:left;
position: relative;
display: block;
}
.pure-menu-horizontal ul li a {
display:block;
}
.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 58px;
}
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
}
I think the underlying problem may be some subtly in purecss that causes the second level menu not to display.
Ignore the extra classes - they represent earlier stages of getting this to work with YUI or JQuery.
You have to set the visibility of your subnavigation to visible.
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}
Example:
http://jsfiddle.net/ket262p3/6/
On further investigation it appears that a lot of the infrastructure for doing this is already built into PureCSS, but not documented very well. I replicate the solution below so that other people can find it.
The main solution is documented here: https://gist.github.com/maxbeatty/7829915
I have replicated in a jsfiddle: http://jsfiddle.net/0562cqd8/1/
The html is as follows
<!-- includes pure-min.css -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
Heading
<ul class="pure-menu-children">
<li class="pure-menu-can-have-children pure-menu-selected">
Cars
<ul>
<li>
Blue
</li>
<li>
Red
</li>
<li>
Green
</li>
</ul>
</li>
<li>
Trucks
</li>
</ul>
</div>
With CSS like this:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-can-have-children:hover {
background: #eee;
}
.pure-menu-can-have-children:hover ul {
top: 35px; /* height of menu li */
left: 0;
visibility: visible;
border: 1px solid #b7b7b7;
background: #fff;
}
Please try this css
.pure-menu ul
{
margin:0;
padding:0;
float:left;
width:100%;
}
.pure-menu ul > li
{
margin:0;
padding:0;
float:left;
list-style:none;
position:relative;}
.pure-menu ul > li >a
{
margin:0;
padding:0;
float:left;
padding:8px 4px;
text-decoration:none;
color:red;}
.pure-menu ul > li > ul
{
position:absolute;
top:100%;
left:0;
display:none;
width:200px;
}
.pure-menu ul > li > ul >li
{
width:100%;
}
.pure-menu ul > li > ul >li >a
{
padding:8px 20px;
background:red;
color:#fff;}
li.pure-dropdown:hover ul {
display:block;
}
change the color as per your requirement
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code for navigation:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JSfiddle
If I put width:960px; for the wrapper, it will cut the margin on both sides. I need to avoid using text-align:center; for nav ul because of what happens when the window is resized. When the window is shrunk, lists should be center aligned; in window of normal size, lists should be displayed in the left side of the navigation bar.
JSFiddle - DEMO or SHOW [EDITED]
You could use CSS3 #media queries for small screen sizes.
HTML:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME
</li>
<li>COMPANY
</li>
<li>MARKETS/SOLUTIONS
</li>
<li>PRODUCTS/SERVICES
</li>
<li>BUSINESSES
</li>
<li>INVESTORS
</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
box-sizing:border-box;
}
body {
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
nav ul {
background-color: red;
}
nav ul li {
display:inline-block;
padding:15px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover {
text-decoration: underline;
background-color:none;
}
nav ul li:hover {
background-color:#000;
}
#media (max-width: 960px) {
nav {
text-align: left;
}
}
Here is what you looking for http://jsfiddle.net/adarshkr/ubz7Lcft/9/
Style your CSS using media quires
Changes made
.wrapper{
width:100%; /*takes full width*/
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
text-align:left; /* for normal view */
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center /* for resize */
}
}
First correct the spelling of wrapper and then set its width to 80%.
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
width:80%;
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JS Fiddle
Changed made in CSS
nav {
background-color: red; /*apply color for nav instead of ul */
}
nav ul{
text-align:left;
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center;
width:80%; /*reduce the list width */
margin:0 auto; /* to make it align center */
}
}
I made a tab Menu by using <ul> and <li> tags with styles. The problem is that the parent <ul>,<li>,<a> styles inherit to children. How can I disable inherit CSS?
I think I should put something like > or < but im not sure. How can I solve this problem?
<stlye>
#tabPromote li { display: inline; }
#tabPromote ul { width:440px; height:34px; overflow:hidden; margin:0 0 30px 0; }
#tabPromote ul li { float: left; width:210px; height:34px; padding:0 0 0 0; margin:0 10px 0 0; }
#tabPromote ul li a { display:block; height:30px; padding:0 0 0 10px; border-bottom:4px solid #eee; font-size:16px; color:#aaa; }
</stlye>
<div id="tabPromote">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="tabCont" id="tab-1">
<ul>
<li>list1</li>
<li>list1</li>
</ul>
</div>
<div class="tabCont" id="tab-2">
<ul>
<li>list1</li>
<li>list1</li>
</ul>
</div>
</div>
<script>
$('#tabPromote div.tabCont').hide();
$('#tabPromote div:first').show();
$('#tabPromote ul li:first').addClass('active');
$('#tabPromote ul li a').click(function(){
$('#tabPromote ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabPromote div.tabCont').hide();
$(currentTab).show();
return false;
});
</script>
You can use #tabPromote > ul and #tabPromote > ul li to limit the styling to the first level after <div id="tabPromote">.
To target the immediate children of a enclosing element, you can use '>'. This excludes the deeper nested elements.
Ex:
#tabPromote > ul { width:440px; height:34px; overflow:hidden; margin:0 0 30px 0; }
#tabPromote > ul li { float: left; width:210px; height:34px; padding:0 0 0 0; margin:0 10px 0 0; }
#tabPromote > ul li a { display:block; height:30px; padding:0 0 0 10px; border-bottom:4px solid #eee; font-size:16px; color:#aaa; }
I would like to center my floated menu(ul tag)in my page and can't figure out what's wrong with my css. Please help. Thanks.
My html
<section>
<div id='index'><img src='images/index_pic.png' title='index Picture'/></div>
<nav>
<ul> ////I want to center this menu, but the 3 buttons all float to left.
<li id=browser ><a href=#></a></li>
<li id=user_management><a href=#></a></li>
<li id=log_out><a href=#> </a></li>
</ul>
</nav>
</section>
and my css
section {
color: blue;
margin: 0 auto;
color:blue;
width:980px;
height:700px;
}
ul{
list-style:none;
}
#browser a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/browser_BT.jpg');
}
#user_management a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url("../images/user_management_BT.jpg");
}
#log_out a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/log_out_BT.jpg');
}
section #index img{
padding:3px;
border:1px solid #a6a6a6;
}
Try this:
ul {
list-style: none;
width: 810px;
margin: 0 auto;
}
Stumped...my menu shows up about 25% of the time in IE7. It appears to be a stacking issue: I can see the menu at first but once the header image and the rest of the page loads, it disappears. I've tried setting the z-index in both the menu and its parent elements, but nothing's working...
Here's the site: http://www.hospiceofmissoula.com
html {
height:100%;
}
body, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
}
body {
behavior:url("csshover3.htc");
font-size:14px;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#bacddb;
height:100%;
}
h1 {
font-size:18px;
color:#752eca;
text-decoration:none;
}
h2 {
font-size:14px;
color:#909090;
text-decoration:none!important;
}
h3 {
color:#4d2288;
font-size:18px;
}
p {
text-indent:20px;
color:#000;
}
p a {
color:#000;
text-decoration:underline;
}
p.foot {
text-indent:0px;
}
p.link {
font-size:18px;
color:#30F;
text-decoration:underline!important;
}
a {
color:#4d2288;
text-decoration:none;
outline:none;
}
a:visited {
color:#4d2288;
}
p a:hover {
text-decoration:underline!important;
}
label {
text-align:left;
}
ul#nav {
padding:5px;
margin:0px auto;
width:100%;
z-index:999;
}
ul#nav li a {
display:block;
font-weight:bold;
padding:2px 10px;
background:#bacddb;
}
ul#nav li a:hover {
background:#d9c3f2;
color:#4d2288;
}
li {
list-style:none;
float:left;
position:relative;
width:225px;
text-align:center;
margin:0px auto;
margin-right:4px;
border:1px solid #4d2288;
}
li ul {
display:none;
position:relative;
width:auto;
top:0;
left:0;
margin-left:-1px;
}
li>ul {
top:auto;
left:auto;
border:none;
}
li:hover ul {
display:block;
}
ul#nav li.current a {
background:#bb96e4;
}
ul#nav li.current a:hover {
background:#d9c3f2;
}
<div id="maincontent">
<div id="header">
<div id="lyr_ddmenu">
<ul id="nav">
<li class="current">Hospice of Missoula
<ul class="sub">
<li>Charity Care</li>
<li>History</li>
<li>Mission Statement</li>
<li>Services</li>
<li>Staff</li>
</ul></li>
<li>What is Hospice?
<ul class="sub">
<li>Frequently Asked Questions</li>
<li>End-of-Life Information</li>
<li>Advanced Directives</li>
<li>Helpful Links</li>
</ul></li>
<li>Volunteering</li>
<li>Contact Us
<ul class="sub">
<li>Upcoming Events</li>
<li>Employment</li>
</ul></li>
</ul>
</div>
#header {
padding-top: 160px !important;
}
#lyr_ddmenu {
margin: 0 auto !important;
position: relative !important;
left: auto !important;
top: auto !important;
}
.colmask {
margin-top: 20px !important;
}
A lot of problems in your code... a lot, the more important ones being: don't abuse XHTML, don't use so much JS (particularly for simple things like rounded corners), and — the most immediately relevant to your problem — be careful using position: absolute;.