I want to display 2 images on the same row like this:
Image Same Text Image
If I put one image it works, but if I put both of them I get 404.
I think I am doing something wrong in the code I don't have much experience with HTML and don't know what I am missing.
The files are in same folder.
Here is the code:
<td colspan="8" >
<h1>
<img src="/home/apps/myapp/dynamic/img/myimage1.png" style="float:left; " alt="This is my mage" height="130" width="455">
<b>Same text</b>
<img src="/home/apps/myapp/dynamic/img/myimage2.png" style="float:right; vertical-align:middle;" alt="My second image" height="130" width="454"></h1>
</td>
simply you can use bootstrap..
divide the page into 2 halves using col-md-6 and put your data in its individual divs
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="/path1">
</div>
<div class="col-md-6">
<img src="/path2">
</div>
</div>
</div>
There is an extra start tag in your code, which is giving the error.
The Problem:
<<img src="/home/apps/myapp/dynamic/img/myimage2.png"
style="float:right; vertical-align:middle;" alt="My second image"
height="130" width="454"></h1>
The Solution
<img src="/home/apps/myapp/dynamic/img/myimage2.png"
style="float:right; vertical-align:middle;" alt="My second image"
height="130" width="454"></h1>
You can do by creating a nested table.
<td>
<table width="100%">
<tr>
<td>Image 1</td>
<td>Text</td>
<td>Image 2</td>
</tr>
</table>
</td>
or you can do by creating div with float attributes. Do image1 and text to float:left; and image2 to float:right.
Related
Looking to have an image on the left side of a container, however, if the content is too short or too long I'd have to adjust the height of the image proportionally to prevent the content from sliding below the image. The reason I want to contain the Image and the content in the container is to ensure that the image is coherent throughout the entirety of the pages.
We can use HTML / in-line CSS / Markdown to make this adjustment. Perhaps I believe we may need to use Flexbox
I've attached the code below, I've used Grid and a table, and I don't really like it
<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
align=“left”
hspace=“30"
width=“100”
height=“100">
</div>
<div>
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</br>
</td>
</tr>
</table>
</div>
</div>
--Most Recent
The image is on the left side but the table seems to overlap the image
This is what it currently looks like
edit 2
I've edited this again for you if this needs to be inline styles, i've gave a class name on the different containers so you can clearly see how this is working,
your image can just go into image-container and your content can go in content-container. You can add size to the containers, padding, margin etc.. to adjust the layout that you want, but this should help with the basic setup for your HTML.
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
hspace="30" width="100" height="100">
</div>
<div class="content-container">
<h3>TITLE</h3>
<h4>Description for Title</h4>
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style="padding-left: 20px;">
<p>Updates are made annually or more frequently if needed</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><strong>Contact Us:</strong></td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email: Jane Doe
</li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Here a flexbox example:
HTML
<div style="display: flex; flex-flow: row nowrap;">
<div style="flex: 1 auto;">
<img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg” hspace="30" width="100" height="100">
</div>
<div style="flex: 1 auto;">
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”>
<p>Updates are made annually or more frequently if needed
<p />
</td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
DEMO HERE
How would I go about aligning four images (two square images and two rectangular images) using a table? Should look something like this: http://imgur.com/a/PdbZq
<table>
<tr>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
</tr>
</table>
Doesn't make much sense to use a table for what you want does it? A table has equal size cells in an entire column - which is exactly what you don't want. One CSS solution:
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/B8jHVoB.png" />
<img src="http://i.imgur.com/SXEsKuc.png" />
</div>
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/SXEsKuc.png" />
<img src="http://i.imgur.com/B8jHVoB.png" />
</div>
Almost forgot: don't use an inline style, set a class to hold a row of images, with the white-space: no-wrap as an attribute.
Using this html code:
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" >
<p style="margin-top: 20px; margin-bottom: 0px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
It works fine, however, I need to add a left margin of 50px before MyImage2.
So I update my code this way.
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" style="margin-left: 50px;">
<!-----------------50 px margin added------------->
<p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
With this code I have a responsivity issue.
If I reduce the window size, the "other HTML stuff" displayed on the right frame overwrites the image2 of 50 pixels.
How can I have the right frame not to overwrite the right part of my image2?
I tried to increase the width of the td and / or table tage, it did not work for me. So hopefully someone can help me there.
EDIT:
you can check the issue on this link:
http://www.bootply.com/t1hF1cHuD2
reduce the window to have right frame to overwrite the left frame (which is what I want not to happen)
Try not to use inline styles as sometimes it can cause problems, I suggest making a section in the header and try putting margin-left:50px !important; and see if that works. Also you could use position:relative; and using top left right bottom properties to move it where you want.
The layout using columns with a width percentage (25%). So if you do not want to change the logic of the layout, the simplest solution is to add the same margin to the right content to always stay away from the image.
<div align="left" style="margin-left:50px;" >
Here the example. With the colors you can see what happens to your columns (and contents) in responsive: JS Fiddle link
I am trying to lower the image to the middle of text inside of anchor element
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span>testttttt</span>
<img src="/test.jpg" style="padding-top:5px;">
</a>
</td>
as you can see the Image has style="padding-top:5px;" but instead of lowering the image only, it's pushing the text too.
I can't use float because its suppose to work on email clients.
Thanks for any help
Baaroz
Edited: just set the align attribute for you img element: align="middle"
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span >testttttt</span>
<img src="/test.jpg" style="padding-top:5px;" align="middle">
</a>
</td>
Apply vertical-align: middle; to your image...
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;" href="">
<span>testttttt</span>
<img src="/test.jpg" style="vertical-align:middle;" />
</a>
</td>
fiddle
I cant seem to have a logo and a table side by side but not very close to each other. The only way I've been able to achieve this is using a table, but the image and the table become very close to each other. I want to the table in the middle of the page, and the logo between the table and the far end of the left screen.
like this
logo table
this is how it is right now
logo
---table
<div id="header" style="height:15%;width:100%;">
<img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
</tr>
</table>
</div>
use two div and set to float left
<div id="header" style="height:15%;width:100%;">
<div style='float:left'>
<img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
</div>
<div style='float:leftt'>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
</tr>
</table>
</div>
</div>
1) Don't use tables for layouts. Learn how to use FLOATS.
2) Use a CSS background image for your logo. UI elements (that are not page content) should be CSS backgrounds, not inline images.
Assuming your logo is 100 x 100 (adjust accordingly):
.logoContainer {
background-image:url(../yourimage.png);
background-repeat:no-repeat
padding-left:100px;
min-height:100px;
}
This should be an easy way to get u going for what ur trying to achieve..
http://jsfiddle.net/8NDZP/
<div style='float:left'>
<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Moscow_July_2011-7a.jpg/325px-Moscow_July_2011-7a.jpg'>
</div>
<div style='float:right'>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td>
<h1>Home</h1>
</td>
<td>
<h1>Home</h1>
</td>
<td>
<h1>Home</h1>
</td>
</tr>
</table>
</div>