I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.
Related
On this site: https://new.fbhsfoundation.com/give-now/ I have figured out how to add a custom style for a single nav but I want to make the background surround the text (I.e. more padding left and right of the yellow color) but I can't figure it out.
This is the code I tried and then applied the custom CSS to the menu item but it only did the background color not the padding:
.yellow li.menu-item a { padding 5px; }
Find and remove the padding property for .menu li and add a padding style for the .yellow class.
.menu li{
min-width: 36px;
margin: 0 12px;
/*padding: 0*/
}
.yellow{
background-color: #ffe400;
padding: 0 20px;
}
or better still, use the id of the list element(li) to add the padding style.
li#menu-item-46{
padding: 0 10px;
}
Use 12 pixels of padding instead of the 12px margin.
.menu li {
min-width: 36px;
margin: 0px;
padding: 0px 12px;
}
So I have a containing element whose width gets smaller as the screen get smaller #Aa, this element has a <nav> element that contains a <ul> element and some <li> elements as menu items.
When #Aa can no longer contain all the <li> elements the page layout is broken.
What I would like to happen is what is suppose to happen when
overflow:hidden is used. I applied this rule to #Aa.
I thought this was the purpose of overflow:hidden. I entered it manually through the web inspector.
Here is some of the relevant CSS
nav {
white-space: nowrap;
float: right;
}
nav ul li a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #2e2c60;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .1em;
}
nav ul li {
display: inline-block;
float: left;
border-left: 1px solid #ffffff;
position: relative;
list-style: none;
background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
border-right: 1px solid #ffffff;
}
Please try below code,
nav {
float: right;
width: 75%;
height: 60px;
overflow: hidden;
}
and add float:left to logo image
Well, you'll have to put codes for "nav" according to the resolution in your media queries.
In short:
You need to define the height, or max-height (more suitable for this example) in order for overflow to work, otherwise it would just expand, since is the expected behavior
element {
display: none;
}
Try removing this from the inline style of the #left-column element:
<section style="display:none;" id="left-column">
Here is example http://jsfiddle.net/x9ghnf99/7/
Have ul li menu
<div class="nav" id="nav1">
<ul>
<li>Home</li>
</ul>
</div>
Set initial background color for li. Also set some padding from text (a) to "borders" of li. And also want to create rounded corners
#nav1 ul li {
display: inline;
background-color: #dddddd;
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
}
On hoover want to change/replace color, for example to green, so as green fills whole li
With this http://jsfiddle.net/psxvy320/
#nav1 ul li :hover{
background-color: green;
}
green is only around text (a) and for other part of li i see previous background.
Tried http://jsfiddle.net/psxvy320/1/
#nav1 ul li :hover{
background-color: green;
padding: 5px 5px 5px 5px;
}
See part of previous background and li expands to left and right.
I want to see li the same widht/height, want only to change background, like here http://jsfiddle.net/psxvy320/4/ (below menu)
What need to change/add to the code?
There is a space between li and :hover in your code.
It should be .nav ul li:hover. When you add a space li :hover, it adds the hover effect to the child element (in this case, to the <a>)
Fiddle1: http://jsfiddle.net/psxvy320/5/
Fiddle2: http://jsfiddle.net/x9ghnf99/10/
Add the padding for a instead of li so that the whole item will be clickable. and change li display to inline-block
#nav1 ul li a{
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
display: block;
}
.nav ul li {
display: inline-block;
}
http://jsfiddle.net/afelixj/x9ghnf99/11/
I have a menu with four items and each one of them has a different colors.
My challenge is to darken each item on hover and I know I can use opacity to achieve this but before that, every time I hover on one of items it only highlights part of it and skips the padding. I know it is a stupid question to ask but this is my first front end job since 1999 :)
Could you please help me with understanding what is wrong here? thank you all.
this is the menu structure
<div class="menu-bar-inner">
<ul class="menu-bar-menu">
<li class="color1">Item 1</li>
<li class="color2">Item 2</li>
<li class="color3">Item 3</li>
<li class="color4">Item 4</li>
</ul>
and this is my CSS
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}
You can use this for hovering:
.menu-bar-menu li:hover, .menu-bar-menu li:hover a {
background-color: black;
}
it take care of both li element and its child anchor when li is hovered
Demo :http://jsfiddle.net/DajQ9/1/
I'd take the padding off the li elements and put it on the a elements instead. Also, set a to display: block;, so it occupies the entire height and width of its parent li. Like so:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a {
display: block;
padding: 10px 20px;
}
Here's a fiddle: http://jsfiddle.net/82uyt/
Also, you were missing the closing </div> tag.
While there are many ways to fix this, the root of your issue is the fact that you're padding both the container AND the link inside it when you style the li and the li a in one shot. What you're left with is an a tag that has padding inside an li that has padding, and the padding of the li tag is the unchanging color. By adding:
.menu-bar-menu li{
padding:0;
margin:0;
}
AFTER the declaration you have, you can fix this, or simply separate out your declarations to make it a bit more obvious. Also, when in doubt, a tool like the Firebug extension for Firefox will be your best friend. You can launch it, then click an item in your page to see the styles that are affecting that exact piece... sometimes just the highlighting/border while you move around is enough to make you see what's happening.
Yoy need to apply padding to the element on which you are applying the hover action. Here is your code updated. Visit this link: http://jsfiddle.net/dnPmE/1/
css:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {
background: #ce5043;
}
.color2 {
background: #fb8521;
}
.color3 {
background: #444444;
}
.color4 {
background: #b3c833;
}
I am just working on a site.Here got completed everything..but almost..one thing not getting..so thought you people might help me...
Here it is please :
Here i am trying to make the dotted lines just right below the links Like this :
http://oi62.tinypic.com/2f07uy8.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: none !important;
border-bottom: 1px dotted #000;
padding: 0;
display: inline-block;
}
but it's not showing up right..Here is the current image:
http://oi60.tinypic.com/es5jrq.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: #e4e4e4;
height: 0;
border-bottom: 1px dotted #000;
padding: 0px;
display: inline-block;
}
You can use after class to draw a dotted line below the links and you can use letter spacing to space out the dots the way you like it.
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.navigation li ul li a:after {
content: "...............................";
color: #000;
bottom: 5px;
left: 0;
}
Adjust the bottom value on the :after pasedo-class to suit your needs. Sometimes you wouldnt be able to see the line drawn by the :after pseudo class, so undo the Overflow hidden to figure out where the dotted line is.
===========================================================================================
fixes:
.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}
The white line was a box shadow. You need to optimize your site, it takes ages to load.
You need to give the <a>'s a fixed height, as opposed to 0. Using 22px seems to work fine.
I looked at both of the sites and after checking the incorrect one I came to some conclusions.
a. you have way too much styling. It's just cluttering up your code. The key word here is simplifying.
b. don't use font, it has become somewhat obsolete in the last years.
c. the white line above is because you're using box-shadow with offset of 1px (in foundation.css line 478). Do you need this attribute? if not, maybe you should remove it.
d. can't find any border-bottom style anywhere in the element.