I've created a nav menu that is unnecessarily adding extra space to the right side of it. When the page is made smaller it adds a scroll bar to the bottom of the page which makes the page uncentered. After some digging in Dreamweaver it looks like the UL element's surrounding box is not centered with the actual navigation menu. It juts off to the right and seems to be causing the problem. How to I get this centered with the nav menu?
I've also included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style: none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
}
.main-nav li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
<nav class="nav">
<ul class="main-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
<nav>
View on JSFiddle
Simply add in your nav the overflow property:
nav {
float: left;
width: 100%;
overflow-x: hidden;
}
It seems like there's too much padding in between the menu items. kick that down in the css block:
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px; //first parameter is top/bottom, the second parameter is left/right. kick it down to something like 5px 10px;
color: white;
line-height: 1.3em;
}
Take out the right:50%; and for margin, use "margin:0 auto;"
the auto will auto-center the nav
You shouldn't use floats or lefts to align your navbar. Instead try doing this: It makes the navbar centered and no scroll is appearing for small devices. Update your ul and li class to this:
ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
Furthermore, if you want your navbar to appear in a list form for small devices, simply add this media query for your preferred range:
#media (max-width: 480px) {
ul li {
display: block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
}
I've been working on my navbar and with the help of this site, managed to find out how to center it using text align. However, there is a weird indent that I cannot account for in my navbar as you can see in the example so when I center it, it's taking the indent into consideration too, so it doesn't look right.
How do I remove this indent and have it centered properly? I'm rather new to this, so advice would be great. Many thanks.
http://jsfiddle.net/f2eNm/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
You need to change some things.
.nav1
{
text-align: center;
}
.nav1 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/f2eNm/3/
I am trying to vertically align an anchor tag within a list item, i have managed to horizontally align it so far. See code below and check jsfiddle for demo.
HTML
<div id="header-top">
<div id="header-top-middle">
<ul>
<li><a data-icon="" a href="#">1</a></li>
<li><a data-icon="" a href="#">222222222</a></li>
<li><a data-icon="" a href="#">3</a></li>
<li><a data-icon="" a href="#">4</a></li>
</ul>
</div>
CSS
#header-top {
height:30px;
background-color:#303030;
width: auto;
border-bottom: 2px solid #DDDDDD;
}
#header-top-middle {
width:1024px;
margin: 0 auto;
height:30px;
}
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
}
#header-top-middle ul li {
border-right: 1px solid #DDDDDD;
display: inline;
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
See jsfiddle
You can use display: table for your list:
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
}
as well as display:table-cell; and vertical-align: middle; for your link inside list item:
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align: middle;
}
Updated Fiddle
Add line-height:30px to a:
http://jsfiddle.net/hRadK/1/
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
line-height:30px;
}
This might help: http://css-tricks.com/centering-in-the-unknown/
In the link, Chris deals with centering an element whose width and height are unknown.
#header-top-middle ul li a {
color: #FFFFFF;
//display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/hRadK/8/
Try the approach outlined in this answer of wrapping your hyperlinks in a div and applying the vertical alignment on the div. The only other amendment you will need to make is then to remove the block display of hyperlinks you currently have defined.
#header-top-middle ul li a {
color: #FFFFFF;
/* display: block; - remove this rule */
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
Updated fiddle
I am currently trying to get a horizontal navigation menu to stretch from across the whole of my container.
The div that it is in stretches across fine, but the actual list items don't and I am unsure why.
The CSS for the right hand bar, the container holding the nav bar, and the nav items is:
#rhs{
position: relative;
float: right;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
nav{
display: block;
position: relative;
width: 1010px;
height: 50px;
margin-left: 7px;
background-color: #F0F0F0;
border-top: 1px solid #616161;
border-bottom: 1px solid #616161;
z-index: 99999;
}
nav li{
list-style: none;
display: inline;
margin-left: 10px;
z-index: 99999;
}
The full jsfiddle: http://jsfiddle.net/zDzLs/
Any ideas?
Change css of rhs div to:
#rhs{
position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
your code was making my OCD go crazy.
I've revised it a bit for you here. Hope you like it.
http://jsfiddle.net/zDzLs/3/
<header>
<img class="logo" src="images/header.png"/>
<nav>
<ul>
<li class="active">Home</li>
<li>What is Counselling?</li>
<li>Personal Counselling</li>
<li>Relationship Counselling</li>
<li>Supervision of Counsellors</li>
<li>Life Coaching</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="container">
<div class="content-left"><div class="inner">LEFT</div></div>
<div class="content-right"><div class="inner">RIGHT</div></div>
</div>
* {
padding: 0;
margin: 0;
}
body{
background-color: #F0F0F0;
font: 14px Century Gothic;
}
header {
width: 960px;
margin: 30px auto;
}
header .logo {
width: 300px;
}
nav {
background: #F0F0F0;
margin-top: 30px;
overflow: hidden;
}
nav ul li {
list-style-type: none;
float: left;
margin-right: 2px;
font-size: 12px;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #333;
color: #fff;
text-align: center;
}
nav ul li a:hover,
nav ul li.active a {
background: #666;
}
.container {
margin: 30px auto 0;
width: 960px; /* 958px */
border:2px solid #616161;
overflow: hidden;
background: #fff;
}
.content-left {
float: left;
width:628px;
margin-right: 30px;
}
.content-right {
float:left;
width: 300px;
background: #f9f9f9
}
.inner {
padding: 20px;
}
Ok so I have my web page (http://jsfiddle.net/HVGBf/) but it's not working the way I would like it to be working.
As you see on a small browser the Logos text is jumping down because of the line-height.
I'd like the Project Name to be abreast if possible, else i'd like it to be among each other but how can I accomplish that?
Html:
<body class="home">
<div id="wrapper">
<div id="logo">
<span>Project name</span>
</div><!-- endLogo -->
<div id="menu">
<ul>
<li>Home</li>
<li>Over ons</li>
<li>Projecten</li>
<li>Vrienden</li>
<li>Doneren</li>
<li>Contact</li>
</ul>
</div><!-- endMenu -->
</div>
</body>
</html>
Css:
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
html, body { font-family: "helvetica", arial; margin: 0; padding: 0; height:100%;}
#wrapper {
min-width: 800px;
}
.home #logo {
background: #00B65F;
width: 22%;
float: left;
padding: 0 1% 0 2%;
text-align: right;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
line-height: 180px;
height: 180px;
font-size: 220%;
}
.home #logo span {
font-color: #000;
}
.home #menu {
background-color: #000;
float: right;
background-repeat: repeat;
padding: 56px 5% 56px 1%;
-webkit-border-top-left-radius: 15px ;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
margin-left: 6%;
width: 63%;
height: 70px;
}
#menu ul {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
list-style-type: none;
}
#menu a {
float: left;
text-decoration: none;
font-size: 150%;
color: #fff;
padding: 0.4em 0.7em 0.4em 0.7em;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
}
#menu a:hover, #menu .active { background-color: #00B65F; }
If you just want the words "Project" and "Name" to be on one line, then this should do the trick:
#logo span { white-space: nowrap; }
The text might extend outside of #logo due to how you've sized it (by percentage), so to fix that you could also add a minimum width like so:
#logo { min-width: 200px; }
Edit: I noticed you also have margin-left set to 6%. I would recommend using a constant value like 20px. Also, here is a jsFiddle with the recommendations I've mentioned.