I have a table with multiple rows and columns and each cell contains a link and a few small images. The link needs to be aligned to the top of the cell and the images need to be aligned to the bottom. Unfortunately using the vertical-align attribute doesn't work and both elements are being placed in the middle of the cell. Here is the HTML I have so far:
<table>
<tr>
<td style='width:120px; height:90px;'>
<a href='1.html' style='vertical-align:top'>Link 1</a>
<div style='vertical-align:bottom'><img src='1-1.jpg' /><img src='1-2.jpg' /></div>
</td>
<td style='width:120px; height:90px;'>
<a href='2.html' style='vertical-align:top'>Link 2</a>
<div style='vertical-align:bottom'><img src='2-1.jpg' /><img src='2-2.jpg' /></div>
</td>
</tr>
<tr> ... </tr>
</table>
EDIT: td height and width is also defined at 120 x 90 px
Updated
Referred to http://davidwalsh.name/table-cell-position-absolute and came up with the following answer...
.tlink {
position: relative;
height: 100%;
}
.bimg {
bottom: 0;
position: absolute;
}
<table height="250" border="1">
<tr>
<td>
<div class="tlink">
<a href='#'>Link One</a>
<div class="bimg">
<img src="http://farm4.static.flickr.com/3575/3293166516_de2cd751fc.jpg" width="50" height="50" />
</div>
</div>
</td>
</tr>
</table>
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
I'm struggling to set custom widths of div elements inside a table cell. Various questions (e.g.) talk about position and display parameters, and I've tried too many variation to describe without success. I'd greatly appreciate it if someone could either assist to get this minimal example working, or refer me to a specific previous answer that does actually solve this problem. Thanks in advance.
In the example I want to set the divs as horizontal bars to reflect the values. The table is fixed with and all div ancestors set to width: 100%.
.bar-column {
width: 100%;
}
.bar {
/* some other tested parameters.. */
/* position: absolute; */
/* display: block; float: left; */
/* display: table-cell; */
position: relative;
display: inline-block;
height: 100%;
background-color: yellow;
}
tr { width: 100%; }
<table width="600px" style="background-color: #ddd;">
<tr>
<th>Value</th>
<th class="bar-column">Name and bar</th>
</tr>
<tr>
<td>20</td>
<td class="bar-column">
<div width="50%" class="bar"><a class="link" href="#">twenty</a></div>
</td>
</tr>
<tr>
<td>40</td>
<td class="bar-column">
<div width="100%" class="bar"><a class="link" href="#">forty</a></div>
</td>
</tr>
<tr>
<td>10</td>
<td class="bar-column">
<div width="25%" class="bar"><a class="link" href="#">ten</a></div>
</td>
</tr>
</table>
The problem is using width="100%" for div when you need to use style="width:100%"
So for following line:
<div width="100%" class="bar"><a class="link" href="#">twenty</a></div>
Should be:
<div style="width:100%" class="bar"><a class="link" href="#">twenty</a></div>
Apply that for lines for the div containing 50% and 25%
I need to have some text next to an image on an HTML page. So I figured a table was the best way to go...
<table width="500px" >
<tbody>
<tr>
<td align="left">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
Fiddle https://jsfiddle.net/abuMariam/rsnc9vjp/
Problem is what if I want to move that text all the way up or all the way down. I can't because the image width makes both td elements to be wide so I have no way to vertically position the text within its td.
Can I still keep the table but still move the text up and down in its cell?
Yes, just use vertical-align="top" or vertical-align="bottom" on the td. Do you really need to use a table for this though? Tables should seldom be used nowadays, and only for tabular data.
<table width="500px" >
<tbody>
<tr>
<td align="left" style="vertical-align:top;">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
</table>
Here's one way you could do it without using a table, this method causes the divs to act like table cells:
.container {
width:500px;
display:table;
}
.container > div {
width:50%;
display:table-cell;
}
.container > div p {
margin:0;
}
.container .left {
vertical-align:top;
}
.container .right {
text-align:right;
}
<div class="container">
<div class="left">
<p>
<b>Isn't she hot??</b>
</p>
</div>
<div class="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</div>
</div>
I can get two divs next to each other using display: inline-block; in the style attribute, but then the div on the right side is aligned on the bottom rather than at the top. So I tried floating the divs and I get another issue...
If I use floats like so:
<div style="width:100%">
<div style="width:25%; float:left;">
<asp:HyperLink ID="hlPic" runat="server" Target="_blank" ToolTip="Click to open this picture.">
<asp:Image ID="imgPic" Width="256px" Height="256px" runat="server" ToolTip="Picture" />
</asp:HyperLink>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><asp:HyperLink ID="hlCGValue" runat="server" ToolTip="Go to this corporate group.">[hlCGValue]</asp:HyperLink></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<asp:Label ID="lblCompanyNameValue" runat="server"></asp:Label></h3>
<asp:Label ID="lblCompanyID" runat="server" Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="hlWebsiteValue" runat="server" Target="_blank">[hlWebsiteValue]</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAssignedToValue" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</div>
I get the following layout:
Notice the table with text is so far away from the picture...I'd like to move it right next to the picture. I tried doing it using display: inline-block but then the table of data would be next to the picture however it would sit at the bottom of the div rather then at the top (probably due to the size of the pic). If it helps the max size of the picture should only be 256px x 256px.
Can anyone help me with my CSS / HTML to make this look right...
Rendered html
<div style="width:100%">
<div style="width:25%; float:left;">
<a id="MainContent_hlPic" title="Click to open this picture." href="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" target="_blank"><img id="MainContent_imgPic" title="Picture" src="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" style="height:256px;width:256px;" /></a>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><a id="MainContent_hlCGValue" title="Go to this corporate group." href="../Corporate/Details.aspx?CorporateGroupID=39">Ford</a></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<span id="MainContent_lblCompanyNameValue">Ford Global Test Co.</span></h3>
</td>
</tr>
<tr>
<td>
<a id="MainContent_hlWebsiteValue" href="http://www.ford.com" target="_blank">www.ford.com</a>
</td>
</tr>
<tr>
<td>
<span id="MainContent_lblAssignedToValue">Name</span>
</td>
</tr>
</table>
</div>
</div>
You can use display: inline-block. When you want them aligned at the top, you must use vertical-align: top
<div>
<div id="#first">
<!-- image -->
</div>
<div id="second">
<!-- table -->
</div>
</div>
#first, #second {
display: inline-block;
vertical-align: top;
}
JSFiddle
The problem with display: inline-block is that the whitespace between your two div elements is NOT ignored. The result is that the width of your 2 divs + the width of the whitespace is more than 100%. That's why the second div appears under the first one.
One way to fix this is to set font-size: 0 on the parent element, but there are other solutions:
http://davidwalsh.name/remove-whitespace-inline-block
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>