So I've been desperately trying out every method I can find online for centering my nav bar links.
However whatever I do, they seem to either line horizontally (like I want) but to the left of the page (not what I want), or they line vertically (not what I want) but to the center of the page (what I want).
It seems no matter what margin, float, display settings I use in the CSS it never renders the navbar links in a horizontal line, in the center of the page.
My code is:
HTML:
<body>
<div class="maincontent">
<div class="navbar">
<div>
<h1>Tom Love</h1>
<ul>
<li> Home </li>
<li> About </li>
<li> Portfolio </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
</body>
CSS:
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
h1 span {font-size:60%;
font-family:'Roboto Slab',sans-serif;
}
.navbar {
clear:both;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:center;
width:100%;
}
.navbar div {
float:center;
position:relative;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
margin:auto;
}
.navbar ul li {
padding:10px;
float:center;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
display:inline;
width:80px;
height:30px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
Apologies for any glaring mistakes in the code, it's my first attempt at building something outside of codeacademy and YouTube tuts.
Thanks in advance :)
Just add
display: inline;
to your .navbar ul li
Remove float:center (it does not exist)
Add display: inline or display: inline-block to .navbar ul li
If you want everything centered then place margin: 0 auto; on .maincontent and give it a width.
The differences between display values are listed here on the MDN.
It could be worth considering a CSS Reset or Normalise. (Do some research on the two options)
Have an example!
CSS
.maincontent {
margin: 0 auto;
width: 800px;
}
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
}
.navbar ul li {
padding:10px;
display: inline;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
Here I have my website: http://gyazo.com/56e069ebf8b5bd61ee30523886180b88
There are a number of issues with the nav bar.
You can see that the text or nav bar is not horizontally centered, as indicated by the hover (which is equal on top and bottom)
There is to much space in between the text, (and this spacing is the only way I've found works without the text moving around when highlighting or hovering.
The <.br> spacing on the drop down menu is too spaced apart.
So for 1. is there a way I can make the text or the nav bar (not sure what is the cause) centre so the hover looks more equal (horizontally)
For 2. Is there a way I can close the gap between the text, while still keeping the same padding settings, and so it doesn't move the text around when I use the hover function.
And 3. Is there a way to make the <.br> have half the space it currently uses
I've also added a jsfiddle if that helps: http://jsfiddle.net/d1a5eshs/
HTML code for the nav bar:
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL
</li>
<li><br>PURE-PVP
</li>
<li><br>GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
<li>CONTACT
</li>
</ul>
</div>
And the CSS for the nav bar:
/*TOP NAV BAR SECTION*/
#nav_bar {
background-color: #a22b2f;
padding:1px;
box-shadow: 0px 2px 10px;
height:45px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
text-decoration:none;
font-weight:bold;
font-size:15px;
margin-left:10px;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
margin-bottom:30px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:13px;
padding-left:10px;
padding-right:10px;
}
#nav_bar>ul>li>ul>li>a:hover {
background:#c9c9c9;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: #e2e2e2;
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:10px;
border: 1px solid black;
border-radius:5px;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
font-size:12px;
font-weight:bol;
margin-left:-20px;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
you dont have to use the in your inner list. adjust line-height to get desired result.
http://www.jsfiddle.net/9058vefk
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: #e2e2e2;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
border: 1px solid black;
border-radius:5px;
line-height:1.5em; /* added this- you can change it th=o what you want */
height:5em;
}
as far as centering the main ul li , divide the entire div (nav_bar) into 7 equal smaller divs and apply that space to each nav item.
My issue is that the first element in my nav bar which is "home" has more spacing than the rest of the elements. I can't seem for the life of me to figure out what it is. All I wanted was to have a centered evenly spaced out navigation bar but it's seeming harder than I thought.
CSS
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
list-style:none;
width:100%;
margin:0 auto;
padding:0;
text-align:center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding: 0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; overflow:visible; }
.content-outer .content-inner { width:100%; margin:0 auto; overflow:visible; position:relative; }
HTML
<div class="content-outer" id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
That is because you are not properly closing the first li in your list.
<li>Home<li>
should be
<li>Home</li>
Consider running your code through a mark up validator like W3C mark up validator when you are having formatting problems. Many times its something small like a mismatched tag or not properly closing a tag such as in this case.
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
this is a html/css nav bar how can i center it in the center of my page i tryed putting center tags in the html and float:center; under the ul but it wont work ill post my html then my css
HTML
<body>
<ul>
<li> </li>
</ul>
</body>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
padding-left:200px;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
demo here
Add text-align: center to ul and replace float: left with display: inline-block
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
text-align:center; <<add this
}
li
{
display:inline-block; << add this instead of float
}
The other parts of your css remains unchanged!
So if You add more li to your website they'll all be in the center next to each other.
<li> </li>
<li> </li>
To remove the whitespace:
<li> </li><li> </li>
Don't push enter between each line. :)
...or there's another solution is to add: margin-left:-4px:
li
{
display:inline-block;
margin-left: -4px;
}
You'll need to add:
margin: 0 auto;
to the css for the ul and a elements, and remove the float: left; from the li.
See this jsfiddle here
Since you give your a a width: 120px then why cannot give your ul the same property and using margin:
width: 120px;
margin: 0 auto;
Demo: http://jsfiddle.net/NYE3y/
Put the <ul> inside a <div> and center it using align="center"
like this:
<div align="center">
<ul>
<li>hhhh</li>
<li>hhhhh</li>
</ul>
</div>
Use an wrapper for UL and apply an width to wrapper
<div class="menu-wrap">
<ul>
<li>Menu A</li>
</ul>
</div>
CSS:
.menu-wrap {
margin:0 auto;
width:500px;
}
you can still use float for your li.
Remember to clear floats always.