How can I add an image above the text in my navigation. It should be displayed ABOVE the text.
My HTML
<ul class="nav">
<li class="whoweare">who we are</li>
<li class="services">services</li>
<li class="contact">contact</li>
</ul>
My CSS
ul.nav {
list-style: none;
border-top: 20px solid #FFF;
}
ul.nav li {
float: left;
text-align:center;
width: 23%;
}
See this fiddle http://jsfiddle.net/pixelass/YxkPz/
If you need the image to be clickable simply put it INSIDE the <a> tag
See it here: http://jsfiddle.net/pixelass/YxkPz/1/
The image needs to display:block;
HTML
<ul class="nav">
<li class="whoweare"><img src="http://lorempixel.com/150/50/sports/9/">who we are</li>
<li class="services"><img src="http://lorempixel.com/150/50/sports/4/">services</li>
<li class="contact"><img src="http://lorempixel.com/150/50/sports/1/">contact</li>
</ul>
CSS
ul.nav {
list-style: none;
border-top: 20px solid #FFF;
}
ul.nav li {
float: left;
text-align:center;
width: 23%;
}
ul.nav li img{
display:block;
}
u can also add image to link using the background-image:url('paper.gif'); nad set the text-indent:-9999px;
.whoweare{
background-image:url('image_path');
text-indent:-9999px;
}
.services{
background-image:url('image_path');
text-indent:-9999px;
}
.contact{
background-image:url('image_path');
text-indent:-9999px;
}
Related
I have a list menu and I display all the elements in that list thanks to
.navigator ul
{
display: inline-block;
width: 100%;
}
.navigator li {
margin:4px 50px -10px 0px;
float:left;
list-style:none;
font-size:17px;
}
.navigator {
width:100%;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
background:#3298BA;
}
But I want to have some elements of this list aligned to the left, others centered to the center and the last elements to the right.
And I don't know which CSS properties I can set to get this.
This is my current menu :
And the code of this menu :
<nav class="navigator">
<ul class="active">
<li class="current-item">Characters</li>
<li>Skills</li>
<li>Items</li>
<li>Stats</li>
<li>My account</li>
<li></li>
</ul>
</nav>
My objective is to have Characters aligned to the left ; Skills, Items and Stats to the center and finally My account and the glyphicon aligned to the right.
Set a width for each li (e.g. width: 16%) and add the following CSS
.navigator li:first-child {
text-align: left;
}
.navigator li:last-child {
text-align: right;
}
Don't forget to set the default alignment in your ".navgator li" CSS to "center"
.navigator ul
{
display: block;
width: 100%;
text-align:center;
}
.navigator li {
margin:4px 10px 0px 0px;
float:none;
list-style:none;
font-size:17px;
display:inline-block;
width: 14%;
}
.navigator {
width:100%;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
background:#3298BA;
}
.navigator li:first-child{
text-align:left;
}
.navigator li:last-child{
text-align:right;
}
<nav class="navigator">
<ul class="active">
<li class="current-item">Characters</li>
<li>Skills</li>
<li>Items</li>
<li>Stats</li>
<li>My account</li>
<li>1</li>
</ul>
</nav>
So, I have this list where only the first item in the list is visible. I want to be able to see other items when I hover on the first item. bellow is my code but it doesn't work. After hovering, nothing happens.
This is the list:
#manage {
float: right;
padding: 0px;
margin: 0px;
}
#manage li {
width: 100px;
height: 30px;
background-color: Aqua;
text-align: center;
list-style-type: none;
}
#header ul a {
font-size: 25px;
font-weight: normal;
padding: 0px;
margin: 0px;
text-decoration: none;
color: White;
}
.sub {
margin-top: 3px;
display: none;
}
li:hover .sub {
display: block;
}
<ul id="manage">
<li>managment
</li>
<li class="sub">Add
</li>
<li class="sub">Edit
</li>
<li class="sub">Account
</li>
</ul>
One minor adjustment to your CSS can get this to work.
If you target your first li for the hover, not only does the current CSS selector attempt to select child elements rather than sibling elements, but your elements are going to immediately disappear when you hover over any of the now visible li elements, so re-target your CSS selector to your parent ul#manage element.
#manage:hover .sub
{
display:block;
}
#manage
{
float:right;
padding:0px;
margin:0px;
}
#manage li
{
width:100px;
height:30px;
background-color:Aqua;
text-align:center;
list-style-type:none;
}
#header ul a
{
font-size:25px;
font-weight:normal;
padding:0px;
margin:0px;
text-decoration:none;
color:White;
}
.sub
{
margin-top:3px;
display:none;
}
#manage:hover > .sub
{
display:block;
}
<ul id="manage">
<li>managment</li>
<li class="sub">Add</li>
<li class="sub">Edit</li>
<li class="sub">Account</li>
</ul>
Try adding those list items in an unordered list inside the first list item
<ul id="manage">
<li>managment
<ul class="sub">
<li>Add</li>
<li>Edit</li>
<li>Account</li>
</ul>
</li>
</ul>
And in your css
.sub
{
margin-top:3px;
display:none;
}
li:hover .sub
{
display:block;
}
Your mistake is in the last rule:
li:hover .sub
Try instead:
ul:hover li.sub
I am creating a vertical navigation menu using ul and li I want to make span the full width of ul so I can have underline for each menu item (like this site (http://www.steffenallen.com/index.php))
However, there is a space in li that prevents it from spanning across the parent ul. Could someone tell me how the above website did it? Or, what I need to do?
<nav>
<ul class='menu'>
<li class="menuItem">
About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal </li>
<li class="submenu-Item">Seattle</li>
<li class="submenu-Item">South Korea</li>
</ul>
</li>
<li class="menuItem"> Contact </li>
<!-- <li> </li> -->
</ul>
My CSS is
ul,li{
list-style: none;
display: block;
}
ul.menu{
width: 170px;
/*position: absolute;*/
/*width: 100%;*/
/*margin-left: -20px;*/
border: 1px solid orange;
}
ul.submenu{
/*position: absolute;*/
/*left: -999px;*/
/*visibility: hidden;*/
display: none;
}
li{
width:140px;
margin: 0;
padding: 0;
/*width:100%;*/
border-left: 1px blue solid;
border-right: 1px blue solid;
}
span{
display: block;
}
li a, li span {
/*width: 170px;*/
/*width: 100%;*/
border-bottom: #cbcbcb 1px solid;
}
li.menuItem, li.submenu-Item{
text-align: right;
margin: 1em 0em 1em 0em;
}
li.menuitem > a{
color: #808080;
}
li a:hover{
color: steelblue;
}
li.menuItem a.current{
background-color: orange;
}
ul.menu:first-child{
margin-top: 0
}
First things first, your CSS is not well-written and hence a little difficult to understand.
The main problem in your code happens to be the default CSS that is being applied. You can remove that as follows:
ul, li {
margin: 0;
padding: 0;
}
However, I'd suggest you simplify your CSS code as follows. This will still achieve what you are looking for all the while making your code more elegant and easily readable. Please see the code below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
See this working below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
<nav>
<ul class='menu'>
<li class="menuItem"> About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal
</li>
<li class="submenu-Item">Seattle
</li>
<li class="submenu-Item">South Korea
</li>
</ul>
</li>
<li class="menuItem"> Contact
</li>
<!-- <li> </li> -->
</ul>
Hope this helps!!!
On the left side there is the default margin/padding of ULs, so just remove that. It's 40px and depends on browser if margin or padding is used.
ul, li {margin-left: 0; padding-left: 0;}
The space on the right side is caused by your widths, list has 170px, items just 140px.
http://jsfiddle.net/8q9chvbh/
I am trying to make a vertical menu, but everytime when i show the sub menu on hover, it expands the previous element, making a 'bigger box'. I have no idea how to style that.
Dont want to use some jquery plugin if there is an css solution. I have also bootstrap3, but there is no support for nested dropdowns, dropdowns inside dropdowns ... the nested ones did not open...
JSFiddle link: http://jsfiddle.net/WqW5j/
index.html
<div class="nav">
<ul class="main">
<li>1</li>
<li>2</li>
<li>
3
<ul class="sub">
<li>3-1</li>
<li>3-2
<ul class="sub">
<li>3-2-1</li>
<li>3-2-2
<ul class="sub">
<li>3-2-2-1</li>
<li>3-2-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
css
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
}
.sub > li > .sub{
display: none;
}
.main > li:hover > .sub:nth-of-type(1){
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
clear: both;
}
.sub > li:hover > .sub{
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
}
To get the nested menu work make all the li items position:relative and make the ul displayed on hover as position:absolute.
Check this fiddle
HTML:
<div class="nav">
<ul class="main">
<li>1
<ul class="sub">
<li>1-1
<ul class="sub">
<li>1-1-1</li>
<li>1-2-1</li>
</ul>
</li>
<li>1-2
<ul class="sub">
<li>1-2-1</li>
<li>1-2-2</li>
</ul>
</li>
</ul>
</li>
<li>2</li>
</ul>
</div>
CSS
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
position:relative;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
list-style:none;
padding-left:0;
width:auto;
}
.main .sub li{
float:none;
}
.main > li:hover > .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
.sub li:hover .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
I almost got this drop down menu knocked out. I'm having a problem centering it vertically. I tried to add padding and margin but one puts a weird line through my drop down areas and one puts extra spacing between my drop downs.
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li>Home</li>
<li>
About Us
<ul class="sub1">
<li>Introduction</li>
<li>Who We Are</li>
<li>Staff</li>
</ul>
</li>
<li>
Services
<ul class="sub1">
<li>Sunday Morning</li>
<li>Sunday Evening</li>
<li>Wednesday Evening</li>
</ul>
</li>
<li>Resources</li>
<li>Contact Us</li>
<li>News and Events</li>
</ul>
</div>
CSS
#navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;
position: relative;
text-align:center;
}
/* rules for nav menu */
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type:none;
}
ul#navmenu li {
width:125px;
text-align:center;
position:relative;
margin-right:4px;
margin-top:10px;
display: inline-block;
}
ul#navmenu a {
text-decoration:none;
display:block;
width:125px;
height 25px;
line-height:25px;
background-color:#FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li {
border: 1px solid green;
}
ul#navmenu .sub1 a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color:#CFC;
}
ul#navmenu li:hover a:hover {
background-color:#FF0;
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1 {
display:block;
}
/* end rules for nav menu */
Site at http://www.joekellywebdesign.com/churchsample1/index.html
Css at http://www.joekellywebdesign.com/churchsample1/css/styles.css
You can add margin-top:10px; to the li.
Updated CSS
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu > li {
margin-top: 10px;
}
You can also combine both margins.. margin: 10px 4px 0px 0px;
Additionally, adding inline-block and removing float:left will give you this result:
Code is really, really broke on top but this should help you out a bit.
Centering things vertically is a weird task to handle in CSS and I can't really explain why you need to do this but its how I've always done it.
#myDiv {
top:50;
margin-top:-150px;
}