For example you want to display an image beside a text, usually I would do this:
<table>
<tr>
<td><img ...></td>
<td>text</td>
</tr>
</table>
Is there a better alternative?
You should float them inside a container that is cleared.
Example:
https://jsfiddle.net/W74Z8/504/
A clean implementation is the "clearfix hack". This is Nicolas Gallagher's version:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
All these answers date back to 2016 or earlier... There's a new web standard for this using flex-boxes. In general floats for these sorts of problems is now frowned upon.
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
}
Example fiddle: https://jsfiddle.net/r8zgokeb/1/
Yes, divs and CSS are usually a better and easier way to place your HTML. There are many different ways to do this and it all depends on the context.
For instance, if you want to place an image to the right of your text, you could do it like so:
<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>
And if you want to display multiple items side by side, float is also usually preferred.For example:
<div>
<img src="image1.png" style="float: left;" />
<img src="image2.png" style="float: left;" />
<img src="image3.png" style="float: left;" />
</div>
Floating these images to the same side will have then laying next to each other for as long as you hava horizontal space.
these days div is the new norm
<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>
What about display:inline?
<html>
<img src='#' style='display:inline;'/>
<p style='display:inline;'> Some text </p>
</html>
Usually I do this:
<div>
<p>
<img src='1.jpg' align='left' />
Text Here
<p>
</div>
It depends on what you want to do and what type of data/information you are displaying. In general, tables are reserved for displaying tabular data.
An alternate for your situation would be to use css. A simple option would be to float your image and give it a margin:
<p>
<img style="float: left; margin: 5px;" ... />
Text goes here...
</p>
This would cause the text to wrap around the image. If you don't want the text to wrap around the image, put the text in a separate container:
<div>
<img style="float: left; margin: ...;" ... />
<p style="float: right;">Text goes here...</p>
</div>
Note that it may be necessary to assign a width to the paragraph tag to display the way you'd like. Also note, for elements that appear below floated elements, you may need to add the style "clear: left;" (or clear: right, or clear: both).
The negative margin would help a lot!
The html DOM looks like below:
<div class="main">
<div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>
And the CSS:
.main {
float:left;
width:100%;
}
.main_body{
margin-left:210px;
height:200px;
}
.left{
float:left;
width:200px;
height:200px;
margin-left:-100%;
}
The main_body will responsive it's with, may it helps you!
Try calling the image in a <DIV> tag, which will allow a smoother and faster loading time. Take note that because this is a background image, you can also put text over the image between the <DIV></DIV> tags. This works great for custom store/shop listings as well...to post a cool " Sold Out! " overlay, or whatever you might want.
Here is the pic/text- sided by side version, which can be used for blog post and article listing:
<div class="whatever_container">
<h2>Title/Header Here</h2>
<div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>
Related
Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example
Let's say I have an Image.
<img src="lala.png" />
This image has a width=400px;.
and I want to type "Lala" under this Image.
<img src="lala.png" />
<br>
<span>Lala</span>
Note that I'm gonna be fetching those images and those texts from a database, the width of the images is fixed at 400px, but of course the texts will vary in size, so I can't use margin-left:100px; to push the text to the middle because It will look wrong on other texts...
What is the best way to do it?
You can use a div instead of span.
HTML:
<div class="underImage">Blah</div>
Style:
.underImage {
width: 400px;
text-align: center;
}
you can do this by text-align:center;
<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>
Just wrap the image and text in an element and use the text-align CSS attribute on the wrapping element.
HTML
<p class="center-wrapper">
<img src="lala.png" />
<br>
<span>Lala</span>
</p>
CSS
.center-wrapper { text-align: center; }
There are several ways to achieve that, but the most flexible and most effective way is to use a one-cell table, with the caption text in a caption element:
<table class="image">
<caption align="bottom">caption text</caption>
<tr><td><img ...></td></tr>
</table>
There are many people who oppose such use of a table on quasi-religious grounds, but it’s still the flexible way that does not require you to set the width of the text explicitly (as opposite to letting it be determined by the width of the image) and works independently of CSS support.
In following example:
Line1 <br /> Line2
I'm using <br /> to force Line2 to go to next line, but as far as I know there is no cross browser friendly way of setting the height of br. What is an alternative method I could use?
Use differents blocks :
<p>Line1</p>
<p>Line2</p>
Normally, using <br /> is old way of breaking a line.
You should use <p>, <div> or some block level elements and give them top or bottom margins.
p {
margin-top:5px;
margin-bottom:5px
}
Using CSS you can control the line-height property of any element.
someElement {
line-height:12px;
}
Now you may simply set this for an element, or use it on the entire HTML to provide uniformity across the document. This is safe, cross-browser compatible and easy to use.
You can use css line-height property along with <br/> tag to control spacing between lines.
<style>
.small
{
line-height:100px;
}
</style>
<p class="small">
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
</p>
I add a <div>, best way for me, with CSS margin. Or,
The <p> tag.
Use padding & / or margin css attributes.
You can add a <div> like this
<div style="height: [put your height here]; display: block;"></div>
Seems to work for me, as shown here:
<span>This is the previous line!</span>
<div style="height: 50px; display: block;"></div>
<span>This will be 50 pixels below the previous line.</span>
You can even use a span!
<span>This is the previous line!</span>
<span style="height: 50px; display: block;"></span>
<span>This will be 50 pixels below the previous line.</span>
I'm wrapping text around an image using markup something like this:
CSS:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
HTML:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="..." alt="..." />
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
This actually looks okay except that, if the text is shorter than the height of the image, my page footer is also wrapped around the image.
I want my footer to appear below the image. If I add <p style="clear:both"> </p> to clear the float, then I have too much space above my footer.
How can I clear the float and force any subsequent markup below my image without adding any more whitespace?
Add overflow: hidden to the CSS for the paragraph that contains the floating image. That will make the paragraph grow to fully contain the floated image. For example:
<h2>Author Information</h2>
<p class="inner">
<img id="imgAuthor" src="http://placekitten.com/200/200">
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
p.inner {
overflow: hidden;
}
And a live version: http://jsfiddle.net/ambiguous/S2yZG/
Alternatively, you could stick a <div style="clear: both;"></div> right at the bottom of the paragraph but you should only use this in cases where you need the overflow to be something other than hidden. For example:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="http://placekitten.com/250/200">
<b>Bob Smith</b>
<div class="cBoth"></div>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
.cBoth {
clear: both;
height: 1px;
}
And a live version of this approach: http://jsfiddle.net/ambiguous/3yGxA/
Why does overflow:hidden work? From the CSS3 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that is a flow root (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same flow as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats [...]
Your <p style="overflow: hidden;"> satisfies the third condition so its bounding box is extended below the bottom of the floating image so that there is no overlap.
You were on the right path to try <p style="clear:both"> </p> but all you need to do is change the height and margins.
<div style="clear:both; height:1px; margin:0;"></div>
alternatively you can just add clear: both to the footer style and forget this markup.
How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>