Sample HTML code:
<table>
<tr>
<td class="a b">
Sample CSS file:
.a
{
background-image:url(a.png);
}
.b
{
background-image:url(b.png);
}
It seems like the "b" part is ignored.
Is there any way to inlclude both images in the same cell, even using other technique?
Now you can do with CSS3. http://www.zenelements.com/blog/css3-background-images/
#my_CSS3_id {
background: url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
}
You could do this:
<td class="a"><div class="b">...</div></td>
Then the td will have the first background, and the div inside it will have the second. If one is transparent, the other will show through. I think b.png will be on top, but I'm not sure about that.
It's an intriguing idea, but think about how other properties work, such as color.
.a { color: red; }
.b { color: blue; }
How could the text be both red and blue? In this case, blue wins the tiebreaker, because it's specified later.
There may be another way, if you can create an image ab.png that is the result of combining of a.png and b.png.
.a { background-image(a.png) }
.b { background-image(b.png) }
.a.b { background-image(ab.png) }
Caveat: It doesn't work in IE6.
No, every declaration of background-image will replace/ override the previous one for a given element. You'll need to nest an element for every additional background you want to apply. If you're trying to apply a fancy border to an element, there are some new border properties in CSS3, but they're not widely supported.
something like this could work:
<table>
<tr>
<td class="a">
<div class="b">
and the css:
.a
{
background: url(a.png) top left no-repeat;
}
.b
{
background: url(b.png) top right no-repeat;
}
set the div wide enough and you'll see one image floating in the top left and the other in the top right
You can't have both images as a bg image for a cell. You need to make 2 cell or put the images as <img ... /> tags inside the cell. Also some browers have issues reading class="a b c" class definitions.
Related
This code, from a Fiddle at http://jsfiddle.net/8gC3D/471/ in an answer at Tooltip with HTML content without JavaScript) should produce an image which, when hovered over, disappears and causes another element to appear elsewhere on the page. But it makes my browser behave unpredictably. Sometimes there is no effect on hover, sometimes a delayed effect, or the effect is only achieved with some additional movement of the mouse etc.
<style>
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;
}
#hoverme:hover { background-color:green;position:absolute ;left:300px;top:100px;width:40%;height:20%;}
</style>
<body>
<p id="hoverme">
<img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"> </img>
<span id="thistext">LOCATZ!!!!</span>
</p>
</body>
In trying to understand what was happening, by simplification etc (substituting the IDs for CLASSES etc had no effect), I lastly substituted a div, with a red background, in place of the Deviant Art image. The behaviour only became even crazier:-
<style>
.img {
background: red;
width: 50px;
height: 50px; }
.img:hover {visibility:hidden}
.thistext {font-size:22px; color:white}
.thistext:hover {color:black;}
.hoverme {width:50px;height:50px;
}
.hoverme:hover {
background-color:green;
position:absolute;
left:300px;
top:100px;
width:40%;
height:20%;
}
</style>
<body>
<p class="hoverme">
<div class="img"></div>
<span class="thistext">LOCATZ!!!!</span>
</p>
</body>
In my browser (FF) this generates a red square, on the LHS about 82px down the page.
1. Hovering over results in one of three behaviours: a) it disappears; b) it disappears and then reappears; c) the text "LOCATZ!!!!" is displayed beneath it.
2. Variously clicking or hovering on the red square or on the (invisible) red square's position, and then moving the cursor to the top left corner of the page, sometimes, makes the red square disappear, a red square appear in the top left corner, and a green rectangle 100px from the top and 300px from the left. These results seem unpredicatble/erratic.
What is wrong with the code and why does it so confuse the browser?!? I struggle to even get a repeatable behaviour.
UPDATE
Thanks, Joseph Marikle, good to know, but fwiw I'm trying to learn about hover and visibility funcionality rather than to implement the code from Fiddle. I have been fiddling with the code to try and do this but can't see what is "wrong" with it.
I would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery
I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
I have the following:
<li>
<a class="dw"><span>Design Goals</span></a>
</li>
.dw {
background-image: url(/Content/images/icons/fugue/document-globe.png);
}
When viewed in my browser I see something like this
iii
iii xxxxxxxxxxxxxxx
iii xxxxxxxxxxxxxxx
Where i represent the image and x the text "Design goals".
Is there some way that I could push down the background image or push up
the text so that I could get them to line up more. I tried adding padding
and a margin to the span but that does not seem to work. I also tried
different combination of line-height but that also does not work.
I tried: background-position: center but then it looks like this:
iii
xxxxxxiiixxxxxx
xxxxxxxxxxxxxxx
Use background-position.
for example:
background-position: center 100px;
Use Div instead Span because span default display property is inline, div display property is block. If you want to push up the text then give the span tag as first.
Html
<li>
<span>Design Goals</span>
<div class="dw" ><img src='http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg'><div>
</li>
css
.dw {
height: 100px;
width: 200px;
}
See Demo
In here I split the image so only it comes below to text Or use span display property as block to get down the text and image as first Reference
Apply the styling to the list element:
li {
background-image: url(http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg);
}
<li>Design Goals</li>