I am making a navigation bar using <ul>. The css code is following:
.nav {
list-style: none;
background: url(/images/nav.png) no-repeat;
width: 666px;
height: 60px;
}
.nav li {
font-size: 0px;
background: url(/images/nav.png) no-repeat;
width: 120px;
height: 60px;
display: block;
float: left;
position: relative;
}
.nav .navhome {
background-position: -31px 0;
left: 31px;
}
.nav .navA {
background-position: -152px 0;
left: 32px;
}
.nav .navB {
background-position: -273px 0;
left: 33px;
}
.nav .navC {
background-position: -394px 0;
left: 34px;
}
.nav .navD {
background-position: -515px 0;
left: 35px;
}
.nav .navhover {
background-position-y: -60px;
}
.nav .navcurrent {
background-position-y: -120px;
cursor: default;
pointer-events: none;
}
There is also jQuery function that when the mouse hovers on one button, a class .navhover is added, so that the background image will be move up, and thus show a different part of the entire image; so is class .navcurrent (the current page).
I implemented it on MAC and tested it in Chrome. But when I validated the code I found that background-position-y is not standard (in fact, I also used background-position-x for those 5 buttons). Since there is x-offset for each button, background-position: 0 -60px for .navhover will always show the first one. Also, I tried background-position: inherit -60px; and it doesn't work. So how to only vertically move the background position?
Another question, pointer-events is also not standard, and it doesn't work in firefox and opera. Is there an alternative way to disable the click function on the button with class .navcurrent?
To prevent click event on .navcurrent:
$(".navcurrent").click(function(e) {
e.preventDefault();
});
and for the background position, why can't you have instances for each class:
.nav .navD:hover {
background-position: -515px -60px;
}
Related
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
I have a perfectly working html/css sprite nav. When each link in its unordered list is hovered over, the background sprite image changes as expected, for that specific item. I want to make the entire nav sprite move position based on which linked is hovered over, so that the effect for any one link changes the background for the entire unordered list.
Reason: the edges of each inline are not vertical, they are at a 45 degree angle, so changing a traditional block background doesn't work so well. Changing the entire background will accomodate and work perfectly.
Code in use currently:
CSS:
#nav {
position: relative;
float: right;
background: url('../gfx/nav.gif');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a:hover {
background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;
}
And the HTML:
<ul id="nav">
<li id="n1"><span>Home</span></li>
<li id="n2"><span>About</span></li>
<li id="n3"><span>Programmes</span></li>
<li id="n4"><span>Grants</span></li>
<li id="n5"><span>Publications</span></li>
</ul>
So how do I make the background sprite shift for the entire nav, vertically different amounts depending on which link is hovered over? Assuming this is possible without JS of any sort.
Thanks. :)
PS - As requested, current system presented on a jsfiddle - http://jsfiddle.net/NhL7E/
Note how the edges of each coloured link don't completely change on the hover - hence wanting to move the entire UL background as opposed to individual LI backgrounds.
ADDED AFTER MARKED AS ANSWERED
Thank you to Shive, Jcubed and Barry Dowd. All three responses were completely acceptable and each one of them achieved the target result. However the primary question still is truly unanswered - as no one has suggested an HTML/CSS only method to shift the entire background image sprite different increments, based on which link is hovered on.
If I could mark all three answers as accepted, I would. I chose to mark Barry's as this is the answer that was easiest to implement on my project. It required no graphical modification so I was able to use the existing sprite image. All answers had benefits over the others - less http requests by use of jQuery, smaller nav sprite by another and no JS/jQuery required... etc.
Once again thank you all - your responses, jsfiddles, answers... your time and effort in helping me is greatly appreciated!
Cas
Here you go:
You give each li a left and right margin of -4px (#n1 only add to right margin, #n5 only add to left margin)
You then need to add 8px to each li width (4px on the first and last)
Then add 4px to the left position of the li background image so -74px becomes -70px (leave the first as 0)
New CSS
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0 -4px;
border: 0;
padding: 0 0px;
list-style: none;
}
#nav li#n1 {
margin: 0 -4px 0 0;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 77px;
}
#n2 {
left: 74px;
width: 102px;
}
#n3 {
left: 167px;
width: 132px;
}
#n4 {
left: 292px;
width: 90px;
}
#n5 {
left: 375px;
width: 129px;
}
#n1 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -70px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -163px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -288px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -371px -115px no-repeat;
}
JSFiddle http://jsfiddle.net/NhL7E/12/
2 Solutions:
First, you can change your image so that it has extra space between each section of the navigation and has a transparent background. http://i60.tinypic.com/sq3xjn.png
This allows you to make each li have its own background that changes on its own without it effecting how the other parts oft he nav look.
#nav {
position: relative;
float: right;
/*background: url('http://i59.tinypic.com/25tapoi.jpg');*/
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 71px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a{
width:77px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}
#n1 a:hover{
background-position:0 -23px;
}
#n2 a{
width:102px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}
#n2 a:hover{
background-position:-77px -23px;
}
#n3 a{
width:131px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}
#n3 a:hover{
background-position:-179px -23px;
}
#n4 a{
width:89px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}
#n4 a:hover{
background-position:-310px -23px;
}
#n5 a{
width:128px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}
#n5 a:hover{
background-position:-399px -23px;
}
http://jsfiddle.net/gh6Aq/
The other options is to nest your li's in such a way that the element with the background image is the deepest element, then you can use hover states to change it's style.
Example:
<ul id="nav">
<li id="n1"><span>Home</span>
<li id="n2"><span>About</span>
<li id="n3"><span>Programmes</span>
<li id="n4"><span>Grants</span>
<li id="n5"><span>Publications</span>
<div class='backgroundElement'></div>
</li>
</li>
</li>
</li>
</li>
</ul>
Then:
#n1:hover .backgroundElement{
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
However this method basically kills the underlying structure of your navigation, so I would recommend using the first option.
As continued from comments, I am posting a jQuery(JavaScript) based solution because, the exact problem is that, we have background image on the ul and we are hovering over ul>li>a and there is no parent selector in CSS to manipulate parent elements's CSS property(baclground image of ul).
However using jQuery we can easily achieve it. So the jQuery code will be something like this.
$('#nav >li>a').on('mouseenter', function() {
var id = $(this).parent().attr('id');
switch (id) {
case 'n1':
$(this).parent().parent().css({
'background-position': '0 -23px'
});
break;
case 'n2':
$(this).parent().parent().css({
'background-position': '-0 -46px'
});
break;
case 'n3':
$(this).parent().parent().css({
'background-position': '0 -69px'
});
break;
case 'n4':
$(this).parent().parent().css({
'background-position': '0 -92px'
});
break;
case 'n5':
$(this).parent().parent().css({
'background-position': '0 -115px'
});
break;
}
}).on('mouseout', function() {
$(this).parent().parent().css({
'background-position': '0 0'
});
});
Here the benefit we get is that the background image is now loaded only once and not 5 times because each time someone hovered over the image previously was getting loaded again.
Here we just find the ID of the hovered element and re-position the ul's background image accordingly.
You will also not need the additional code for :hover in the CSS, so the CSS code will be something like this.
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
JSFiddle Sample
I'm pretty new to html + css. I'm currently trying to make a website nav bar. I've got it to show and the buttons to work to an extent, now my only issue is I would like the image to re-size with the browser window.
I have used the technique which has 1 image with both the normal Nav Bar ontop and the mouse over nav bar buttons underneath, so normally the image shows the top half but when hovered over it displays a certain section of the bottom half.
In the coding I have used, it is all pixel specific to quote the locations and sizes of each button and how much to show.
What I want this navbar to do is to be re-sizable depending on the browser to an extent. So if showed in a smaller window the image will re-size and vice versa. I have tried changing the px to %'s without avail. Is there a simple way round this?
You can check out the full website here: www.step-down.co.uk
ul#navbar li a {
display: block; float: left; height: 104px;
background-image: url(li1.png); text-indent: -9999px; position:relative; top:50px; right:10px;
}
ul#navbar li a.news {
width: 172px; background-position: 0px 0;
}
ul#navbar li a.newr {
width: 338px; background-position: -172px 0;
}
ul#navbar li a.hype {
width: 170px; background-position: -510px 0;
}
ul#navbar li a.reviews {
width: 205px; background-position: -680px 0;
}
ul#navbar li a.bands {
width: 195px; background-position: -885px 0;
}
ul#navbar li a.contact {
width: 214px; background-position: -1080px 0;
}
ul#navbar li a.news:hover {
background-position: 0px -114px;
}
ul#navbar li a.newr:hover {
background-position: -172px -114px;
}
ul#navbar li a.hype:hover {
background-position: -510px -114px;
}
ul#navbar li a.reviews:hover {
background-position: -680px -114px;
}
ul#navbar li a.bands:hover {
background-position: -885px -114px;
}
ul#navbar li a.contact:hover {
background-position: -1080px -114px
}
For all of the Nav-Bar properties make them '%' of the entire screen, this way they will be re sized to what you need.
I'm playing with 3 images. and it's making me dizzy. What I want is when a tab is active it will change the background-image.
I have this code right now in my html:
div id="promo-nav-wrapper">
<ul>
<li id="active">
</li>
<li>
</li>
</ul>
</div>
My CSS
#promo-nav-wrapper {
background: url("http://imageshack.us/photo/my-images/580/menubackground.png/");
background-repeat: repeat-x;
width: 100%;
height: 82px;
}
#promo-nav-wrapper ul {
text-align: center;
}
#promo-nav-wrapper ul li {
display: inline-block;
margin-top: 20px;
}
#promo-nav-wrapper ul li a {
height:53px;
width:41px;
display:block;
text-decoration: none;
background-repeat: no-repeat;
text-shadow: none;
}
a.promo-call{
background-image:url("http://imageshack.us/photo/my-images/861/callicon2.png/");
z-index: 3;
margin-right: 10px;
}
a.promo-text {
background-image:url("http://imageshack.us/photo/my-images/807/texticon2.png/");
margin-left: 10px;
margin-right: 10px;
}
/*this don't work*/
#promo-nav-wrapper li#active a {
background-image: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
height: 76px;
width: 64px;
/*background: blue;*/
}
My problem is I can't snip the image when an li is active, it doesn't show the background. T_T. Say like this
#active a{ background-image: url('selected_icon_background.png');
....
}
Acc to what i am understanding after reading the problem -
First of all in fiddle: http://jsfiddle.net/si_dean_ako/kyYWU/ images are not loading and secondly the css rule is wrong on #promo-nav-wrapper li#active a
Try to remove
#promo-nav-wrapper li#active a {
background-image: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
height: 76px;
width: 64px;
/*background: blue;*/
}
and add like this
#promo-nav-wrapper li#active {
background: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
height: 76px;
width: 64px;
}
When we want to write multiple value (shorthand properties) at that time we have to use background property of css and in above fiddle background-image is used and on that the url('image path'), no-repeat, !important; is applied. And background-image always take the path of the image.
So it better to use like that background: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;
See updated fiddle: http://jsfiddle.net/kyYWU/2/ in this fiddle active image is showing behind the .
See the output generated on my local machine:
Try this
#promo-nav-wrapper #active a { background-image: url('selected_icon_background.png');
....
}
at the end of your stylesheet
I have IE6.
[EDIT: you can see the template live here: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209 ]
I have a template, with 3 <a></a> that change the position of their background to create a button effect.
This is how it looks in any browser
This is it with IE6:
This the CSS code:
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
#featured-nav a {
height: 35px;
float: left;
cursor: pointer;
display: block;
padding: 47px 20px 20px 120px;
font-size: 12px;
line-height: 16px;
text-decoration: none;
font-weight: normal;
color: #777;
}
#featured-nav a span {
margin-top: 10px;
height: 30px;
width: 150px;
font-size: 12px;
text-transform: uppercase;
color: #5aa0b1;
font-weight: bold;
position: absolute;
top: 12px;
left: 120px;
}
#featured-nav a img {
position: absolute;
left: 40px;
top: 23px;
}
#featured-nav a.left {
background: url(/images/site/leftbutton.png) top left no-repeat;
width: 178px;
overflow: hidden;
position: relative;
}
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; }
#featured-nav a.middle {
background: url(/images/site/middlebutton.png) top left no-repeat;
width: 174px;
overflow: hidden;
position: relative;
}
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; }
#featured-nav a.right {
background: url(/images/site/rightbutton.png) top left no-repeat;
width: 172px;
overflow: hidden;
position: relative;
}
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; }
.content-wrapper {
width: 678px;
overflow: hidden;
margin-top: 10px;
margin-left: 8px;
}
Any idea?
Thank you.
IE 6 cannot understand multiple classes on an element correctly so i would suggest you put the
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
as the last rule in the CSS so IE 6 picks it up last ..
you are bound to face similar problems elsewhere though ..
To be sure either create full background buttons (the whole button in one image) / create multiple elements to define each side of the button / or scrap IE 6 ...
[EDIT] it does not apply to your case .. scrap my suggestion ..
as an alternative, you can rename you selected classes and instead of using two like left.activeSlide have one named left_activeSlide...
[EDIT 2] here is some code for the specific template you mentioned in your comment
They use the cycle plugin, and in the cycle.js file (at the end) they have the initialization code which is
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.activeSlide').removeClass('activeSlide');
$('#featured-nav ul li#' + slide).addClass('activeSlide');
}
now if you change it to
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide');
$('#featured-nav ul li#' + slide).addClass(slide+'activeSlide');
}
it would work with classes named leftactiveSlide, middleactiveSlide rightactiveSlide
You might want to add display:inline to the floated elements. This doesn't affect other browsers, but prevents IE from doubling margins on the element.
I believe the IE6 has issues with background-positioning certain PNGs. Just as a test, you ought to try replacing the image with a JPG or non-transparent PNG.