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>
Related
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 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).
There is a tag in 150x130:
.listings ul li a.thumb{
float:left;
width:150px;
height:130px;
border:#ededed 3px solid;
}
When I save an image I check the image's width and height. with==150 or height==130. And in view:
<a href="#" class="thumb">
if ( checking with is full )
{
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )" style = "width: 150px;" alt="" />
}
if ( checking height is full )
{
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )" style = "height: 130px;" alt="" />
}
</a>
There are images in this <a> tag in different sizes. For example, 100x130, 70x130, 150x140, 150x80 etc. But one of sizes of image equals to one of sizes of a tag. (150 or 130). Square images are not a problem, but different sized images seem to go in bottom or top, right or left side in the <a> tag.
How can place all size images center of the tag?
First, you need to convert the <a> to a block element with display:block.
Second, I would set your thumbnail as a background image instead and use background-position: center center which would cente rit vertically and horizontally
<a href="#" class="thumb"
style="background-image: url('#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )')"> </a>
Maybe add display: block; to both a and img and then add margin: 0px auto; to your img.
There are differences between HTML 4.01 and HTML5 in the tag.
The layout attributes: align, border, hspace, and vspace were deprecated in HTML 4.01, and are not supported in HTML5!
You have to wrap your tag in an other one and make your CSS do the align like this exemple:
<!DOCTYPE html>
<html>
<body>
<article style="text-align:center">
<img src="img/test.png" alt="test" />
</article>
</body>
</html>
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
On this site> http://upcycledonline.com/test/Site/defaultUpCyc.html when I view it in chrome the rightEdge image looks like it is pushed down by something. I have rearranged the code several times and tried the image in different places with no luck. Help please!
Should I throw it in a div and try to make it do something that way?
You can change the markup? If so, do this:
<div id="header" style="overflow:auto">...</div>
<img src="leftEdge.png" style="float: left;">
<div style="float:left;">
<img src="topEdge.png" style="float: left;">
<div id="content">...</div>
<img src="bottomEdge.png" style="float: left;">
</div>
<img src="rightEdge.png" style="float: left;">
Note that:
Nothing inside the new floated div should itself be floated.
You need that overflow:auto on the header
You will have to adjust the height of the content div