Here's the navigation image in question:
http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png
What I want to do is pretty basic and I've done it numerous times in the past, I just can't understand why it isn't working right now. Basically use the above image as the nav background and adjust the widths and background-positions accordingly. Here is my CSS:
#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; }
#navigation ul { margin: 0 0 0 20px; padding: 0; }
#navigation ul li { float: left; list-style: none; }
#navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;}
#nav-home { width: 62px; }
#nav-home.active, #nav-home:hover { background-position: 0 -28px; }
#nav-cp { width: 130px; background-position: -62px 0; }
#nav-cp.active, #nav-cp:hover { background-position: -62px -28px; }
#nav-web { width: 106px; background-position: -192px 0; }
#nav-web.active, #nav-web:hover { background-position: -192px -28px; }
#nav-clix { width: 106px; background-position: -298px 0; }
#nav-clix.active, #nav-clix:hover { background-position: -298px -28px; }
#nav-dna { width: 90px; background-position: -405px 0; }
#nav-dna.active, #nav-dna:hover { background-position: -405px -28px; }
And here is the on-page code, with the generic HTML5 doctype, <!DOCTYPE html>, specified for future proofing:
<div id="navigation">
<ul id="nav-tabs">
<li>Home</li>
<li>Client Portal</li>
<li>Weboptima</li>
<li>Clixfactor</li>
<li>Lead DNA</li>
</ul>
</div>
The weird things I've come across are: The first tab, Home, works perfectly. The remaining four tabs don't obey the initial background-position property unless I specify !important, but the rollovers work just fine. Here are images of these two situations, respectively:
http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png
http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png
Just looking for a little insight into this (hopefully) simple problem. Thanks in advance!
The style where you specify the background image is more specific than the styles for the tabs, so it takes presedence.
Instead of using the composite style background, that also sets background-position by default to 0% 0%, specify the separate components:
background-image: url('../images/nav-tabs.png'); background-repeat: no-repeat;
You can read about specificity here.
I don't know exactly what the problem is, but is sounds like an issue with the relative priority of your CSS rules.
For that sort of problem, Firebug is excellent - it will tell you for any given element exactly which CSS rules are firing for it. That should help you see where the problem lies.
(Forgive me if you already know about Firebug, but a surprising number of web developers don't.)
Related
I use multiple background images. Under certain rules, I want one of them not to show.
Of course, I don’t want to repeat the superordinate rule (i.e. the image URLs). I want to set one of them to none, while letting the others as-is (i.e. inherited from the less specific rule).
Unfortunately, something like background-image: none, initial|auto|unset|inherit; doesn’t work, because those keywords all have other uses or targets.
Is there a way to target a specific CSV item?
Is there a suitable keyword?
Or is there no way around repetition, now and in future CSS?
div{ background-image: url(https://placekitten.com/200/300), url(https://placekitten.com/200/300); }
div:hover{ background-image: none, /*DRY→*/ url(https://placekitten.com/200/300) /*←DRY*/; }
<div style="width:400px;height:300px;background-position:left -2em,right 2em;background-repeat:no-repeat;"></div>
CSS variables can help here
div {
--img:url(https://placekitten.com/200/300);
background-image:
var(--img),
var(--img);
}
div:hover {
background-image:
none,
var(--img);
}
<div style="width:400px;height:300px;background-position:left -2em,right 2em;background-repeat:no-repeat;"></div>
Or inheritance with a pseudo element:
.box {
width: 400px;
height: 300px;
background-position: right 2em;
background-repeat: no-repeat;
background-image: url(https://placekitten.com/200/300);
position: relative;
z-index: 0;
}
.box::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom:0;
background:inherit;
background-position: left -2em;
}
.box:hover::before {
content:none;
}
<div class="box"></div>
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).
My CSS Sprite here
The problem is that the image changes position even when the empty area to the right of links is hovered over with mouse..what I want is the image position to change ONLY when mouse is over those texts ie "Link1", "Link2", etc.
What do I need to change in my code ?
You need to shrinkwrap the elements.
http://jsfiddle.net/xkRcN/8/
Bad HTML! Bad bad HTML! Shrinkwrapping is of course the correct solution, but surely it'll be good to use valid HTML at the same time?
Using the general sibling selector, this code will work without causing dozens of validation errors at the same time.
HTML:
<div class="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="sp_ID0"></div>
</div>
CSS:
.sprite {
display: block;
margin-bottom: 5px;
float: left; /* These two lines are where the shrinkwrapping occurs */
clear: both;
color: white;
}
.container, .sp_ID0 {
width: 600px;
height: 203px;
}
.sp_ID0 {
background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
background-repeat: no-repeat;
}
.container {
position:relative;
}
.sp_ID0 {
z-index: -2;
position: absolute;
top: 0px;
left: 0px;
display: block;
}
.sp_ID1:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID2:hover ~ .sp_ID0 { background-position: 0px -406px; }
.sp_ID3:hover ~ .sp_ID0 { background-position: 0px -609px; }
.sp_ID4:hover ~ .sp_ID0 { background-position: 0px -812px; }
.sp_ID5:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID6:hover ~ .sp_ID0 { background-position: 0px -406px; }
My horizontal nav bar is populated with images for the links that are coming from one image that includes all the sub-images; each nav item image is identified by the pixel location within the larger image. This works perfectly fine in Firefox and Safari, but in IE, all of the images are misplaced too low within the nav bar (can only barely see the tops of the words). Two questions:
How do I fix this in the css so it is back-compatible with the more recent versions (and current versions) of IE
Do I need a separate IE stylesheet?
Here's the css (truncated for just a few of the links):
ul#navbar {
width: 750px;
height: 22px;
margin: 0px;
padding: 0px;
text-indent: -9999px;
border: none;
}
ul#navbar li {
float: left;
height: 22px;
margin: 0px;
padding: 0px;
list-style-type: none;
border: none;
/*position:absolute;*/
}
ul#navbar li a {
display: block;
height: 22px;
border: none;
}
.home {
left: 0px;
width: 78px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.classes {
/*left: 78px; */
width: 92px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -100px 0px;
}
.training {
left: 170px;
width: 89px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -200px 0px;
}
I've used *.html for IE 6
/** For IE6 /
*html #related-products
{
width: 300px;
overflow:visible;
}
*html #related-products ul
{
position:relative;
left: -65px;
}
*html #related-products li
{
border: none;
}
/ End of IE6 hack **/
Otherwise there's the IE conditional comments.
http://www.quirksmode.org/css/condcom.html
As far as separate style sheet you can create one have your Server Side language detect the browser and if Internet Explorer make sure your IE one gets added, otherwise you can add these into an existing CSS file. I've done both.
Well ... I think you don't want to hear this, but: Never, ever rely on exact pixel positions in HTML/CSS (imagemaps superimposed on one image are the only exception).
HTML is simply not made for pixel-exact design. From your description, there's not even a possibility for graceful fallback on browsers that don't support one of the technologies you seem to rely on. And what about screens that are too narrow to show your complete navbar (e.g. mobile devices)? In the best case, you'll get a multi-line navbar, but from your description, it would be broken since the position would be wrong...