It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Hey i have been trying this for a while but with no luck.
I have the following code:
<img src="image link">
How can i apply an image hover to the img src? Thanks
Example of using background image instead of an <img> tag.
<a href="...." rel="fancybox"><a>
CSS:
a[rel=fancybox] {
display: block;
background: url('image1.jpg') no-repeat 0 0 transparent;
width: 100px;
height: 100px;
}
a[rel=...]:hover {
background: url('image2.jpg') no-repeat 0 0 transparent;
}
You may need to preload your images.
using JS:
<a href="" rel="" onmouseover="this.getElementById('i1').src='/images/image_hover.jpg'" onmouseout="this.getElementById('i1').src='/images/image.jpg'">
<img id="i1" src="/images/image.jpg">
</a>
Related
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Here is the website of question: http://keyclub.paschalcs.org/about/
Does anyone know why there is that large block of white there opposed to on the home page...?
If you are talking about the whitespace before the navigation
CSS Fix:
#page #pagehold {
width: 954px;
margin-top: 120px;
}
Screenshot after fix:
you are giving more margin that's what the gap is coming:
replace this code:
#page #pageHold {
margin-top: 120px;
width: 954px;
}
Try this
#page #pageHold {
margin-top: 120px;
width: 954px;
}
you put some extra margin on the top of you page holder div
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I have a textarea where I'd like the height to be the same of the container.
I've tried using height: 100%; although it doesn't seem to be working.
Does anybody know why?
Could you post some of your code? Could be anything. If you try the basics, it should work for all browsers.
.container {
border: 1px solid #000000;
height: 300px;
}
.container textarea{
border: 1px solid red;
height: 100%;
}
<div class="container">
<textarea>Hello world!</textarea>
</div>
Here you have an example: Textarea
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Actually my code is like below.
<div id="logoSec"></div>
<style>
#logoSec {
background-image: url("http://c.mtro.co/am/i/amlogo.png");
background-position: center center;
background-repeat: no-repeat;
height: 66px;
width: 100%;
}
</style>
So I want to give ALT to the image. So how can I give that? So that boots can view it.
Typically, if you want to give an image an alt attribute, you should use the img tag rather than creating a div with a background image. Like this:
<img src="http://c.mtro.co/am/i/amlogo.png" alt="Your alt text">
However, if this image is the company's logo (as it appears to be), I would recommend using an h1 element, and replacing the text with the image. This is semantic and will be better understood by search engines. It would look something like this:
HTML
<h1 class="logo">America's Mattress</h1>
CSS
h1.logo {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url("http://c.mtro.co/am/i/amlogo.png") no-repeat center center;
height: 66px;
width: 100%;
}
You can read more about this image replacement technique here: REPLACING THE -9999PX HACK (NEW IMAGE REPLACEMENT)
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I have a list items and I want to have an image on the items instead of a text....
What is the best way to do it? and what is killing me is trying to swap the image with onmouseover event...
Any help would be appreciated....
You can do it like this My Fiddle
Explanation:
Here you give a background image to each <li> element and than you give a little padding to these <li>... now using :hover you replace these with another image :)
HTML
<ul>
<li>Hello</li>
<li>World</li>
</ul>
CSS
ul li {
background-image: url('http://www.bseindia.com/include/images/nav_bullet.png');
background-repeat: no-repeat;
background-position: 2px 4px;
padding-left: 10px;
}
li:hover {
background-image: url('http://www.rbs.in/India/_image/bullet-blue.gif');
background-repeat: no-repeat;
background-position: 2px 4px;
padding-left: 10px;
}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
When you go to the webpage down below you will see the world Hi butting up next to the info box template, but I want it right underneath it. This will happen on any page of the wiki. I've already tried <br /> but that only made it slide down a little. If someone could help that would be great thanks. I'm sure there is some CSS code I'm missing somewhere.
Here is the html if you would like to see it:
<div style="background-color: {{color|{{{5}}}}}; color: white; width: {{{3}}}; padding: 10px; border-radius: 10px; float: left; height: {{{4}}}; margin: 5px;">
<h3 style="color: white; border: solid 5px rgb(255,255,255); border-radius: 5px; padding: 5px; background: {{color|{{{5}}}}};">{{{1}}}</h3>
<p style="font-size:15px;">
<b>{{{2}}}</b>
</p>
</div><noinclude>
Hi
</noinclude>
Thanks,
Jonathan
Wiki Page In Need Of Help
Well, if I understand your question, you are looking for <br clear="all" /> instead of just <br />
I followed the link you posted, and it took me to a template with near identical coding other than you seem to be using some {{color}} template now and instead of hi you have [[Category:Template]]. I hope that is the answer you are looking for.