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.
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;
}
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;}
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
I'm making some tabs, using a background image as the hover state background. The only one that looks fine is "Day". I presume, because it's only 3 characters and the other tabs are 4 characters. Is there a way to make it so the hover background is centered on all of them? Here is the css for the list.
li {
font: 9pt "Helvetica Neue", Helvetica, Arial, "Trebuchet MS", Trebuchet, serif;
margin-top: .192333333em;
float: right;
height: 19px;
width: 40px;
margin-left: 10px;
display: inline-block;
margin: 7px;
}
li.current {
background: url('img/red-current-bg.png') no-repeat;
line-height: 1.6em;
}
ul#tabnav {
margin: 0;
}
ul#tabnav li a {
text-shadow: 0 1px #800000;
text-decoration: none;
padding: 8px 11px;
line-height: 1.6em;
}
ul#tabnav li:hover {
background: url('img/red-current-bg.png') 0 0 no-repeat;
}
Can you just adjust the horizontal position of the background to adjust the pixels or center the image?
ul#tabnav li:hover {
background: url('img/red-current-bg.png') 3px 0 no-repeat;
}
or
ul#tabnav li:hover {
background: url('img/red-current-bg.png') center top no-repeat;
}
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