I am using twitter bootstrap.
<img id="profileImage"
data-src="holder.js/300x200" src="${picurls}">
Now the problem is when i upload a image the img area changes to the uploaded image size.
I want a fix image area and every image showld adjust within that box.
There is something wrong in it, please try following block of code
Add line into your img tag.
style="width: 300px; height: 200px;
<ul class="thumbnails">
<li class="span4">
<img id="profileImage" data-src="holder.js/300x200" src="${picurls}">
</li>
...
</ul>
Twitter bootstrap uses the 12 columns grid, so the span4 is telling that the image has 4/12 of the width of the page (or the container it's in).
Related
How can i change an image to another image when hover?
I have image and i have to change the image to another image when mouseover. How can i do that?
Presently, I have image 1 and i have to change the image 1 to image 2 when mouseover on image 1.
And i don't know how to do that. I know how to change colors with hover but i don't know how to change it to another image.
<div style="position:absolute; top:1050px; left:360px;"><img src="image1.jpg"><div>
FIDDLE
http://jsfiddle.net/rpku6d89/3/
<div class="hello">
</div>
css
.hello{
background-image: url("http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg");
height:300px;
width:400px;
}
.hello:hover{
background-image: url("http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg");
}
<img src="image1.jpg"
onmouseover="this.src='image2.jpg'"
onmouseout="this.src='image1.jpg'">
I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers
I have this image http://s23.postimg.org/on361znhn/Transform_Marketing.png
and I want to put 3 colored and centered (learn more) texts under each image. I tried this:
<p>
<span style="float:left;margin-left:100px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:170px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:120px;margin-right:40px"> Learn More</span>
</p>
but the link is not working. I want an option to change (learn more) text colour and font size and have it centered under each image.
Thank you for help.
to center each text below its image, the below code should help:
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img1.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img2.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img3.png"><br />learn more
</div>
Hope it helps.
Update (in case only one image):
You have to know the image width, adjust the text positions below the image using photoshop (you should use the same font & size you are using on the website).
Adjust the margins of your spans to center the text manually.
Hi i have a div like below
<div id="iconArrow"><img src="footer.jpg" width="35" height="27" style="position:fixed;"></div>
i need to add a text "more" on right side of image. please help me check the example image for final output.
after adding codes
It could have something to do with HTML5.
HTML5
<figure>
<img src="footer.jpg" width="35" height="27">
<figcaption>More</figcaption>
</figure>
CSS
figure {
position: fixed;
}
figure > * {
float :left;
}
Here's a jsFiddle
If you want your image to be fixed and you want to add a text beside it I suggest your wrap your image tag in another div with fixed position and do this:
<div id="wrapper" style="position: fixed;width: 35px;height: 27px;">
<img src="footer.jpg" width="35" height="27" /><div style="position: absolute;right: 0">your note</div>
</div>
Please help! I have tried using Firebug to see why my href's are not click-able but I can't figure it out. I don't use tables. The site is http://spiritfestcorpus.com/
The big circular image is wrapped in a href
I'd really appreciate any suggestions.
Here is the code from line 357 if you VIEW SOURCE in Firefox
<div id="slideshow_wrapper" )">
<div id="frame"></div>
<div id="slideshow_container">
<div id="slideshow">
<a style="z-index:9999999; position: absolute;" id="cdImage1" href="concertsbuy.aspx?eventId=53"><img id="Repeater1_ctl00_cdImage" src="images/slideshow/home/albums/2012/SPIRIT_Fest_Corpus/LMG_DC12Circle.png" style="border-width:0px;" /></a>
with position: absolute you must specify width and height. And if you are going to specify width and height on an a tag, you need to use display: block