I'm trying to get a background image to display when the mouse is hovered over any one of three images. Here is a jsFiddle: http://jsfiddle.net/cvh2013/gefKT/, can anyone tell me what I'm doing wrong please? At the moment the background image simply doesn't display when you hover any of the three circular images.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>SVG Included with <object> tag</title>
<style>
.center {
text-align: center;
}
#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<div id="images">
<td class="center"><object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object></td>
<td class="center"><object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object></td>
<td class="center"><object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object></td>
</div>
</tr>
</table>
</body>
</html>
If I was you I would change the CSS as follows:
<style>
.center {text-align:center;}
.boxy:hover {box-shadow:0 0 5px #000; border-radius:50%;}
</style>
And add the .boxy class to the object you have declared. Border Radius is much cleaner than to use an image (one more asset to load). You can use the actual image approach you wanted if you want this to work on IE8 and below.
Fiddle: http://jsfiddle.net/gefKT/9/
The #images div contains nothing thus has no dimensions and therefore can never be hovered over. You need to place your three images inside this div.
Related
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
I am very new to HTML and CSS.
I am trying to centre a banner at the top of the screen.
I have tried setting the margin left and right to auto, however when I try that, or text-align: center, nothing happens and I'm not sure why...
I placed the banner within a div.
<div class="bruceBanner">
<a href="http://www.example.com">
<img border="0" alt="XYZ Banner" src="http://www.fablevision.com/northstar/make/objects/banner3.gif" width="553" height="172">
</a>
</div>
And referenced its class like so.
.bruceBanner {
margin-left: auto;
margin-right: auto;
}
The full html is below, in case of any mistakes I am unaware of.
<DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>XYZ Products</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="bruceBanner">
<a href="http://www.example.com">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
</body>
</html>
.bruceBanner is a div element.
div elements by default are block-level elements, meaning they take up 100% width.
You need to set a width smaller than 100% or change it's display to an inline-block.
.bruceBanner {
margin: 0 auto;
width: 50%;
}
You forgot a .:
.bruceBanner {
^---
. in CSS is for a class. without the dot, you're trying to style an unknown/illegal html tag <bruceBanner>
From w3schools.com
.bruceBanner {
margin: auto;
}
I'm sure there is a ridiculously simple answer for why this simple example is not showing my the background image but I just don't see it. I'm expecting to see the image twice, once when the image uses the class, and once when it references the image directly.
Thoughts
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.chkCombo {
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
</style>
</head>
<body>
<div class="x">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="chkCombo">
</div>
<hr />
<div class="x">
<img src="http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png" />
</div>
</body>
</html>
By adding height and width to the image and setting it to display: block; the image will appear.
Here is a the fixed fiddle
By the way, I don't see the effect of the base64 image, you use it and also using a class with background image on the same element.
Try using this style
.chkCombo {
height: 56px;
width: 350px;
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
A jsFiddle demo
P.S: A background image is litteraly a "background" image so if an element has no dimentions(height and width) then the background image will have no dimentions. Therefore you need to give it a hight and width
I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<img src="b.png" />
</div>
</body>
</html>
style.css
.main:hover {
background-image: url('c.png');
}
Your <div class="main"> is getting c.png as its background – you just can't see it behind the <img src="b.png"> element.
Try removing that <img> tag, and using this for your CSS:
.main {
background-image: url(b.png);
}
.main:hover {
background-image: url(c.png);
}
You probably also need to give .main a height and width, since it no longer has anything inside it to give it a size.
Nothing wrong with what you are doing, except that the image(b.png) is of course on top of the background...So you can't see the background image.
I've tried to set the margin and border to 0,but still not working.
<style type="text/css">
img {margin:0;}
</style>
<body>
<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />
How to make two images stay close to each other?
You can eliminate the css for the image and put the image tags on the same line with no space.
<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />
Comment-out the line break between them.
<img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />
Why? HTML allows as many spaces (both breaking and non) for code formatting, but only displays the first. In your case, the images being on different lines is being interpreted as a space between them. The simplest solution is to put them both on one line, but that isn't as readable.
<style type="text/css">
img {margin:0; float: left;}
</style>
I just had this problem, but couldn't find an answer to my problem, first i don't want my images to float left; second, using diplay:block is not a good idea because i want them in-line, also display:block in-line makes doesn't work.
The SOLUTION is quite easy, take out the "enter" and put your images in the same line. I explain:
WRONG
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
OK
<img src="flower1.jpg"/><img src="flower1.jpg"/><img src="flower1.jpg"/>
So hope it helps.
this css should stick the images close to eachother without any space, linebreaks or borders between the images...
<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>
I would suggest to put each image in a individual div having style float:left. These 2 divs should be enclosed within a parent div which itself is float: left like,
<div style="float:left">
<div style="float:left">
<img src="/static/btnNext.gif" border="0" />
</div>
<div style="float:left">
<img src="/static/btnSave.gif" border="0" />
</div>
</div>
Remove spaces between img tags and use css vertical-align:top
HTML:
<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>
CSS:
img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}