My test site here is working fine I believe (haven't tested it in all browsers quite yet however my main navigation menu at the top wont center. There is a gap there in the middle because the logo will be going there, but I didn't want it in the way for this test.
Why isn't my navigation centering?
CSS
#main-navigation { width: 100%; height: 70px;font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; font-size: 1em; letter-spacing: 2px; line-height: 35px; margin: 0 auto;}
#main-navigation ul { width: 289px; list-style: none; }
#main-navigation li { float: left ;margin-left: 12px; }
#main-navigation li a { display: block; text-decoration: none; color: #fff; }
#main-navigation li a:hover { color: #c7bd89; }
#main-nav-left{ list-style: none; float: left; border: 1px solid #6F0; }
#main-nav-right{ list-style: none; float:right; border: 1px solid #6F0; }
header { width: 960px; margin: 0 auto; display: inline-block; /*border: 1px solid #000;*/}
HTML
<header>
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>Areas of Practice</li>
</ul>
<!-- <img class="averylogo" src="img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office">-->
<img class="banner" src="img/BANNER1-averylawoffice.jpg" alt="Banner 1">
<ul id="main-nav-right">
<li class="current">Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
As you see I already have "margin: 0 auto;" in there. So I'm confused as to why it's not working.
This is the site
However if I take out display: inline-block; it works fine but when updated on my local wordpress theme it moves down a lot.
#Quoo: Do you know why this might be happening to it for the CSS is right now. Would this be a question for wordpress.stackexchange?
You want display:block not display:inline-block on your header element.
Hi you can define yout header display:table; as like this
header {
width: 960px;
margin: 0 auto;
display: table;
}
Hi you don't need to add any thing in your header class if need navigation in center so it will with work your margin:auto; & width: 960px; like mentioned below sample:-
header {
width: 960px;
margin: 0 auto;
}
Your navigation will come in center according to above css.....
Related
I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
I have come across a few examples while searching SO but to me - as a beginner - it is not very clear what the best practices are when it comes to implementing this.
I want to have the logo in the middle of my navigation bar with 2 links to centered left of the image and 2 centered right so that my 4 links so that the center of the logo aligns with the 4 links horizontaly.
For your reference:
http://jsfiddle.net/8fc0e632/
HTML:
<body>
<nav class="menubar">
<div id= "navmenu">
<ul>
<li>Over ons</Li>
<Li>Menukaart</Li>
<li><a class="logo" href="Info.html"><img src="http://i.imgur.com/WwCbbpG.jpg" alt="First8 Logo"></a></li>
<Li>Ontbijtmanden</Li>
<Li>Contacteer ons</Li>
</ul>
</div>
</nav>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic);
.body {
font-family: "Open Sans";
}
.menubar {
background: rgb(228, 6, 19);
box-shadow: 0 1px 3px #999;
font-family: inherit;
}
.menubar ul {
display: block;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
.menubar ul li {
display: inline;
list-style: none;
}
.menubar ul li a {
text-decoration: none;
color: white;
padding: 0 15px 0 0;
font-family: "Open Sans"
}
.logo img {
margin: 10px auto 0px auto;
display: block;
width:220px;
}
If you want to do it like this, you will have to set the li width, because menu items are not the same length.
CSS:
.menubar ul li {
display: inline-block;
width: 220px;
list-style: none;
vertical-align: middle;
}
and here's your updated JSFiddle
But in my opinion the best what you can do is to use Bootstrap
//Oh and you should always use <li></li> not <Li></Li> and definitely not <li></Li>
Sometimes you can center img elements with by adding margin: 0 auto; to the property you want to center(in your case .logo img)
otherwise i would go with a margin-left:45%; or margin-left:auto with a margin-right:auto property on the .logo img elemsome solution in that ballpark.
/S
Just change your css applied to logo img. Hope this works.
.logo img {
width:220px;
vertical-align: middle;
}
For the life of me I can't see why my "div" will not wrap around the header... I've closed it, the height is not specified...
I've searched other posts and no solutions so far. Is there a conflict that I'm overlooking?
Here's the html:
<div id="navcontainer">
<div id="siteLogo"> <img src="images/some image in a folder"/>
<div id="menu">
<ul>
<li>Home</li>
<li>Calendar</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
And the CSS:
#menu li a:hover {
color: #ff9900;
border-bottom: 4px solid #ff9900;
}
#siteLogo img{
height:auto;
width: 220px;
}
#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
}
#outer {
width: 960px;
margin:0 auto;
}
#wraper {
width: 900px;
margin:0 auto;
}
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: thick 1px #ffppoo;
}
#siteLogo {
float: left;
margin-top: auto;
}
#menu {
float: right;
margin-top: auto;
}
#menu ul li {
display:inline;
}
#menu ul {
margin-top: 50px;
text-align: center;
}
#menu ul li a {
padding:0 0 0 20px;
}
Slight change to your syntax and containing/clearing your floats:
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: solid 1px #000;
overflow: hidden;
}
http://jsfiddle.net/xSfrb/
The floats are probably killing you. Try adding one last
<div style="clear:both"></div>
before closing the navContainer
The child elements are floating within a non-floating parent which causes the so-called zero-height container problem and has several solutions.
You can use overflow, like David Randall suggests
You can use an empty clear:both div, like Federico Jacobi suggests
Another solution is 'Clearfix', which uses pseudo content elements. See this related thread What is a clearfix? for further information on clearfix
EDIT: more background information on the problem http://complexspiral.com/publications/containing-floats/
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}