I'm very new to web development, I have a code like this :
<style type="text/css">
span {
background:red;
background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
}
</style>
<span>
Contents.
</span>
I get the output but the image is been placed over Contents text. I tried with :
background-position: 25px;
But that is making the image to disappear! But what I was looking for is :
Contents . . . . . . . . . . . . . my_image
(note that . in above is space)
Where I'm making the mistake?
Thanks in advance.
Remember that <span> is an inline element, which is not the correct markup to use for items that you wish to display in a block manner. For that, you should use a <div>. That being said, you can use text-indent: 25px; to move your text to the right. Alternatively, you can move the new <div> to the right using left: 25px;. Remember that left will tell it how far from the left border you wish to place it. Then, you can place the text in another <div>:
<style type="text/css">
div {
display:inline-block;
}
div.image {
background:red;
background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
left:25px;
}
</style>
<div class="box">
Contents.
<div class="image"></div>
</div>
If you don't need that your image is a background-image you can apply this:
CSS:
<style>
div#box{
width: 100%;
}
img#image {
float: right;
}
</style>
HTML :
<div id="box">
<span id="content">
Contents.
</span>
<img src="bkg.jpg" alt="Image not available">
</div>
I am also agree with #L0j1k that span is a inline level element. Why you are placing some content inside a span and then applying a background image in that span. Anyways please check the jsfiddle link
DEMO
http://jsfiddle.net/saorabhkr/BvMyg/
Inline:-
<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>
Related
I'm having some troubles aligning a piece of text along with an image that should be ( my guess ) within the same tag.
It is supossed to look like this: (Ignore the black stripe)
but it is currently looking like this:
The HTML for it is:
<span class="size-chart-disclaimer">If in doubt, measure your similar<br>
style garment and match our grid.
<img src="{{'we-use.gif' | asset_url}}"/></span>
and the CSS is:
.size-chart-disclaimer img{
float:right;
}
Could someone shed a light on the best way to achieve this ?
I suggest to use a tag for the text, and then style it.
.size-chart-disclaimer img {
float: right;
}
p {
width: 240px;
display: inline-block;
margin-top: 0px;
}
<span class="size-chart-disclaimer">
<p>
If in doubt, measure your similar
style garment and match our grid.
</p>
<img src="http://www.placehold.it/50x50"/>
</span>
Just placing the image in front of the text does the job aswell:
.size-chart-disclaimer img{
float: right;
}
<span class="size-chart-disclaimer">
<img src="http://www.placehold.it/100x50" /> If in doubt, measure your similar
<br /> style garment and match our grid.
</span>
Add following css to yout img tag: vertical-align: middle;
See this JSFiddle
This one is taking a lot of time as I can not understand the problem associated with.I am still a newcomer to CSS and don't understand the problem completely .
This is the piece of code from CSS which controls the background of the web page
#intro1 {
height:1000px;
background: #000 url('../innerimages/slide4.jpg');
background-position:center 0px;
background-repeat:no-repeat;
background-size:cover;
}
at this point the web page looks something like this
now if i change the color to fff.i.e
#intro1 {
height:1000px;
background: #fff url('../innerimages/slide4.jpg');
background-position:center 0px;
background-repeat:no-repeat;
background-size:cover;
}
the page looks like this
and this is the html part
<div id="verticalScrollArea" style="display: block; top: -65.27584886649873px;">
<section id="intro1" data-navigation-tag="About SVP 69" style="display: block; background-position: 100% 44.8228px;">
<div id="intro1content" class="content" style="display: block; margin-top: 61.86937866666666px;">
<div class="contentData"> <div class="background">SOME TEXT <br>
<img src="./69 SVP_files/know-more.png">
</div> </div>
<div class="scrollDown"> <span>SOME TEXT</span> <img src="./69 SVP_files/scroll-down.png"></div>
</div>
</section>
What I want is the image to be in full screen .I can not figure it out where am I going wrong in removing the back/white strip ?
How it can be removed
You have to remove margin-top from your #intro1's inline CSS, you can use padding-top instead of margin
The problem is being caused by this line of code:
<div id="intro1content" class="content" style="display: block; margin-top: 61.86937866666666px;">
Specifically, the margin-top that you are applying inline is causing this colored strip to show. Just remove this inline css for margin-top.
There in this ID:
remove the margin-top: 61.86937866666666px;
I don't find any problem with the header section. Only one glitch I saw that a white strange line was appearing. for better explanation check the screenshot.
let me know this is what you want?
okay do you want like this? check the update screenshot?
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}
The html code for the widget header is as follows.
<div class="widget-header">
<span>caption</span>
more
<img src="/img/widgets/widgets_more.gif" />
</div>
My CSS code is
.widget-header span { float: left; }
.widget-header a, img { float: right; }
If this, the widgets_more right arrow would position to the left of text 'more' like this,
How can I get the right order with modifying the css code?
Thanks.
Instead of placing the arrow next to the link as an image, you should set it as a background image in a class.
Something like this should do it (untested but should work):
CSS:
a.widgets-more{
background-image:url(/img/widgets/widgets_more.gif);
background-position:right;
background-repeat:no-repeat;
padding-right:10px;
}
If you want the link to appear on the left of the link, then use the following:
a.widgets-more{
background-image:url(/img/widgets/widgets_more.gif);
background-position:left;
background-repeat:no-repeat;
padding-left:10px;
}
Then apply the class to your link:
<a class="widgets-more" href="sh/index.php?type=rec">more</a>
Also, the element floated to the right should be stacked above the element floated to the left. So rearrange your HTML to look like this:
<div class="widget-header">
<a class="widgets-more" href="sh/index.php?type=rec">more</a>
<span>caption</span>
</div>