For some reason my website won't use my styles!
I have this in my stylesheet:
#nav {
margin: 15px 0 15px 0;
padding: 0;
width: 965px;
background: #ffffff;
border-bottom: 0px #f2e9e1 solid;
height: 2.1em;
}
#nav ul {
display: block;
margin: 0;
padding: 0 0 0 10px;
line-height: 17px;
list-style: none;
z-index: 90
}
#nav ul li {
float: left;
margin: 0 1px 0 0;
padding: 0;
font-size: 14px;
letter-spacing: 1.0px;
line-height: 17px;
list-style-type: none;
white-space: nowrap;
}
#nav ul li a {
float: left;
display: block;
width: auto;
font-weight: normal;
background: transparent;
text-decoration: none;
color: #1c140d;
margin: 0;
}
Part of my HTML:
<div id="nav">
<ul class="level1">
<li>Development</li>
<li class="sep">|</li>
<li> Search
<ul class="level2" style="position: absolute; top: 0px; left: 0px; visibility: hidden; ">
<li>Seqqle search by sequence</li>
<li>CViT search tool</li>
<li>Leggle search</li>
</ul>
</li>
But my developer tools says that the matched CSS rules for the first <li> is li instead of #nav ul li.
Any idea?
Just an idea, but make sure your stylesheet is actually being loaded. Unless you've changed something in your browser, there is no reason those styles shouldn't be working.
Also, if you can, provide a URL we can look at.
Your HTML / CSS seems to be working as intended; I can see that the | turns red when I add color: red; to the #nav ul li rule. There must be something else (style sheet garbled or not loaded, other code) going on here.
Related
I am trying to have a horizontal menu, but the ul is aligned to the right instead of in the middle.
Here are my CSS and HTML:
CSS:
#menu
{
clear: both;
float: left;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: right;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
float: left;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
}
HTML:
<div id="menu">
<ul>
<li>
<a href="http://www.tahara.es/">
<span>HOME</span>
</a>
</li>
<li>
<a href="http://www.tahara.es/shop/">
<span>SHOP</span>
</a>
</li>
</ul>
</div>
Thanks in advance for any suggestion!
You can remove your float properties.
Just add a width to your #menu ul and add margin : 0 auto; to make it centered.
Example :
#menu ul {
width: 300px;
margin: 0 auto;
}
Live demo here : http://codepen.io/joe/pen/uAaHo
Change #menu ul - use float: left instead of float: right
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: left;
}
I fixed your problem.
The html code is alright and i changed the css code:
#menu
{
clear: both;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
I basically deleted any occurrency of float:right;. Fixing your problem is as simple as this.
Here's a DEMO.
If you need further assistance i can help you.
I also suggest you a few link that you can find useful for building css menus:
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
The simplest code to position Your menu, is quite simple.
This code works correctly, tested on latest Safari, Chrome, Opera, Firefox. Also on IE11 and IE8.
http://jsfiddle.net/5ZrEx/
#menu
{
width: 830px;
margin: 0 auto;
display: inline;
}
#menu ul {
text-align: center;
}
#menu li {
display: inline-block;
}
i'm designing a menu & sub-menu
and i am facing an issue with the alignment for the sub-menu
i would like to have the end of sub-menu to be aligned with the right-edge of "more" option, as arrow is pointed at.
if i use right: -somepx;
it would require me to have different alignment
in the chrome it would be 10px
while in the safari would be 5px
is there a cross platform solution for this.
the HTML code is:
<div id=header>
<ul id="menu">
<li>Get Closer</li>
<li>Know your team</li>
<li>More
<ul>
<li>Our Story</li>
<li>Clients</li>
<li>Testimonials</li>
<li>Pricing</li>
<li>Case Studies</li>
</ul>
</li>
<li>Get in touch</li>
</ul>
</div>
the CSS code is
#header #menu {
margin-top: 25px;
padding: 0px;
float: right;
list-style:none;
clear: right;
}
#header #menu li {
padding: 10px 15px 6px 15px;
border: 1px solid #d2d2d2;
position:relative;
float: left;
margin-left: -1px;
}
#header #menu li:hover {
background-color: #fff;
}
#header #menu li:first-child {
border-radius: 55px 0 0 55px;
padding-left: 20px;
}
#header #menu li:last-child {
border-right: 1px solid #d2d2d2;
border-radius: 0 55px 55px 0;
padding-right: 20px;
}
#header #menu a {
display:block;
font: 20px 'Klavika Rg';
text-transform: uppercase;
}
#header #menu .more:after {
content: "{";
font-family: 'WebSymbols';
font-size: 22px;
margin-left: 7px;
line-height: 0;
}
/*--- DROPDOWN ---*/
#header #menu ul{
list-style:none;
position: absolute;
right: 0px;
margin: 0;
visibility: hidden;
}
#header #menu ul li{
position: relative;
float: left;
margin-top: 0;
padding: 6px 10px 1px 10px;
margin-left: -1px;
}
#header #menu ul li:first-child {
border-radius: 15px 0 0 15px;
padding-left: 20px;
}
#header #menu ul li:last-child {
border-right: 1px solid #d2d2d2;
border-radius: 0 0 15px 0;
padding-right: 20px;
}
#header #menu ul a{
white-space:nowrap;
font: 15px 'Klavika Rg';
transition: all 0;
-moz-transition: all 0; /* Firefox 4 */
-webkit-transition: all 0; /* Safari and Chrome */
-o-transition: all 0; /* Opera */
}
#header #menu li ul{
margin-top: 6px;
width: 500px;
}
#header #menu li:hover ul{
visibility: visible;
}
Well what you have to do is changing the floot to header:
#header #menu ul li{
position: relative;
float: right; <------- Here
margin-top: 0;
padding: 6px 10px 1px 10px;
margin-left: -1px; <------- change this to -1px for prefection. (:
}
The best way to get around this and similar issues you may encounter with cross-browser validation is to use a reset stylesheet in your projects. This defaults all margins, padding, etc. to 0 for all browsers by default and eliminates most inconsistencies.
To use the reset stylesheet, simply click the link I provided, copy and paste the css from the site into a notepad.txt file and save it as reset.css. Place the file in your project folder and link to it as you would with any other .css file(assuming you use best practices).
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
Note: The reset.css does set everything to default, so be sure to go through it and remove whatever you don't want set to 0 or none.
I have been building a CSS drop down menu and I have a slight snag and wondered if anyone could help me fix this. I have a menu that has this HTML
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li>This is sub</li>
<li>sub menu item</li>
<li>This is a long sub menu item</li>
</ul>
</li>
<li>Location</li>
<li>another link</li>
</ul>
</div>
Currently when I hover over the main <li> 'Home' it's width expands a lot, I think to accommodate the sub-class menus that I have. How can I stop this from occurring? To achieve something like:
|Home| // Nice short main tab
|A sub menu link |
|Another sub menu link|
As opposed to this that is currently happening (forgive the crudeness of my diagram)
|Home....................| // really long messing up everything tab
|A sub menu link |
|Another sub menu link|
This is my CSS code for the menu:
#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
position: relative;
z-index: 40;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
I have basically the same markup so the following code should work well for what you need.
I left all of the color and image info in case you needed help there too.
#menu {
background: none repeat scroll 0 0 #333333;
border: 0 none;
font: bold 14px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
#menu ul {
background: none repeat scroll 0 0 #333333;
height: 35px;
list-style: none outside none;
margin: 0 0 3px;
padding: 0;
width: 100%;
}
#menu li {
float: left;
padding: 0;
}
#menu li a {
background: no-repeat scroll right bottom #333333;
color: #CCCCCC;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0;
padding: 0 10px;
text-align: center;
text-decoration: none;
}
#menu li a:hover, #menu ul li:hover a {
background: no-repeat scroll center bottom #2580A2;
color: #FFFFFF;
text-decoration: none;
}
#menu li ul {
background: none repeat scroll 0 0 #333333;
border: 0 none;
display: none;
height: auto;
margin: 0;
padding: 0;
position: absolute;
width: 225px;
z-index: 200;
}
#menu li:hover ul {
display: block;
}
#menu li li {
display: block;
float: none;
margin: 0;
padding: 0;
width: 225px;
}
#menu li:hover li a {
background: none repeat scroll 0 0 transparent;
}
#menu li ul a {
display: block;
font-size: 12px;
font-style: normal;
height: 35px;
margin: 0;
padding: 0 10px 0 15px;
text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
background: no-repeat scroll left center #2580A2;
border: 0 none;
color: #FFFFFF;
text-decoration: none;
}
The markup is weird man.
First of all, try to structure it a little better than having the <a> for the home link in the same <li> as another <ul>. Can this link be in a separate <li>?
Also, don't wrap the menu in a <div>. Just apply the styling directly to the parent <ul>.
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.
So I have a menu from ul and li, and it looks something like this at page load:
but when i click each menu and executed the code this happens:
what should i do? here's my CSS:
#menu-centered {
padding: 0px;
margin-bottom: 0px;
}
#menu-centered ul {
margin: 0;
padding: 0;
height: 99px;
width: 603px;
}
#menu-centered li {
display: inline;
list-style: none;
padding: 0px;
background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
border-style: none;
border-color: inherit;
border-width: medium;
display: block;
margin-right: 0;
padding: 20px 30px 0px 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
height: 68px;
width: 130px;
text-align: center;
}
#menu-centered a:hover {
background: url(images/menu2.png) no-repeat right top;
}
and here's my html code for the menus:
<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
Please help. Thanks
Your menus need some LoVe and HAte. In other words you need to create all four of the important link pseudoselectors to avoid letting browsers destroy your layout by applying the default active pseudoslector.
Define a:link, a:visited, a:hover and a:active for your menu, in that order exactly.