I am trying to get my navigation bar to have a current page indicator and I have researched every article possible, as well as, followed exact examples, but it still will not work.
I am using a sprite image of only two images. The image is width of 480, height 40 with each image at width 240, height 40. One side is blue and the other side is yellow.
I want to have the off-state to be the blue side, and then have the hover, active and current state be the yellow side. However, I dont care to have an active state at the moment.
So, my question is: my off state(blue side), hover state(yellow side) work perfect. I just need my current state(yellow side) to work. So, when you click on the menu item the image stays yellow.
I apologize for any horrible coding, as this is my first attempt
This is a portion of what I have for my html: (I will use just one of the three menu items, profile.)
<body bgcolor="CEB86C"; class="profile">
<div id="navigation">
<ul>
<li><a class= "news" href="news.html" title"news"></a></li>
<li><a class="profile " href="index.html" title"profile"></a><li>
<li><a class= "about" href="about.html" title"about"></a><li>
</ul>
</div>
Here is the CSS:
#navigation ul {
list-style: none;
text-align: center;
}
#navigation li {
display: inline;
}
#navigation li a {
text-indent: -5000px;
display: inline-block;
height: 40px;
}
#navigation li a.profile {
width: 240px;
background: url(images/profile.jpg);
text-decoration: none;
}
#navigation li a.profile:hover {
background: url(images/profile.jpg);
background-position: -240px;
text-decoration: none;
}
#navigation li a.profile:current {
background: url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration: none;
}
I appreciate any input and thank you in advance!
Assuming that you change the class on the body depending on which page you are on then you can just modify the last css declaration to read:
.news #navigation li a.news,
.profile #navigation li a.profile,
.about #navigation li a.about {
background:url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
Edit - if you have 3 separate images then you could do something like:
.news #navigation li a.news {
background:url(images/news.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
.profile #navigation li a.profile {
background:url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
.about #navigation li a.about {
background:url(images/about.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration:none;
}
Try #navigation li a.accountbutton:active instead of :current
Related
I'm not sure why my hover effect isn't working on my navigation bar, and I was wondering if anyone can point out where I've went wrong?
Here is my html and css:
<div id="nav">
<a class="selected" href="Property%20Advisor.html">Home</a>AboutContact Us
</div>
#nav {
position: fixed;
top: 0;
width: 100%;
height: 7%;
margin: 0;
text-align: center;
font-family: rosario, sans-serif;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav a {
display: inline-block;
font-size: 100%;
padding-top: 1%;
padding-left: 2%;
padding-right: 2%;
margin: 0;
border: 0;
padding-bottom: 1%;
color: white;
text-decoration: none;
margin-right: 1px;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav homeHover a:hover, onCLick {
background-color: #44597F;
color:orange;
}
.selected {
background-color: #000000;
color: orange;
}
Here is a JSfiddle of my code:
http://jsfiddle.net/VDmh8/1/
http://jsfiddle.net/VDmh8/3/
You need to change:
#nav homeHover a:hover, onCLick {
background-color: #44597F;
}
to:
#nav a:hover {
background-color: #44597F;
background-image: none;
}
because for one, #nav homeHover a:hover would select a hovered upon a element within an element with tag name homeHover within #nav, which won't target the a elements that you want.
Also, you need to reset the background-image property that you set for your unhovered a.
You just messed up your CSS target.
JSFiddle
You're trying to change #nav a I presume, so all you need to do is use the CSS selector - #nav a:hover.
Setting a background gradient for both your nav and link elements is generally a bad idea. The two gradients will attempt to fit into different sized spaces and clash together. Instead, try creating a nav with a gradient, and then making transparant buttons above the nav, so you don't need to specify a new gradient. This is a bit difficult to explain, so check below:
For the navigation button, just leave out the background entirely when it isn't being hovered, and it will show the #nav color behind, like here.
As a more general example:
#nav{
/* gradients here! */
}
.button /* not hovered */
{
/* Don't set a background color - it will be transparant. */
}
.button:hover /*the same button when it's hovered. */
{
background: #123456;
}
(Also PS: never use something like height: 7%; for the nav. It ends up scaling improperly.
Use a definite height, like height: 48px.
If you really want to make a responsive website, a CSS Media Query would be better suited in this situation.
Why do you have a HomeHover in your css? That way, it looks for #nav, then a HomeHover tag inside the nav and then the anchor tag to match.
nav a:Hover will do.
The background-image seems to be drawn over the background-color. You need to set the background-image to something else on the hover.
nav a:hover {
background-color: #44597F;
background-image: none;
}
Fiddle
I've created my navigation menu using CSS and an image sprite for the rollover states (i.e hover, active). However, I'm trying to create a 'selected/current' state (which in my case is the same as the active state) so that dependent on the page you've selected, the corresponding navigation button is highlighted.
Here's what I have:
CSS:
#menu li {
margin: 0;
padding: 0;
height: 50px;
list-style: none;
display: inline;
float: left;
line-height: 40px;
}
#menu a {
display: block;
height: 50px;
}
#menu a:hover {
background-image:url(../Images/about_rollover.gif)
}
#about {
width: 90px;
}
#about a:hover {
background-position: 0 -50px;
}
#about a:active {
background-position: 0 -100px;
}
#about a:selected {
background-position: 0 -100px;
}
#portfolio {
width: 90px;
}
#portfolio a:hover {
background-position: 90px -50px;
}
#portfolio a:active {
background-position: 90px -100px;
HTML:
<ul id="menu">
<li id="about"><a href"#"></a></li>
<li id="portfolio"></li>
</ul>
Image sprite: view here
One way to solve this would be to put a class on the body tag that identifies the page you are currently browsing, and applying the selected state to the nav item when it falls under that particular class. Like:
HTML:
<body class="about">
<ul id="menu">
<li id="about"><a href=...
CSS:
body.about ul li.about { [selected background position] }
First:
You use some language at the server level to implement the site?
If so, it would be interesting to check the page that is selected and add a specific class to mark it, for example (via php):
<ul id="menu">
<li id="about"<?php echo $accessedPage == 'about' ? ' class="selected"' : ''; ?>><a href"#"></a></li>
<li id="portfolio"></li>
</ul>
Second:
You can group a css selector to hover and selected:
#about a:hover,
#about .selected a {
background-position: 0 -50px;
}
#portfolio a:hover,
#portfolio .selected {
background-position: 90px -50px;
}
You will need to look at the current path some type of application logic, not strictly CSS.
For example you can use javascript:
$('document').ready(function () {
//Gets the current window location
var currentPath = window.location.pathname;
/*Logic to identify where the user is relative
to your webpage and update the style*/
if (currentPath = '/portfolio')
{
$('portfolio').addclass('menuactive');
}
});
You will have to add classes define the states for your different menu items. But this should get you in the right direction.
I have a ul with tree list items in an horizontal view.
All the list items have the same background image:
I want to overlap the background images so it looks like this:
Here is my jsFiddle
CSS:
div#menu ul li{
height:30px;
display: inline;
list-style-type: none;
width: 60px;
background: url(http://i.stack.imgur.com/adwVj.jpg);
background-size: 100%;
background-repeat: no-repeat;
padding-right: 5px;
padding-left:30px;
z-index:2;
}
div#menu ul li:first-child{
padding-left:20px;
z-index:3;
}
div#menu ul li:last-child{
padding-left:35px;
margin-left:-30px
z-index:1;
}
HTML:
<div id="menu">
<ul>
<li>Account</li>
<li>Registreren</li>
<li>Winkelwagen</li>
</ul>
</div>
It goes wrong with the z-index!
you should first give at least position: relative to your list-items, otherwise z-index has no effect. then just use
div#menu ul li + li {
left : -20px;
}
so the labels will remain close together (this rule will be applied starting from the second <li> element)
Example fiddle : http://jsfiddle.net/Faffz/3/
I am pretty new at CSS but have been learning, doing my moms small business website to save her money but I'm having a little CSS trouble with my nav bar.
Basically if you go here: http://area25dallas.com/s and look at the nav bar, I'm having trouble with the il listing to have the images line up vertically (instead of aligning with the top which is what they currently do) with the text, also for some reason the images are going on top of each other instead of sitting next to each other (I don't want them in separate lists like the text links because the margins are too spread out).
I have been playing around with the CSS and also googled the hell out of this but still haven't found a solution. Is there any quick fix to this?
Thanks!
EDIT:
Here is the HTML and CSS blips though if you are using chrome I feel just inspecting the elements are the easiest way to see what's going on
<div id = "header">
<div class = "container">
<ul id = "main-menu">
<li class = "active">home</li>
<li>about</li>
<li>gallery</li>
<li>press</li>
<li>contact</li>
<li><img src="images/twitter_newbird_boxed_ white.png" />
<img src="images/Pinterest_Favicon white.png" /></li>
</ul>
</div>
</div>
and the CSS
#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}
#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}
The images are broken onto multiple lines because they reside inside an <a> tag which has been styled as a block level element. Change the style to something like:
#main-menu {
float: right;
position: relative;
right: 75px; /* Changed */
top: 122px;
}
#main-menu li a {
color: #fff;
display: inline-block; /* Changed */
font-size: 17px;
padding: 0 15px 5px 10px;
text-decoration: none;
}
/* New */
#main-menu li a img {
position: relative;
top: -10px;
}
The new rule at the bottom moves the images up a little bit. You can play around with your css and get the same results in a lot of different ways - I went with a method that didn't involve many changes to the existing work.
Thanks for the tips, guys, this helped me out too with images in my css navigation.
I'd also recommend some added code to alleviate your spacing issue ...
#main-menu li a img {
position:absolute;
background:inherit;
top: 0px;
margin-bottom:auto;
max-height: 33px;
}
May be this seems silly question for you guys.. Its about CSS Sprites. I have a navigation which contains 4 menus like.. HOME COMPANY SERVICES SUPPORT although I used a css sprite that have 3 mode/state for static, hover and selected(class called 'current'). I used to call them like..
ul#top-nav-links {list-style:none; background:url(../images/nav-bg.png) no-repeat scroll 0 0; width:508px; height:35px; float:left; margin-left:80px; margin-top:33px; padding-left:4px; margin-right:23px;}
ul#top-nav-links li{float:left; position:relative; z-index:99999;}
ul#top-nav-links li a.home01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
ul#top-nav-links li a.company01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:150px; height:31px; text-indent:-999px; float:left; background-position:-100px 0px;}
ul#top-nav-links li a.services01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:140px; height:31px; text-indent:-999px; float:left; background-position:-250px 0px;}
ul#top-nav-links li a.support01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:115px; height:31px; text-indent:-999px; float:left; background-position:-390px 0px;}
ul#top-nav-links li a.current{background:url(../images/nav.png) no-repeat scroll 0 -62px; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
and here is the image I used
so I need to display the middle colored one on hover state, although the last one for the current state, of course the current state wasn't need hover effect..
I know, It should call like this..
ul#top-nav-links li a.company01:hover{background-position:-100px -31px;}
but I curious if somehow that code should be shortened by avoiding to call each menu as separate instead like this...
ul#top-nav-links li a:hover(background-position:0px -31px;}
the above one I tried but the horizontal positioning of the image wasn't possible..
Any thoughts?
drop down a comment, if this question was confused.. :)
I'm not positive about cross-browser support, but this at least works in Chrome 15.
http://jsfiddle.net/tkZMB/
li:hover {
background-position-y: -31px;
}
You could combine this to simplify your overall CSS too.
/* General list item declaration */
li {
width: 130px;
height: 30px;
border: 1px solid gray;
float: left;
background: url(http://i.stack.imgur.com/m5HOI.png);
}
/* For each child move menu over */
li:nth-child(2) {
background-position-x: -100px;
}
/* On hover slide the background up. */
li:hover {
background-position-y: -62px;
}
Sorry, just modified your code to this, though I hope this will help you to produce efficient markup (semantically-correct) and style sheet codes: hopeful that will also solve browser inconsistencies in your codes.
HTML:
<ul class="section">
<li class="home current">
Home
</li>
<li class="company">
Company
</li>
<li class="services">
Services
</li>
<li class="support">
Support
</li>
</ul>
CSS:
.section li {
display: inline;
}
.section a {
background: url(../images/nav.png) no-repeat;
display: inline-block;
}
.section .home a {
background-position: left top;
}
.section .company a {
background-position: -100px 0;
}
.section .services a {
background-position: -250px 0;
}
.section .support a {
background-position: -390px 0;
}
.section .current a {
background-position: 0 -62px;
}