below is the css script for menu of this site
#navmenu{
z-index:99999;
margin-top:40px;
margin-left:400px;
position:absolute;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
}
#navMenu ul {
margin-left:300px;
margin-top:70px;
font-size:16px;
color:#000000;
}
#navMenu li a{
width:70px;
height:15px;
display: inline-block;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
the menu is displayed perfectly in chrome and FF .But in IE its not proper..
what is the solution to get it displayed properly in IE??
Edit1
This is how the menu looks in IE8
This is how menu looks in FF
Check your doctype to make sure IE is understanding inline-block
IE8 display inline-block not working
Related
image sample : http://i.stack.imgur.com/SxZ8D.jpg
any one help to build css menu like this picture with hover and active.
especially line on the top of navigation menu with white dot when active and hover.
Try something like this (I only tested on Chrome and Firefox, just to let you know):
nav ul li{
display:inline-block;
font-family:"Helvetica Neue", Arial, sans-serif;
}
nav ul li a{
padding:8px 10px 0 0;
text-decoration:none;
color:#F86659;
border-top:6px #7F170E solid;
font-size:.9em;
margin:0;
}
nav ul li.selected a{
color:#FFF;
}
.circle {
background: #7F170E;
width: 15px;
height: 15px;
border-radius: 50%;
position:relative;
left:-2px;
top:-2px;
margin:0 auto;
}
nav ul li.selected .circle{
background: #FFF;
border:4px #7F170E solid;
}
An example JSFiddle: http://jsfiddle.net/7P8qv/
I am having problems with my navigation bar. I want it to show a different color after the link has been visited. I read an answer from code academy, Stack O/F and other sites saying that "The pseudo-class_selector must follow the following order for it to work.
:link
:visited
:hover" (codeacademy-Submitted by Samrudhi Sharma). I tried this, but nothing happened. I've really gotten myself confused now. Thanks for your help.
My code:
#nav {
width:100%;
float: left;
margin: 20px;
padding: 0;
border-top: 5.5px solid red;
border-bottom: 5.5px solid red;
line-height: 1.8em;
display:inline-block;
clear:both;
}
#nav ul {
float: left;
margin: auto;
width: 1024px;
margin:0px;
list-style: none;
}
#nav ul li {
color: orange;
font-size:1.5em;
float: left;
width: 150px;
padding: 0px;
margin:0px;
list-style:none;
}
#nav ul li a {
border-left:1px solid #fff;
text-align:center;
display: block;
width: auto;
height: 25px;
text-decoration: none;
}
#nav ul li:visited a{
background:yellow;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li:hover a{
background:#C60;
color:#FFFFFF;
text-decoration:none;
}
Place a:visited on the <a>.
Have a fiddle - Fiddle link! (Click "Run" in the jsfiddle header if the yellow does not render.)
CSS
#nav li a:visited {
background:yellow;
color:#F00;
text-decoration:none;
}
you should use the pseudo-classes on your anchor, not on the list element. So a:visited instead of li:visited, because you visit the anchor's link, not the list element's ;)
I might be going about this the wrong way, but what I'm trying to achieve is a list style horizental that links in with some js that changes the navigation from one tab to another. The tab headings should have a counter before the text within a css circle using radius and I've got this far.
What I can't seem to resolve is how to then place this circle within a box the same colour as the li text background and ensure it changes colour when hovered/selected.
Here's my code so far:
OL.evotab {
counter-reset:li;
list-style: none;
float:left;
width:100%;
padding:0px;
}
OL.evotab LI {
list-style:none;
position:relative;
display: inline;
float:left;
margin:0 0 6px 2em;
padding:4px 8px;
}
ol.evotab > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-radius:50%;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
OL.evotab LI A {
background-color: #f8f8f8;
color: #28343d;
text-decoration: none;
padding-top: 30px;
padding-left:20px;
padding-right:20px;
padding-bottom:30px;
border-bottom:5px solid #dfdfdf;
}
OL.evotab LI A.selected,
OL.evotab LI A:hover {
background-color: #f8f8f8;
color: #e51f38;
padding-top: 30px;
padding-bottom:30px;
border-bottom: 5px solid #e51f38;
}
OL.evotab LI A:focus {
outline: 0;
}
FIDDLE
Its a little difficult to see what you mean without any HTML....but have a look at the fiddle linked for an idea.
HTML
<a href='#'>This is an Item</a>
CSS:
a {
background:grey;
border:1px solid black;
display:inline-block;
padding:20px;
color:white;
text-decoration:none;
position:relative;
}
a:before {
content:'7';
color:black;
position:absolute;
display:inline-block;
background:yellow;
border:1px solid black;
border-radius: 999px;
left:-5px;
width:20px;
text-align:center;
line-height:20px;
height:20px;
}
a:hover, a:hover:before {
color:red;
}
I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
display:inline-block;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:33%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.nav a:hover {
background:#A26A42;
border:none;
width:32%
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
End of CSS
<ul class="nav">
<li>Search</li>
<li>Legend</li>
<li>Info</li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>
Thank you for any help.
I'd rework your CSS like this jsFiddle example.
CSS
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
Try this:
* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)
.nav li {
display:block;
float:left;
width: 33%;
}
.nav li a {
display:block;
text-align: center;
}
Fiddle: http://jsfiddle.net/kboucher/duaa6/
On "hover" you make the menu items narrower than normal. Plus you remove ther border which will narrow it even more. Also, It looks like you are using a 1px border left and right for spacing. If this is the case use margin instead. Use jsfiddle to practice.
Try this:
ul.nav {
width:100%;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:32%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
margin-left: 1px;
background: #62564A;
}
.nav a:hover {
background:#A26A42;
}
ul.nav li:first-child a{
margin-left: 0;
}
http://jsfiddle.net/mVv75/4/
I am building a website from a bought theme, and in FF and in Chrome it looks perfect.But,on IE9 in compatibility mode, i am having a big problem.
One menu item has dropdown, and on IE, that dropdown menu is moved bellow the next menu item, and it is very hard to click o it.I tried "playing" around with CSS navigation and menu setting, but no luck...
Can anyone help:
/* Mainmenu Styling */
#mainmenu{
width:680px;
margin:1px 0px 0px 0px;
float:left;
}
.navigation{
width:630px;
margin-top:38px;
padding-left:160px;
float:left;
list-style-type:none;
}
.navigation ul{
margin:0px;
padding:0px;
list-style-type:none;
position:left;
clear:both;
}
.navigation li{
list-style-type:none;
padding:0px;
margin:0px;
float:left;
z-index:100;
position:relative;
}
.navigation li a{
font-size:16px;
text-decoration:none;
color:#a7a6a6;
display:block;
padding:10px 30px 16px 8px;
float:left;
z-index:100;
margin-right:0px;
}
.navigation li.current a, .navigation li a:hover, .navigation li.current li a:hover{
text-decoration:none;
color: #d23a3b;
}
.navigation li.current li a{
text-decoration:none;
color:#a7a6a6;
}
.navigation li li{
margin:0 0 0px 0px;
padding:0px;
position:relative;
z-index:100;
}
.navigation ul{
display:none;
position:absolute;
top:45px;
width:159px;
padding-bottom:5px;
z-index:100;
background-color:#fafafa;
border-top:none;
border-bottom:1px solid #d3d3d3;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
}
.navigation li ul a{
width:109px;
height:auto;
float:left;
padding:0px 15px 8px 15px;
font-size:14px;
color:#a7a6a6;
line-height:24px;
z-index:100;
text-decoration:none;
}
Link is : http://goo.gl/LHDtg
try the below css for desired IE version
.navigation ul {
background-color: #FAFAFA;
border-color: -moz-use-text-color #D3D3D3 #D3D3D3;
border-style: none solid solid;
border-width: medium 1px 1px;
display: none;
padding-bottom: 5px;
position: absolute;
top: 85px; /* in your website it is 45px but for IE i just tried 85px which work fine*/
width: 159px;
z-index: 100;
}
see image for demo: I tried it in IE8