I am trying to insert a responsive image and text link to a workshop page inside an online article.
It seemed to me that I could fit this within a figure tag (containing the styling for the promo box) to copy and paste it easily into multiple articles.
The image on the left hand side must occupy 10% of the figure width, scaling responsively to the browser window.
The image must not float over the text below.
The text on the right must align to the top of the image and split over two paragraphs, scaling responsively to the remaining space.
The text must not wrap around the image.
There should be margins of 10px around the image and text.
Currently I am using a two cell table, but I cannot seem to make the left hand image cell scale responsively whilst simultaneously scaling the image to fill the cell 100%.
Also the table code seems clunky overlong overkill.
Is there a quicker and easier way to execute this? Perhaps using side-by-side divs?
ETA
I am being advised that I should be able to do this simply with divs, float, and display:inline, but I cannot find a way?
Current code (updated as of 16/5/2019 12:00 UST):
<figure style="margin:20px 0px 20px 0px;border-top:1px solid #555555;border-bottom:1px solid #555555;padding:10px 20px 5px 20px;">
<table border="0" cellpadding="0" cellspacing="30">
<tbody>
<tr>
<td style="width: 15%;" valign="top"><img src="https://mutiny.asia/Portals/0/EasyGalleryImages/770/PortfolioPro/Thumbs/51data-driven-decision-making.png" style="width: 100%;"></td>
<td style="padding:5px 0 0 10px" valign="top">
<p>This tutorial is part of our Asia Pacific workshop series covering how effective marketing is empowered by data driven decision making.</p>
<p>You can find out more about our Data Driven Decision Making Workshops here.</p>
</td>
</tr>
</tbody>
</table>
</figure>
If you want an object to use all the space of their parent object then you have to set 100% instead of px. However if the image should always just take 10% of the figure then it's 10%. That's assuming that the figure is the parent object of the img
Related
I have a Vertical white 1px on my image in windows outlook 2007 & 2010 for my HTML email.
I don't know why this is happening. This only happens in windows outlook so far from what i've seen. And not any other client.
Heres a photo
<tr>
<td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
<img editable label='header image' src="images/header.gif" class="header" width="640">
</td>
</tr>
I came across two possible reasons for this behavior of borders in Outlook while googling :
Outlook adds 1px border to the table cell elements. You can get rid of it by using border-collapse : collapse CSS property to your table cells and cellpadding="0" and cellspacing="0" attributes to the table element. The strange thing that this border appears to be only on the right side of the td, but it can be so due to <img> layout.
If you want to look for more information about this issue you can follow this link.
If you are setting somewhere in CSS classes your border to something like border: 0px style color (or not setting at all) (the main part here is setting border-width to 0px) it will be ignored by Outlook, so you can make it to not display border at all by setting border-style : none. I guess this is closer to your problem, as I've found a similar sample picture here.
This extra space could be caused by numerous things:
the image is incorrectly sized and is smaller than its container
if you are scaling the image to a size other than its original size Outlook will likely ignore these attributes and continue displaying it at the original size.
if your attempting to use margin or padding properties
if you are not collapsing your cells with table td { border-collapse:collapse } and table cellpadding="0" cellspacing="0"
if you are not making the image display:block
if you mistakenly overlooked stray while space within the actual image (improper slicing)
if, somewhere above or below this cell, you have content causing the table or cell width to be stretched further than it should.
Also, just from the code sample you posted.. You should remove the bgcolor from your cell and you should also remove the width from the img but leave it on the cell.
Updated Fiddle
Usually when I have this type of issues I wrap my td with a table. Below there is a part of your markup at the point where you have the image.
<td>
<table width="640" border="0" style="width:640px;border-collapse:collapse;padding:0;margin:0;">
<tr>
<td>
<img editable label='header image' src="http://t0.gstatic.com/images?q=tbn:ANd9GcTDhTODtu4yyVkbK7GUbFKctbR8Rgry7BRXnaC9Ztgls1vEVqsV" class="header" width="640" >
</td>
</tr>
</table>
</td>
This will fix your problem.
Our application makes heavy use of tables for layout and positioning, and has in the past been IE (quirks-mode) only. Moving forward, we are trying to get out of quirks mode, and replace the tables with divs and a more semantic layout.
The one thing stopping us is a quirks mode "feature" which allowed us to set height=100% on a table row, and have the row take up the remaing vertical space. So far, we have not been able to find a way to do this outside of quirks mode, either with or without tables.
This is the code we are using in the body of the page. No styling shown here, but the effect is still the same:
<table width="100%" height="100%" border="0">
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<th>This is my header bar</th>
</tr>
</table>
</td>
</tr>
<tr height="100%">
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my main section bar</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my footer bar</th>
</tr>
</table>
</td>
</tr>
This is what it looks like in Quirks mode. Note that the middle row (with height="100%") has expanded to take up the remaining vertical space:
Standards mode renders the same code like this:
jsFiddle with the code: http://jsfiddle.net/RBeWN/3/ (Note that due to iFrames, etc. the code won't actually render in quirks mode on jsFiddle but you can force it by using Dev Tools).
I attempted to do this with divs and some css, but it doesn't work: http://jsfiddle.net/BVMhR/3/. Setting the main div to height: 100%; gives it the same height as its parent, rather than making it take the remaining space. Setting box-sizing: border-box; makes no difference to this either.
Could someone help me find a solution to this problem? I'd like to be able to do it without javascript if at all possible, but if Javascript is needed, it would have to be a generic solution that can run on every page so that there isn't too much development overhead for setting it up.
After playing around with quite a few different layouts, and clarifying a few specifics regarding the requirements, I have found a way to do this with pure CSS.
It does involve knowing the heights of both the top and bottom row (although they could be specified in %), and also does involve a few extra layers of divs.
My example can be found in this jsFiddle. Notice that when expanding / shrinking the window, the middle row re-sizes appropriately. It is also possible to make this one into a scrolling div if necessary (with overflow: auto) so that the content will scroll when it is too long.
Feel free to contact me with any extra questions about this layout if needed.
I don't think this can be solved with pure CSS.
http://jsfiddle.net/AZcZx/10/
This is how I would do it with javascript... I'm sortof assuming based on your names for the divs that this is how your pages handled header, content, footer and so this should be general enough for that.
I've added borders/margins to show that there is an edge case there, which jQuery helps nicely with... I also assume that the content vertical centering in your quirks-mode example is not part of the question.
EDIT:
I stand corrected. It can be done with CSS, though it creates a width issue that was not quite trivial to fix, so here's the fix for that:
http://jsfiddle.net/AZcZx/27/
Do you know the height of the header and the footer? Looking at your fiddle example with the divs, they both have a fixed height. If that is the case you could just absolutely position them to the top and bottom, and add a margin to the top and bottom of your #divMain.
You also need the html and body set to height: 100%; and the #divMain set to min-height: 100%;
You need to expand the body and HTML to 100% for this to work. "height:100%" makes an item 100% of its parent. Without a defined size of the parent, it will only be as large as its children.
body, html {height:100%}
I have a table displaying tabular data in a scalable layout. The table itself has a width:100%.
In one of the columns, user data on rare occasion will include long strings that stretch the table outside of its container.
My solution was to put the contents of that cell inside a div, and give the div a max-width:320px and an overflow:auto. This work in IE9 and FF7, the two browsers I'm concerned about.
<table style="width:100%;">
<tr>
<td>
<div style="max-width:320px; overflow:auto;">
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
</div>
</td>
</tr>
</table>
However, my preference is not to limit the column's contents to a max-width of 320px. I'd rather that the div stretches as needed with the table, and only overflows when the table no longer fits the screen. Is this possible?
What i have done for this before is set overflow to hidden and put the full string to a alt text so you can see it if you hover. I dont know if thats what your going for but its something i use sometimes.
If not that try looking at useing jquery ui hide effects thats a good looking way to do it. Hope that helps
Why not give the div a max width of 100% and place it around the entire table?
http://jsfiddle.net/wJUyL/
<div style="max-width:100%; overflow:auto;">
<table style="width:100%;">
<tr>
<td>
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
</td>
</tr>
</table>
</div>
I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.
Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?
<table>
<tr>
<td style="width:200px; border:solid 1px black;">
<!-- can only make changes inside here -->
<div style="border:solid 1px red; text-align:right;">ABC</div>
<input style="width:300px;" value="DEF">
</td>
</tr>
</table>
The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I've tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.
Anyone know how to do this? Thank you.
If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/
If you can't wrap the input part, you can use the expression that run just one time (so it wouldn't cause any performance problems): http://jsfiddle.net/AkVqS/2/
Background: I'm using a photo shopping-cart that automatically generates a tables-based gallery from php, thus limiting me from too much flexibility. I'm also a novice.
Problem: The gallery puts out table cells that adapt in height to the content. When I have a full row of horizontal thumbnails the table cells are short and wide and when a row contains a vertical thumbnail, the cells are much taller. I want the cells to all be square, with the thumbnail sitting right in the middle.
I have access to input CSS in the style sheet, as well as a small section of HTML input but this HTML is inserted inside the individual thumbnail table cells; I have no access to edit the main table HTML. I have discovered class and ID names for many components using firebug.
What I've tried: I've tried to insert DIVs of a fixed size but the table still eats up any vertical space not occupied by the actual image. I've tried inserting a transparent PNG file, 180px x 180px into a div (which works to force the right size cells) and then put the thumbnail image (which is 150px x 150px) into another div and mess with z-indexing, relative/absolute positioning, etc. but I never got the two divs to stack on top of each other. Absolute positioning always aligned all 50 thumbnails to the top left corner of the page, not the table cell. Right now, the thumbnail div always comes up directly below the PNG div causing the table cell to be way too tall.
I'm stuck because I've tried everything within my skill-set and exhausted my googling. I think what I need is a way to either force the table cells to stay a certain height or find a way to make the thumbnail image overlay on top of the PNG.
Here is my current code, which is putting a 180x180 PNG (to force the table to the correct dimensions) in one div, and the thumbnail image in a second div, below the first div. Please excuse my sloppiness as I'm in no way a professional, just a tinkerer!
HTML inserted into individual table cells
<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>
And I have access to these additional classes & ids:
<table class="thumbnails_table">
<td class="thumbnails_cells">
I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:
td.thumbnails_cells {
width: 180px;
height: 180px;
text-align: center;
}
This is all it takes for me, 'cause my test image was already centred vertically (I think on account of its being inside a TD - default CSS and whatnot).
Hope this helps!
OK, I got this figured out...so simple, but hey when you've never done it before...
Based on good advice in another thread:
<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>