This here is my code, what I want to do is that I have to place images right next to the vertical navigation bar without disturbing the order of the list. I tried it many times but I wasn't successful, here is my code
THE HTML PART
<ul class="navbar">
<li>» Computers
</li>
<li>» Storage Media</li>
<li><a href="#" >» Networking Solutions</a></li>
<li>» Security Solutions</li>
<li>» Office Automations</li>
<li>» Gadgets</li>
<li>» Projectors and Display Screens</li>
<li>» Softwares</li>
<li class="lastitem">» Customized Solutions</li>
</ul>
THE CSS PART(describes the behavior of the list only)
.navbar{
list-style-type: none;
margin: 0;
padding: 10 0px;
width: 280px; /* width of menu */
position:absolute;
}
.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.navbar li a:visited, .navbar li a:active{
color: white;
}
.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black;
}
.navbar ul li:hover{
background-color: black;
color: #ff0066;
display:block;
width:200px;
height:200px;
opacity:0.75;
}
.navbar ul li:hover{
padding:5px;
margin:0px;
background-color:#666666;
border-width:1px;
border-style:solid;
border-color:#333333;
}
.navbar li {
border-bottom: 1px solid white;
margin-left: 40%;
}
.navbar {
list-style-type: none;
margin: 0px;
width: 100%;
position: absolute;
}
Take out the position: absolute and add display: block; float:left to .navbar.
And add an image with float: left;.
Fiddle
Related
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
I've built a simple center aligned navigation bar for my website. However, the borders of the elements in the navigation bar aren't perfectly overlapping, giving a disjointed look. Here's what I mean:
Notice the double-borders for each link. Note that even I remove one of the borders, the hover effect still reveals the imperfection:
How can I fix this via creating borders that perfectly overlap?
Here's the code:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Well, inline-block elements have a some surrounding 'space', by default:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
box-sizing:border-box;
margin-left:-4px;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
box-sizing:border-box;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Also, keep just right border, and place left border to first li....
If you set both the li and the a element's display value to inline-block it will fix the issue you have:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li><li>
Link 2
</li><li>
Link 3
</li><li>
Link 4
</li>
</ul>
This will also allow you to hover the entire item in the menu (and not only part of it).
Another option
(without changing the HTML structure) is to change the font-size of the ul element (and set font-size to the li):
l.navbar {
font-size: 1px;
}
ul.navbar li {
font-size: 14px;
}
Working example:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 1px;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
font-size: 14px;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Add only border-left to all li items. And for the last one add border-right as well
ul.navbar li {
margin: auto;
display: inline;
border-left: 1px solid #ffb366;
}
ul.navbar li:last-child, ul.navbar li:hover{
border-right: 1px solid #ffb366;
}
Update: The issue was in the font-size of the ul
ul.navbar {
margin: 0;
padding: 0;
background-color: #ff9933;
text-align: center;
font-size: 0;
}
ul.navbar li {
margin: 0;
font-size: 14px;
padding:0;
display: inline-block;
border-left: 1px solid #ffb366;
border-right: 1px solid #ffb366;
width:auto;
}
Plnkr: https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
I've added a logo to the left side of my horizontal navigational bar and I'm having a few different problems. And first of all here is a screenshot: http://i.imgur.com/TUafzKs.png
Problems:
-I want to line up all of the text with the BOTTOM of the logo. Right now all of the text is automatically lining up with to the top.
-On hover of the links, I want the background color change to white to extend to the full height of the bar, but it's only doing a portion of it. Here is a screenshot: http://i.imgur.com/ljkEdol.png
-As you can see in the first screenshot, the bar does not extend to the ends of the page (sides and top). There is a small amount of space in between. I want there to be no white space; just the pink extending to the edges.
HTML for the bar:
<ul id="nav">
<li><img id="logo" src="images/logo2.png">
<li>Work</li>
<li>About</li>
<li>Thoughts</li>
<li>Contact</li>
</ul>
CSS:
#nav {
width:100%;
float:left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #D0489A;
border-bottom: 3px solid #D0489A;
}
#nav ul {
position: absolute;
right:0px;
bottom: 2px;
}
#nav li {
float: left;
font-family: whitney light, sans-serif;
}
#nav li a {
list-style: none;
display:inline;
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
#nav li a:hover {
color: black;
background-color: white;
}
#logo {
width:200px;
}
#nav li a {
list-style: none;
display: inline-block;
padding: 8px 15px;
margin-top:174px; // you may need to adjust to get lined up perfectly
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
I created sub menus on a website but when I mouse over the parent link, the sub menus are displayed horizontally instead of vertically. They work fine in Chrome and Firefox.
Here's the HTML code for the menu
<div class="suckertreemenu">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li> Overview</li>
<li> What do we deliver? </li>
<li> Our People
<ul>
<li> Management</li>
<li> Consultants</li>
</ul>
</li>
<li>What is it like working with us?</li>
</ul>
</li>
<li>Solutions
<ul>
<li>Business Model
<ul>
<li>Business Consulting</li>
<li>Technology Consulting</li>
<li> Managed Services Consulting</li>
</ul>
</li>
<li>Modus Operandi</li>
</ul>
</li>
<li>Industries</li>
<li>Alliances</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
Here's my CSS code below.
#charset "utf-8";
/* CSS Document */
Body{
margin:0;
padding:0;
background-color:#DCDCDC;
color:#000;
font-family: Arial, Helvetica, sans-serif;
/*font-size:12px;*/
}
.bodytext{
font-size:12px;
}
H1{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#000000;
background-image:url(../images/welc_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
P{
font-size:12px;
}
h3{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#000000;
border-bottom:#FF0000 solid 1px;
padding:5px 5px 5px 5px;
}
.btext{
font-size:12px;
}
H2 a:link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:active{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color: #FF0000;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
.ik img {
background: #ebebeb;
border: solid 1px #d1d1d1;
padding: 5px;
}
#nav{
background-image: url(../images_v2/bg_grad_02.gif);
}
li{
list-style-image: url(../images/bullet2.gif);
font-size:12px;
list-height:30px;
}
.ContactUS
{
color: #FFF;
}
.footer
{
font-size:11px;
color: #000;
}
.businessText {
font-size: 12px;font-size:12px;
color: #FFF;
font-weight:bold
}
.searchText {
font-size: 12px;
color: grey;
}
.partners {
text-align: center;
color:#000;
font-size: 12px;
}
.Block_Headers {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #D9D9D9;
}
.searchBox{
background:url(../images_v2/tboxfill.gif)
}
.suckertreemenu ul{
margin: 0;
padding: 2px 0 0 0;
float: left;
font: 14px Arial;
text-align:left;
height:29px;
z-index:100;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
/*background-color: #F3F3F3;*/ /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
background:url(../images_v2/navsplit.gif) no-repeat scroll right center transparent;/*Place right border image here*/
font: 14px Arial;
}
.suckertreemenu ul li a:link{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
}
.suckertreemenu ul li a:visited{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
}
.suckertreemenu ul li a:active{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid white;
background-color: #BD0021;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
font: normal 13px Arial;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
list-style:none;
float: left;
top: 14px;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: -16px;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 10px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
border-left: 1px solid ;
background:none;
}
.suckertreemenu ul li ul li a:link{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:visited{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:active{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:hover{
background-color: #BD0021;
color: white;
border-bottom: none;
/*font-weight:normal;*/
}
#current{
border-bottom:#AA0B34 solid 3px;
color: white;
}
.suckertreemenu ul li a:hover{
color: red;
}
.suckertreemenu ul li a:active{
border-bottom:#BD0021 solid 3px;
color: white;
/*font-weight:normal;*/
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #31458C url(../images_v2/arrow-right.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* Holly Hack for IE \*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; }
* html .suckertreemenu ul li ul li a { height: 1%; }
/* End */
/* End */
Sir,
You are setting the ul's visibility to hidden but you're not changing its state back to visible on hover, that is why you never see your sub menus.
Put in the following CSS:
.suckertreemenu ul li:hover ul {
visibility: visible;
}
Also, your sub-items display horizontally because they are set to float: left in your CSS.
.suckertreemenu ul li ul li {
list-style:none;
float: left; <------ reset this style!
top: 14px;
}
I hope that helps
I managed to solve it by adding clear:left atrribute to .suckertreemenu ul li ul li property
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
list-style:none;
float: left;
top: 14px;
**clear:left;**
}