I have a CSS menu here that works fine, honestly. The only thing I want to change about it is the location of the tabs. They all start at the left of the page, while I'd rather have them centered at the middle. margin: auto; did not help me in this case. Can anyone look into this for me please?
http://codepen.io/anon/pen/RWrRVO
Your current list items float to left which is making it start from left of the menu. Reset them to none and use display: inline-block to align them in a line.
#cssmenu li {
float: none; /* Modify */
display: inline-block; /* Add */
padding: 0px;
}
Updated Codepen
Set the margin in UL to margin auto. Put the background in #cssmennu.
CSS
#cssmenu {
position:relative;
border: none;
border: 0px;
margin: 0 auto;
background: #333333;
padding: 0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-weight: bold;
width: auto;
text-align:center;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0 auto;
padding: 0;
width:1000px;
}
Check This DEMO
A simple solution would be:
#cssmenu {text-align: center;}
#cssmenu ul {display: inline-block;}
Related
I have a problem with my navbar. I centered it using CSS but not completely, it is a little bit to the right.
As you can see it is not centered completely in the middle as it should be.
My CSS:
.nav {
border: none;
list-style: none;
overflow: hidden;
text-decoration: none;
padding: 0;
text-align: center;
}
.nav li {
display:inline;
}
.nav a {
display: inline-block;
padding-left: 10px;
padding-right: 10px:
color: black;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 13px;
}
I think it is because I have the word PORTFOLIO which is longer, but how can I move INDEX and ABOUT a little to the left then?
<ul> elements natively have offset margin. You can reset it with:
.nav ul {
padding: 0;
margin: 0;
}
For some reason the following code won't center on the page, even when I have typed many different codes in.
Here is the code:
#charset "utf-8";
/* CSS Document */
#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
margin: 0 0 3em 0;
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:#00BFFF;
}
#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}
Please bear in mind that the nav bar is inside the header.
jsFiddle
You just need to remove the display property on the <ul> and give it a width. I also removed the padding that was on the list.
try it with
#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
margin: 0 auto 3em;
width: XXpx
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
and define the width
Edit:
function onload() {
document.getElementById("nav").style.marginLeft = Math.round(document.getElementById("nav").offsetWidth/2)+"px";}
I am trying to use a background image and/or color behind my menu items. Using either the image or just a background color the background will only match the height of the text. The height of the background needs to be 30px and the text needs to 16px and centered - like a normal button. I've tried every combination of css I can think of but can not get the results I'm looking for.
#menu-container {
/*float: left;*/
width: 960px;
margin:50px auto 0 auto;
height:50px;
}
#menu ul {
text-align: left;
height:50px;
}
#menu ul li {
display: inline;
background-image: url(images/menubutton.png);
background-repeat: no-repeat;
}
#menu ul li a {
text-transform: uppercase;
padding-right: 13px;
padding-left: 13px;
font-size: 16px;
/*line-height: 0.2em;*/
color: #000;
font-style: normal;
letter-spacing: 1px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
}
#menu ul li a:hover {
color: #ff0000;
text-decoration: none
}
Here is the code you need:
#menu ul li {
display: inline-block;
background-color: #a0a0a0; /* I changed this for testing */
background-repeat: no-repeat;
padding-top: 7px;
padding-bottom: 7px;
}
Basically, it used to be display: inline which prevented you from being able to adjust the height. You also can't use display: block because then they will not all be on the same line. So, display: inline-block is exactly what you need.
Then I added padding-top and padding-bottom with 7px each to keep the text in the middle.
Here is a working DEMO
Hope this helped.
Right, so, I've been self-editing a rather complicated site and have been stuck on this last part involving the menu. It has a float:left command (the navbar displays alined to the left of the screen) and I've been trying to get it to text-align:center (appear centered within the screen) with a wrapper but have been unsuccessful.
Below is the coding:
#nav a {
display: block;
padding: 5px;
color: #aaa;
text-decoration: none;
outline: none;
font-weight: normal;
font-family: "Droid Serif", Georgia ,serif;
}
#nav > .current-menu-item > a,
#nav > li a:hover { color: #4C4C4C }
.plus { color: #aaa }
#nav ul {
position: center;
display: none;
}
#nav li {
float: left;
position: relative;
list-style-type: none;
padding-bottom: 5px;
}
#nav li a {
letter-spacing: 3px;
font-size: 14px;
text-transform: uppercase;
padding: 8px 15px;
I'm a programming noob and pretty much survive on combination of trial and error and the "inspect element" command in google chrome. Please be gentle and rather explanatory :)
cheers,
Jess
If you want to center the ul in the nav, just add width to ul and margin: 0 auto;
If you do not want to add a width check out How do I center align horizontal <UL> menu?
instead of float give display:inline-block to your LI . Write like this:
#nav li {
display:inline-block;
*display:inline;/* For IE*/
*zoom:1;
position: relative;
list-style-type: none;
padding-bottom: 5px;
}
So I have a fairly simple vertical CSS menu based off of UL.
<ul class="vertnav">
<li>Item1</li>
<li>Item2</li>
<li>Selected</li>
</ul>
I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work.
Any suggestions? I thought I understood inheritance in CSS but I guess I don't.
.vertnav{
list-style: none;
margin: 0px;
width: 172px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
height: 45px;
}
.vertnav li{
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom: 0px none;
border-right: 0px none;
border-top: 1px solid #fff;
border-left: 0px none;
text-align: left;
height: 45px;
width: 172px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.vertnav li a{
display: block;
text-align: left;
color: #666666;
font-weight: bold;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:visited{
display: block;
text-align: left;
color: #666666;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:hover{
color: white;
background-color: #ffbf0c;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 45px;
text-decoration: none;
font-weight: bold;
}
.vertnavdown a
{
display:block;
color: #FFF;
background-color: #ff9000;
}
.vertnavdown a:hover
{
background-color: #ffbf0c;
}
^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^
It would help if you could post the css as well.
What you normally need is something like this
<ul id="nav">
<li><a>one</a></li>
<li class="active"><a>two</a></li>
</ul>
the css would be:
#nav li{
color: red;
}
#nav li a:visited{
color: green;
}
#nav li.active a{
color: blue;
}
you need to be more specific with the active css naming.
.vertnav li a:visited is very specific, and in CSS, more specific overrides less specific, even if the less specific CSS comes later in the inheritance chain.
.vertnavdown on it's own will always be overridden by .vertnav li a:visited -- the best solution is to be more specific with your description of .vertnavdown.
Changing .vertnavdown a and .vertnavdown a:hover to
.vertnav ul li a.vertnavdown .vertnav ul li a.vertnavdown:hover will fix your problem.
EDIT:
Smacks head Apologies, I should have noted that you were trying to fix a problem with the :visited links ... Since you haven't specified a style for a.vertnavdown:visited it inherits the style of .vertnav a:visited.
The solution then is to add a.vertnavdown:visited to whatever style declaration you want it to inherit from. That should fix the problem.
Try with .vertnav li a:visited .vertnavdown