<div id="nav">
<ul>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</div>
#nav {
color: #ffffff;
font-size: 12px;
font-weight: bold;
margin-left: 4px;
position: absolute;
top: 230px;
width: 800px;
}
#nav a{
color: #ffffff;
text-decoration: none;
}
#nav li {
display: inline;
margin: -4px;
padding-left: 15px;
padding-right: 15px;
padding-top: 19px;
padding-bottom: 12px;
}
#nav li a {
background-color: transparent;
}
the code above works fine in firefox with the highlighting filling out the entire "tab" of the navbar. however in ie7 it is off center and not filling up the same way. any ideas ?
You didn't close your a-tag.
And you should be careful when using padding on inline elements:
http://www.maxdesign.com.au/articles/inline/
Related
I'd like to center a hover horizontal bar/border above a menu.
(I have already tried text-align: center and align-content). how could I do this ?
this is my code :
nav ul {
list-style-type: none;
display: flex;
}
nav li {
margin-right: 15px;
margin-top: 5px;
}
nav a {
font-size: 1.1em;
color: #181818;
padding-right: 20px;
padding-top: 30px;
text-decoration: none;
}
nav a:hover {
color: black;
border-top: 3px solid #3691b0;
text-align: center;
}
nav {
position: absolute;
right: 210px;
top: 20px;
}
<nav>
<ul>
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
thanks for your help
You can't center them if you added a nav a {padding-right:20px; } that creates some white space inside <a>center </a> unless you make it both sides equal padding
Try to change it to margin-right:20px;
nav ul {
list-style-type: none;
display: flex;
}
nav li {
margin-right: 15px;
margin-top: 5px;
}
nav a {
font-size: 1.1em;
color: #181818;
margin-right:20px; //padding-right:20px;
padding-top: 30px;
text-decoration: none;
}
nav a:hover {
color: black;
border-top: 3px solid #3691b0;
text-align: center;
}
nav {
position: absolute;
right: 110px;
top: 50px;
}
<nav>
<ul>
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
I'm trying to fix this top right, meaning that it stays top right when scrolling, maximizing, and minimizing window. Something like position:absolute; top:0; right:0; .....I can't get it to work. Can you help with syntax?
<div align="center" class="socialbtns">
<ul>
<li>
</li>
<li>
</li>
<li></li>
<li>
</li>
</ul>
</div>
CSS is as follows
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #576267;
background-color: transparent;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #576267;
border: 1px solid #000;
}
</style>
Your anchor tags weren't well put together and using the CSS position:absolute with right and top set to 0 to the class .socialbtns.
Run snippet below to see it work
.socialbtns {
position: absolute;
right: 0;
top: 0;
margin-right: 15px;
}
li {
list-style: none;
display: inline;
margin: 5px;
}
a {text-decoration: none;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle
I have created the navigation menu listed below:
<div class="menu">
<ul>
<li>
<a href="index.php" target="_self" >Home</a>
</li>
<li>
<a href="preparation.php" target="_self" >Gallery</a>
<ul>
<li>
Storybooks
</li>
<li>
Preparation
</li>
<li>
Ceremony
</li>
<li>
Personal Shooting
</li>
<li>
First Dance
</li>
<li>
Details
</li>
</ul>
</li>
<li>
<a href="login.php" target="_self" >Customers</a>
</li>
<li>
<a href="about.php" target="_self" >About</a>
</li>
<li>
<a href="contact.php" target="_self" >Contact</a>
</li>
</ul>
</div>
The CSS for this menu at the moment is:
.menu {
margin: 0px;
padding: 0px;
font-family: "Times New Roman";
font-size: 14px;
font-weight: bold;
color: #6D6D6D;
}
.menu ul {
height: 26px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
color: #6D6D6D;
display: block;
font-weight: normal;
line-height: 26px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover, .menu ul li:hover a {
background: #ca9875 url("menu_images/hover.gif") bottom center no-repeat;
color: #6D6D6D;
text-decoration: none;
}
.menu li ul {
/*background:#333333;*/
/*background: #B32267;*/
background: white;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
/*width: 225px;*/
width: 135px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
background: url('menu_images/sub_sep.gif') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
/*width: 225px;*/
width: 135px;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 26px;
font-size: 13px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background: #ca9875 url('menu_images/hover_sub.gif') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
.menu p {
clear: left;
}
I would like to know if there is a way to add second-level submenu to the category "Storybooks"? What i mean is that I would like to view another submenu in the right while i hover the mouse over the "Storybooks". Is this possible with css?
Appreciate any help, thanks.
I edited your code above to make it work, see http://jsfiddle.net/BVvc6/1/ for the new code.
Note: I added two menu points below Storybooks called Storybook 1 and Storybook 2. CSS is added to the bottom of the existing code (nothing altered above).
EDIT: You should clear up your CSS code a bit, e.g. use CSS selectors like > to match specific DOM levels.
I have been struggling with this code for quite a few hours now and I have been unable to fix it. This is my CSS for my horizontal navigation:
#topmenu {
position: relative;
width: 690px;
left: 270px;
top: 11px;
}
#nav {
padding: 0px;
margin: 0px;
float: left;
}
#nav li {
float: left;
position: relative;
list-style: none;
margin: 0px;
margin-right: 6px;
}
#nav li ul {
display: none;
margin: -1em 0 0 -3em;
padding: 1em;
padding-top: 1.2em;
position: absolute;
top: 24px;
z-index: 500;
opacity: 0.96;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
filter: alpha(opacity=96);
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
display: block;
clear: both;
}
#nav li ul li a {
border-radius: 0px;
width: 125px;
font-size: 11px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 5px;
}
#nav li ul li span {
float: left;
color: #FFF;
font-size: 14px;
text-decoration: none;
font-weight: bold;
display: block;
background: #6AC1F3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 0px;
width: 145px;
}
#nav a {
float: left;
color: #FFF;
font-size: 13px;
text-decoration: none;
display: block;
background: #6AC1F3;
padding: 5px 25px 5px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-top-left-radius: 10px;
-webkit-top-right-radius: 10px;
}
#nav a:hover, #nav a.selected {
background-color: #FEA14F;
}
And this is my HTML code:
<div id="topmenu">
<ul id="nav">
<li><a class="rounded" href="index.html">Home</a></li>
<li><a class="rounded" href="about-us.htm">About Us</a></li>
<li><a class="rounded" href="contact.htm">Contact</a></li>
<li><a class="rounded" href="#">Services</a>
<ul>
<li><span>Manage</span></li>
<li>IT Management</li>
<li>Helpdesk Support</li>
<li>Planning and Consulting</li>
<li><span>Instruct</span></li>
<li>Software Training</li>
<li>Custom Curriculum</li>
<li>Social Networking</li>
<li><span>Grow</span></li>
<li>Website Design</li>
<li>Website Optimization</li>
<li>Internet Marketing</li>
<li><span>Secure</span></li>
<li>Remote Back Up</li>
<li>Scanning and Storage</li>
<li>Spam and Virus Protection</li>
</ul>
</li>
<li><a class="rounded" href="products.htm">Products</a></li>
<li><a class="rounded" href="real-estate-solutions.htm">Real Estate Solutions</a></li>
</ul>
</div>
The code works in Firefox, Chrome, but I am unable to make it work for IE. I have created additional rules for IE:
body {
behavior: url(csshover.htc);
}
#topmenu {
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
But all the menu does is display the drop-down, but when I try to select an item in the drop-down menu, the menu disappears.
What's the issue?
I see that you've mostly figured this out. You can use a semi transparent png to get the 96% opacity effect.
Alternatively you can use jquery's opacity, which i think is cross browser...
from my experience removing the filter isn't enough. the main problem is that IE li's don't extend to create one uninterrupted sequence, thus leaving empty spaces which aren't covered by the :hover rule, consequently causing the sub-menu to disappear.
the solution is to add a background color or image to the submenu's li and the triggering top menu li, in order to create a continuous sequence of li elements, with no spaces. (transparent background color won't work). if you don't want a background color applied simply add a 1pxX1px transparent PNG background image instead.
hope you find this helpful.