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.
Related
Weird problem with a navigation area. It works on all desktop browsers, but not on iOS Safari and Google Chrome. Tapping the links does nothing, although tap-and-hold will show the popup-menu asking to open the link in a new window, so in that case it does get recognised as a link.
Can anyone spot what I'm doing wrong?
Thanks for any help!
HTML:
<div id="nav">
<h1>Site title<span></span></h1>
<ul>
<li id="nav-reserveren">reserveren</li>
<li id="nav-kalender">kalender</li>
<li id="nav-interieur">interieur</li>
<li id="nav-contact">contact</li>
</ul>
</div>
Relevant CSS:
#nav h1 {
text-indent: -9999px;
font-size: 0;
margin: 0;
padding: 0;
width: 451px;
height: 81px; /*same as span height*/
position: relative;
}
#nav h1 span a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 451px;
height: 81px;
}
#nav ul {
position: absolute;
left: 461px;
top: 14px;
list-style-type: none;
}
#nav ul li {
display: inline;
}
#nav ul li a {
float: left;
height: 60px;
text-indent: -9999px;
}
#nav ul li#nav-reserveren a {
width: 203px;
background: transparent url(../img/nav/reserveer.png) top left no-repeat;
}
#nav ul li#nav-kalender a {
width: 109px;
background: transparent url(../img/nav/kalender.png) top left no-repeat;
}
#nav ul li#nav-interieur a {
width: 96px;
background: transparent url(../img/nav/interieur.png) top left no-repeat;
}
#nav ul li#nav-contact a {
width: 90px;
background: transparent url(../img/nav/contact.png) top left no-repeat;
}
Edit: solved.
The problem was setting the opacity of the links in jQuery:
var navLink = $('#nav ul li a');
navLink.css('opacity', '0.8');
navLink.mouseover(function(){
$(this).css('opacity', '1');
});
navLink.mouseout(function(){
$(this).css('opacity', '0.8');
});
$('#nav ul li a.active').css('opacity', '1');
Moving this over into straight CSS did the trick!
As h1 is a block element with relative and ul is absolute. the ul tends to go under the h1 making the links not clickable.
-> add display:inline-block to h1
or
-> add some z-index (above 1) to ul
Either one should fix the issue.
I'm trying to make a menu for a web page and I'm inserting images as menu separators.
maybe this is a little stupid question but I'm trying to remove the first image of my menu
this is my code:
.menu ul li {
background: url(separator.png) no-repeat left;
display: inline;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
width: 155px;
and tried this to remove the first separator:
.menu a.first {
background-image: none;
}
I tried to do what that's in this pages:
http://jsfiddle.net/Jaybles/uJdhH/1/
http://www.e-blueprint.co.uk/2011/how-to-use-an-image-as-a-menu-separator/
but it don't work
Try this:
.menu li:first-child{
background-image: none;
}
because your background is on the li tag and your .first class is on an anchor tag you are removing what ever background the anchor holds not the list item.
change to :
.menu li.first {
background-image: none;
}
You are specifying a background property above for a list item and then removing the background image on the a.first class. You should update .menu class to:
.menu li.first { background:none; }
Well, you had background to < li > ... then removed background from < a > .. 'Won't work'
.menu ul li {
background: url(separator.png) no-repeat left;
display: inline;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
width: 155px;
and tried this to remove the first separator:
.menu ul li:first-child {
background-image: none;
}
jsfiddle : http://jsfiddle.net/sd6Vu/
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 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;
}
I'm working on the following page: http://jlecologia.com/index.php
I want the whole block at the left to be clickable. In Firefox it's fine, but in IE6 the cursor doesn't even change to a hand. Any ideas?
I'd recommend that you move the block styling (like you're doing with the LI) to the actual link itself. So for example (copied from your stylesheet)...
#left ul li {
float: left;
list-style-type: none;
}
#left ul li a {
width: 100%; /* You might not need this */
margin-top: 40px;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFFFFF;
display: block;
background-image: url(../images/button-fond.png);
background-repeat: repeat;
background-position: 0px 0px;
text-decoration: none;
}