Don't know how to fix it. I've trying to make different logotypes, depending on class of the tag. The html is:
<div id="header">
<a href="/index.php" id="logo" class="cet">
<h1 id="l">title</h1>
</a>
</div>
And css is:
#header {
height:204px;
background: url(../img/il-01.jpg) no-repeat 400px 2em;
position:relative;
clear:both;
}
#header #logo {
display:block;
position:absolute;
left:2em;
top:3em;
width:355px;
height:107px;
overflow:hidden;
}
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
#header #logo.cet {background: url( ../img/logo_cet.png) no-repeat -10px -40px;}
And if the class is set for 'cat' everything is just fine, but if it's set for 'cet' i can not see the image in IE6. In any other browser the background displays correctly.
The background images are little different by size, can it be the problem?
Thank you very much for your answers
You are not allowed mix lengths and keywords for the background(-positon). Old CSS versions didn't allow it, so older browsers may not support it. Instead of
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
use
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px 0; }
BTW, You need to check your HTML. A block element such as <h1> may not be inside a link (<a>).
Related
<body>
<div id="naslov">
<img src="image/Conto_logo.png" title="Conto Regis" alt="contologo" />
</div>
<div id="izbornik">
<div id="home">
</div>
</div>
</body>
body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:1.0em;
font-weight:100;
margin:0px;
color:#000;
}
div#naslov {
height: 128px;
width: 100%;
background-image: url(../image/Header.png);
background-repeat: repeat-x;
}
div#naslov > img {
cursor:pointer;
height: 80px;
margin:20px 0px 0px 20px;
}
div#izbornik {
width:100%;
height: 45px;
background-image: url(../image/izbornik.png);
background-repeat: repeat-x;
}
#home{
height:27px;
width:28px;
border:#000 1px dashed;
}
I'm having problem positioning div "home" inside div "izbornik" when I use margin-top to pull div "home" a bit down something strange happens. Dreamweaver displays it fine while IE10 and Chrome(latest) display it as if I used margin-top inside div "izbornik". Funny thing is if set div "home" to float:left margin starts acting normal but I'm not sure why, I'll be using some javascript later when the template is completed and I need the page to be very very stable. Any suggestions?
http://jsfiddle.net/xNrGR/6/ => in short why does that 8px gap appear there? I need the div "home" to go down not the whole parent-child combo
Add overflow:auto to #izbornik. Seems to be a collapsing margins issue.
div#izbornik {
width:100%;
height: 45px;
background: red;
background-repeat: repeat-x;
overflow:auto;
}
jsFiddle example
This is collapsing margins. You can fix this by setting overflow: auto or overflow: hidden to the parent div. This can cause issue for some users depending on the content you have.
The other option is to give the parent div a border. If you make the border the sam color as the background it would not be noticeable. When people use 1px border they normally use margin -1px too. These are just some ways of tackling the problem.
DEMO http://jsfiddle.net/kevinPHPkevin/xNrGR/9/
border: thin solid red;
Hi I am having quite a bit of trouble getting this sprite to work. The background image never shows up and just displays the link text. I have tried to use direct paths to the image, http://.., but it still does not display correctly. I appreciate the help.
CSS:
#social a {
text-indent: -9000px;
display: block;
background-repeat: no-repeat;
}
#youtubelink a {
background-image: url(social-btns.png);
background-position: 0px 0px;
width:46px;
height:43px;
}
#youtubelink a:hover {
background-position: 0px -43px;
}
#googlelink a {
background-image: url(social-btns.png);
background-position: 46px 0px;
width:46px;
height:43px;
}
#googlelink a:hover {
background-position: 46px -43px;
}
#facebooklink a {
background-image: url(social-btns.png);
background-position: 92px 0px;
width:46px;
height:43px;
}
#facebooklink a:hover {
background-position: 92px -43px;
}
HTML:
<div id="social" align="right">
<a id="youtubelink" href="#">Youtube</a>
<a id="googlelink" href="#">Google</a>
<a id="facebooklink" href="#">Facebook</a>
</div>
You have ids of anchor elements and you are selecting it as childs of them. You should do it like this:
a#facebooklink
The way you are using:
#facebooklink a
It will consider that anchor is child of #facebooklink and you have to change all of your SELECTORS.
Instead of:
#youtubelink a {
// my css rules
}
It should be:
a#youtubelink {
// my css rules
}
The same applies to all of your three social links.
That would be because your CSS is wrong. #youtubelink a means an anchor tag inside a tag with an id of "youtubelink". What you want is a#youtubelink
I have still having some CSS trouble with this and I cannot seem to fix it.
I just made a test page here to see if anyone can help:
The html:
<div class="menu_background">
<div class="menu">This is my menu</div>
</div>
The CSS:
body {
background-color: #FFC;
margin:0;
padding:0
}
.menu_background {
background:url(images/headline.jpg) repeat-x;
}
.menu {
width:60em;
margin:0 2em;
border:solid 1px #F00;
color:#FFF
}
The problem: there is a weird overlapping happening when you shorten the browser window, making it smaller than 60em.
You can look at the test page and here are two screenshots:
1. This is when the browser is full size:
This is when i shorten the browser window and scroll right:
The best way is to look at my test page and see for yourself.
.menu_background
{
min-width:56em
}
to avoid that put the background in your menu directly
.menu {
background:url(images/headline.jpg) repeat-x;
width:60em;
margin:0 2em;
border:solid 1px #F00;
color:#FFF
}
(review)
to have background 100%
.menu_background {
background:url(http://phpblog.inutritie.ro/images/headline.jpg) repeat-x;
min-width: 64em;
}
I have tested in Chrome, Mozilla and IE (latest versions). It seems it's only happening in IE.
How about:
.menu_background {
position:relative;
}
and
.menu {
position:absolute;
}
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}
I have an unordered list and the background image is being cut off when trying to place it next to the text.
I'm using jquery to add the class to the anchor tag to display the image, and its working fine, the only problem is the image gets cut off. I've been playing around with the css, but can't seem to figure out how to make the image display properly...it seems like the < li > is hiding the image behind it somehow...can I place the image in front of the < li > to make it display...or am I missing something else?
Can someone help me? Thanks.
Here's the HTML:
<ul id="nav>
<li>
<a class="folder_closed">Item 1</a>
<div style="display:none">Content for item 1</div>
</li>
</ul>
Here's the CSS:
ul#nav{
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
#nav > li{
vertical-align: top;
text-align:left;
clear: both;
margin-left:0px;
margin-right:0px;
padding-right:0px;
padding-left:15px;
}
.folder_open{
position:relative;
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
.folder_closed{
position:relative;
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
This sounds like a line-height issue---just for experimentation try setting the LI "line-height: 40px;" and see if your image shows completely...
One of the things I do in this case is I use some absolute positioning. First to set it up you have to have your UL and LIs relatively-positioned:
<style type="text/css">
ul, li {
position: relative;
}
</style>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
Then add some padding to the left side of the LI:
<style type="text/css">
li {
padding-left: 30px;
}
</style>
In this case you're using an <A> anchor w/ some class styling. Break up the <A> into two As:
<li>
<a class="folder_icon folder_closed"></a>
<a class="folder_title">... your title ...</a>
... your other content ...
</li>
And then turn one of the As into blocked display:
<style type="text/css">
li .folder_icon {
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 16px;
height: 16px;
}
li .folder_closed {
background-image: url("../images/minimize.png");
background-repeat: no-repeat;
background-position: -5px 1px;
}
</style>
How is that?
You need to add display:block and some dimensions (and perhaps some padding to make it look nice) to your A tag to ensure the element will be big enough to contain your background image.
You're better off transferring all of the styling to your A tag. Don't bother styling the LI tags at all (unless you need floats).
.folder_open{
vertical-align: top; <--- use padding to accomplish this instead
text-align:left; <-- this too
clear: both;
margin-left:0px;
margin-right:0px;
padding-right:0px;
padding-left:15px;
position:relative; <--- not needed.
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
display:block;
height: ??px;
width: ??px
}
It looks like it might be your background position... if I understand it properly, the maximize image is disappearing, correct?
Also, one good practice, when specifying background images, I have found, is to explicitly set the background color to transparent.
.folder_closed {
background: transparent url(../images/maximize.png) no-repeat scroll -5px 1px;
}
add "line-height: ?px;" to the container style-sheet