I have made a nav with a list that gives a list item the class .selected when on the current page. I am trying to add a background colour to this class which works, but I can't get it to fill the whole li item. It's not adding any background colour to the left of the navs selected li item. Not sure if this makes sense?
Here's my html:
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Themes</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
And here's the css:
nav li {
border-right: solid 1px #fbfbfb;
display: inline;
font-family: 'Lato', sans-serif;
font-size: 15px;
list-style: none;
margin-left: 15px;
padding: 22px 15px 22px 0;
text-transform: uppercase;
text-align: center;
}
nav ul {
border-top: solid 1px #fbfbfb;
border-left: solid 1px #fbfbfb;
margin-bottom: 0;
padding: 20px 0;
}
nav a {
color: #6e6e6e;
text-decoration: none;
}
nav a:hover {
border-bottom: 1px solid #2ecc71;
}
.selected {
background-color: #2ecc71;
}
Just give some padding on the left to the li -
padding: 22px 15px 22px 15px;
Here's the jsFiddle
change your padding-left value:
nav li {
padding: 22px 15px 22px 10px;
}
margins and borders dont get background color.
try to cahnge it margin of li to either padding or a border of same size.
nav li {
border-right: solid 1px #fbfbfb;
display: inline;
font-family: 'Lato', sans-serif;
font-size: 15px;
list-style: none;
padding: 22px 15px 22px 15px;
text-transform: uppercase;
text-align: center;
}
The list item with class selected is being completely filled according to the instructions you've given to the browser to display the li element with a margin-left: 15px; and padding: 22px 15px 22px 0;. The padding you have specified says there should be no padding to the left of the content in the list item (the last value of 0).
Try removing margin-left: 15px; and change your padding to padding: 22px 15px 22px 15px; for your nav li element, like so:
nav li {
border-right: solid 1px #fbfbfb;
display: inline;
font-family: 'Lato', sans-serif;
font-size: 15px;
list-style: none;
padding: 22px 15px 22px 15px;
text-transform: uppercase;
text-align: center;
}
Related
I'm attempting to create a navigation menu that shows a border when an item is hovered over. While it currently looks fine, the other menu items are pushed out of the way when one item is hovered over. How would I go about making them stay put?
I've tried a few methods that were answered here but none of them have worked.
I've 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 1px;
padding: 5px 40px;
color: white;
line-height: 1.3em;
}
li a:hover {
border: solid 1px black;
padding: 5px 10px;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
</nav>
View on JSFiddle
Because you are adding padding on hover. Move the padding from hover to anchor.
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;
}
Here is the fiddle.
Move the padding property from 'li a: hover' to 'a'.
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
padding: 5px 10px;
}
When hovering over a list item, see Fiddle (https://jsfiddle.net/22upj1yc/), I want the black highlight to cover not the entire area of the list item, not leaving any white space on top or bottom. Right now it only covers the center area of the list item.
I have tried removing the padding from ul and adding a height to li like this, but it does not work. How do I do this?
ul {
display: inline-block;
list-style: none;
margin: 0 auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
height: 50px;
}
Add the hover to the <li> instead of the <a> tag, see fiddle https://jsfiddle.net/22upj1yc/1/
ul li:hover {
background-color: black;
}
I basically have updated your item, look in this jsfiddle.
Instead of just ul { }, I have made it ul li { }.
CODE
body {
font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif;
background: #f5f5f5;
}
ul li {
display: inline-block;
list-style: none;
padding: 10px;
margin: auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
}
ul li a {
color: #777;
text-decoration: none;
padding: 0 12px;
}
ul li:hover {
background-color: black;
}
ul li.next {
border-right: 0;
}
ul li.next:after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
padding: 0 10px;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="next">
Next
</li>
</ul>
Remove padding top and bottom from ul
ul {
display: inline-block;
list-style: none;
padding: 0 10px;
margin: 0 auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}
And add padding to li
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
padding:10px 0px;
}
here is link for jsfiddle https://jsfiddle.net/22upj1yc/6/
!--Sorry for bad English--!
The inline-block elements are adding around 4px space after each element (changes by browser). You can negate this with font-size: 0 on that element and switch your font size to apply directly to the li or a tags.
css
body {
background: #f5f5f5;
// removed font sizing, replaced in ul li below
}
ul {
display: inline-block;
font-size: 0; // get rid of ghost space after inline-blocks
list-style-type: none;
background: #fff;
border-bottom: 2px solid #d8d8d8;
margin: 0; padding: 0;
}
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
text-align: center;
margin: 0;
padding: 0px 6px; // added some left/right padding
font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif; // moved your font sizing here
}
...there were some other padding issues I believe, basically I set all else to 0.
fiddle
https://jsfiddle.net/Hastig/3ezn15a0/1/
I am working this site My Site The primary menu item Post An Ad has a red color background to it.Primary Menu has a dashed border.as the Post an ad item Background is big and is touching the the primary menu border i have changed the css into this
.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 23px;
padding-left: 50px;
padding-right: 30px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin-left: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
height: 10px;
margin-top: 5px;
}
The css was actualy this
.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 23px;
padding-left: 50px;
padding-right: 30px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin-left: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
}
I added
height: 10px;
margin-top: 5px;
which gave me the desired result.But the problem now is the text inside is not inside the middle of the menu item.I have tried adding padding top but it didn't help. Can anyone please help me in making it in the middle of the menu item.Thanks!!
You should add this css to your css
.header_menu_res ul a.rb_btn_postanad {background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 17px;
line-height: 11px;}
This will work for you.
Also change for hover class similar to above.
Change your class css to followings
.header_menu_res ul a.rb_btn_postanad {background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 17px;
line-height: 11px;}
I checked this solution and it works.
Hope this will help you.
You simply forgot the top/bottom padding then you need to update the plus icon's position.
.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 18px;
padding-left: 50px;
margin: 5px 0 0 20px;
padding-right: 15px 30px 15px 50px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
}
Add these:
.header_menu_res ul li {
display: table;
}
a.rb_btn_postanad {
display: table-cell;
vertical-align: middle;
}
That will work.
Hi remove this attribute:
.header_menu_res ul a.rb_btn_postanad
{
margin-top:0px;
height:10px;
}
I am trying to complete a navigation list that is contained within a div.
I have it set to have a border on the right of each item to space out each item. I am looking to have this border only on the middle items and not on the last item.
HTML:
<div id="container-navigation">
<ul id="navigation">
<li>home</li>
<li>about</li>
<li>solutions</li>
<li>training</li>
<li>payments</li>
<li>contact</li>
</ul>
</div>
CSS:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid #ffffff;
}
What would be the best way to accomplish this? Give the last item a unique class and create another CSS entry?
As suggested by thgaskell, here is one way of doing it:
#navigation li a {
color: green;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid red;
}
#navigation li:last-child a {
border-right: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/G3mD9/
Note: the last-child pseudo-class is supported for IE9+, so a bit more limited than first-child which is good for IE7+.
If it was me, I would move the border to the left instead of the right:
#navigation li a {
border-left: 1px solid #ffffff;
}
And then I would use first-child as it is has good cross browser compatibility.
#navigation li:first-child a {
border-left: 0 none;
}
If you need to support older browsers (IE7+, etc...) you should flip the border from the right side to the left side, so that you can use the css selector first-child.
Change your current css from this:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid #ffffff;
}
To:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-left: 1px solid #ffffff;
}
#navigation li:first-child a {
border-left: none;
}
EXAMPLE FIDDLE
Try the :last-child Selector, the easy way.
#navigation li a:last-child {
border-right: none;
}
Create new id or class name to last list item, then
give the style like that,
#id_name a { border-right:none !important; }
As an alternative to :first-child, you can also use the adjacent sibling selector to get IE7+ support. It needs changing to border-left from border-right like other solutions too though.
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
}
#navigation li + li a {
border-left: 1px solid #ffffff;
}
quick html question:
how can I align the text in this unordered list to the top of the div?
<div id="menucontainer">
<ul id="menu">
<li style="vertical-align:top">Home</li>
<li>About</li>
</ul>
</div>
/* TAB MENU
----------------------------------------------------------*/
ul#menu {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline-block;
list-style: none;
vertical-align:top;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
Seems like it would be by default, but this should fix any styles that are getting in the way.
ul#menu li {display: inline-block; vertical-align: top;}
http://jsfiddle.net/uyhHh/