How can I add some horizontal "padding space" without editing my css file? I have the code below:
<img src="./img/fig.jpg" align="right" style="display:inline;margin:2px;"/>
<div style="text-align:justify;">
Bunch of text.
</div>
I've tried specifying style="padding-right: 5px" for the text div or enclosing the img with a div that includes padding, margins, etc. but to no avail - I can see that I can successfully add padding to above and below the text or image with this style specification, but never a space to separate the image and text..
If I get it correctly you have an image and a text to the left of it. You want to separate the text and the image with further space. What I suggest is to place an additional margin between them. Do like that:
<img src="./img/fig.jpg" align="right" style="display:inline;margin:2px 2px 2px 5px;"/>
add float:left to the image with the padding property.
Related
I want to add an image (img src="~/img/logo2.jpg) next to below image in a different column.
<header class="header overlay"
id="core_view_Header_0"
style="display: block;">
<!-- visible bar -->
<div class="col-md-12">
<table style="width: 100%">
<table style="display: <inline-block>;">
<table style="float: left;">
<tr>
<td>
<a class="logo" href="#" target="" tabindex="12">
<img src="~/img/logo1.png">
</a>
</td>
To fix this problem, you could put the image in its own paragraph with nothing to its left or right (except maybe another image):
The other option is to tell the web browser to push the graphic all the way to the left or right and make the text fill in NEXT to it, as the cat graphic to the right is doing here.
This is the code you need to align an image to the right:
**<img src="http://www.example.com/graphic.jpg" style="float: right;** margin-left: 5px; margin-bottom: 5px;"**>**
(The parts without ** are optional.)
What's all that gobbledygook mean? Let's break it down.
<img ... > is the placeholder for an image.
src="..." tells the web browser where the image's data is stored or uploaded (its location, its URL).
style="..." style tells the web browser to expect a special set of codes called CSS (never mind what that is) which explain how you want the image to be displayed: its size, its layout, whether it has a border, and so on. Styles can also be added to set text colors, sizes and fonts. If HTML is the main chassis of the car, styles tells the web browser about the car's paint job and whether it comes equipped with bluetooth or cup holders.
float: right; means push the image as far to the right as it will go. If there's already something there (the sidebar, another floated image), then this image will squeeze in just to the left of that. This is how you tile images side by side. You can also float: left; to make images behave just like the letters of this paragraph: they'll start at the left-hand margin, then tile from left to right across the column until they run out of room, then they flow onto the next line.
margin-left and margin-bottom are optional. They add a little bit of an empty border (px means "pixels") to the left and under the image so things aren't mashed right up against it. If you have floated an image to the left, you should probably include a margin-right to add padding there.
VERY IMPORTANT: TO TURN OFF "FLOAT", use the following command:
<p style="clear: both;">
Why would you want to do that? Well, if an image is floated all the way to the right or left, whatever you write after that will attempt to fill in around it. For example, the text above filled in around that cat picture.
If you don't want the following paragraph to fill in next to the floated object, then you need to use the clear command to draw an invisible horizontal line across the page that says "everything after this has to start on a new paragraph, below the floated image(s)."
Add another img tag within the same <td></td>.
Try adding some external CSS styles to your rather than inline-CSS (Looks better and clear). Also make sure to give style for your image size.
If you would like your imges to be vertical aligned, try: display:flex and flex-flow:column
See snippet below:
header {
display: block;
}
table {
width: 100%;
display: inline-block;
float: left;
}
td {
display: flex;
flex-flow: column;
}
<header class="header overlay" id="core_view_Header_0">
<!-- visible bar -->
<div class="col-md-12">
<table>
<tr>
<td>
<a class="logo" href="#" target="" tabindex="12">
<img src="~/img/logo1.png">
</a>
<a class="second-img" href="#" target="" tabindex="12">
<img src="~/img/logo2.png">
</a>
</td>
</tr>
</table>
</div>
</header>
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
Inside a long cell I have a image aligned to the left. Fine. Now I would like to insert a label right of the image that is aligned to the very right. When I try this the label appears always directly next to the image, hence isn't shifted to the very right, to the cell's end.
I tried variants of:
<img align="left" src="..." /><span align="right"><label>Mytext</label></span>
But the text is never shifted to the very right, it always stays directly next to the image.
Any ideas?
EDIT:
Fixed with:
<img align="left" src="..." /><span style="float:right"><label>Mytext</label></span>
Change
<span alignment="right">
to
<span style="float:right">
jsFiddle example
There is no "alignment" attribute so use just plain old CSS.
I have been trying to align the "Low" text and arrow that I showed on image. Basically want I is to align the text and the arrow (Low) some pixels below the blue chart. i.e. chart 3.
I'm generating those blue bars from my database and creating a table. Here is the code:
.lower {
display: block;
font-size:7pt;
color:#666666;
position:relative;
bottom: 5px;
left:-25px;
}
<td valign="bottom" style="width:8px;height:20px;"
<div style="padding: 0px;width:8px;height:" . round($var/2.5) . "px;background-position:bottom;background-repeat:no-repeat; display: block;">
<div class="lower" >Low <img src="icon-sort-up.png" />
</div>
</div>
</td>
The round($var/2.5) that one calculates my high to align my "High" text and arrow but somehow is affecting my Low text.
a busy cat http://sandbox.visistat.com/partner-reports/live3/pulse.png
You are nesting your "lower" div into your "high" div, that is why the round($var/2.5) is also affecting your "lower" div. Since the round($var/2.5) is written inline instead of in a seperate CSS file it will disregard anything that was in your css file and take the inline style instead.
To prevent this you can either place the "lower" div below the first div instead of nesting inside it.
Also you are not closing your opening td tag in your code example, although that might be a typo.
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.