I have a hyperlink that contains an image, nothing special - like this .
I want to align the text to the right of the image as per attachment1, but the result is as per attachment2. I need to also block the hyperlink so that it fills the rectangle (its width and height)
Anyone know how to acheive this?
Bunch of ways to do this:
Using <div>'s
<div style="width: 200px;">
<div style="float: left; width: 70px;">
<img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" />
</div>
<div style="float: right; width: 130px;">
<p><strong>This is a really really over sized title for a link to neverland</strong></p><p>Some other text</p>
</div>
<div style="clear: both;">
</div>
Using a <table>
<table width="200">
<tr>
<td rowspan="2"><img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" /></td>
<td><strong>This is a really really over sized title for a link to neverland</strong></td>
</tr>
<tr>
<td>Some other text</td>
</tr>
</table>
put this on your page, see what is happening. Cheers
<div style="width:500px;height:250px; padding:10px; padding-left:250px; border:solid 1px black; background-repeat:no-repeat; background-position:left center; background-image:url('https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAlUA/EHduo3GhTDs/s250-c-k/photo.jpg')">
Google – 52 minutes ago – September 8 marks the anniversary of Star Trek's first broadcast, and naturally ... Amit Singhal originally shared this post: OK, I admit it, I am a die-hard Trekkie. I grew up watching endless ...
Google – 18 hours ago – By now, you may know that when you search for [define] followed by a word, Google will show you the definition. But did you know that there's a Dictionary mode ...
</div>
Similar to #njk, but using the a as the block element.
http://jsfiddle.net/scrimothy/r6TKz/
Related
Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.
The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.
Things I have tested to no effect:
more or less text content
giving the cells a width in pixels
giving the whole table width:100%
marking images display:block or display:inline
Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.
When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?
Here's the code, stripped of some text styling to keep it legible:
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
<div style="font-size:13px; ">
<div style="font-size:16px;font-weight:600;">Name of the sender </div>
<div>Description of the role of the sender</div>
</div>
</td>
<td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
<img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
</td>
</tr>
<tr>
<td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
<div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
<div style="font-size:13px;">06 1234 5678</div>
</td>
<td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
<div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
<div style="font-size:13px;">organisation.nl</div>
</td>
</tr>
<tr>
<td colspan=2 style="padding:20px;">
<p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
</td>
</tr>
</table>
First, make your table width 100%:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
That will make it fit the full width of its container.
Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:
<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>
I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.
Continue to use the width and height attributes because Outlook Windows desktop uses them.
The text of every rss in the newsletter is going down and positioned to the left.
I tried to change to put two columns in order to avoid it, but then i'm couldn't get to change the column size and the text wrap down in mobile version.
<div style="text-align: left;">
<a href="https://contratocompraventavehiculo.co">
<img data-file-id="798535" height="60" src="https://gallery.mailchimp.com/fb081e42ac85d682d4bbec/images dd-8a84-47cd-b3e0-a23f612be.png" style="border: 0px ; width: 60px; height: 60px; float: left; margin: 0px 15px 0px 0px;" width="60" />
</a>
<span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">
<span style="font-size:16px">
<span style="color:#000000">
Become an expert
</span>
<br />
<a href="https://contratocompraventavehiculo.co" target="_blank">
<span style="color:#000000">
<strong>Discover new opportunities</strong>
</span>
</a>
</span>
</span>
</div>
In the next link you can view that the text is going down and not aligned with the first part of text: https://i.imgur.com/Pez3jGp.png
HTML code has changed a lot from how it started out 20 years ago.
At the beginning (20 years ago), we made tables. Tables for everything. These days we use <div> tags and <aside> tags - but back then, everything was in a table structure. To position things precisely, we put <tables> inside <table> cells. That is what you must still do - for emails only.:
<table>
<tr>
<td>
<table><tr><td>some data</td></tr></table>
</td>
</tr>
</table>
Also, tables in email support only limited CSS. And your CSS cannot be inside <style> tags - it must be inline, like this:
<td style="text-align:right">
Not like this:
<style>
td{text-align:right;}
</style>
References:
https://www.w3schools.com/html/html_tables.asp
https://www.sitepoint.com/how-to-code-html-email-newsletters/
https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
This is sort of a general web development question that I need some experts' advice on. This is probably quite a no brainer for some of you, but I am having trouble getting this to display properly.
I have a database table set up where each entry has 5 text fields, and one image. What I want to do is use the repeater to display the text on the left hand side of the div, and the image on the right hand side of the div (basically aligned with the center of the text).
Company Name
Description1
Description2
Description3 Image goes about here.
Description4
Description5
I have the repeater all configured properly and ready to go, it's displaying the text just fine in a well formatted way. However, I'm having trouble getting that image to display properly. Do I need to use text wrapping here to accomplish this? I'm pretty stuck and don't know where to proceed. I can post my ASP.net code here if desired.
Thank you so much in advance. Very helpful site for new programmers.
I'm assuming you can't set a fixed height on your column divs? Is so, and if you're happy to use an HTML table (many aren't) then your life will be much simpler than trying to vertically align an image inside a floated div using CSS. Try this:
<!DOCTYPE html>
<html>
<body>
<table style="width:960px; margin:auto 0;">
<tr>
<td style="width:75%;">
<asp:repeater...>
</asp:repeater>
</td>
<td style="width:25%;" valign="middle">
<asp:Image .../>
</td>
</tr>
</table>
Notice the valign="middle" attribute on the right td. Although valign is deprecated in HTML5, it still works in all modern browsers and all supported versions of IE.
NOTE: many will argue that tables aren't SEO friendly or that tables aren't intended for this, plus it's not strictly html5 compliant, so you'll need to way that up. Personally, because it just works and solves a simple problem that CSS can't without silly hacks, I'd use it without worrying too much.
If you want to have the div with the text inside to the left and the image to the right, you can use "Float: Left" to the div with the text inside and "float:right" to the div of the image. This should look like this :
<div style="float: left;"> <--- float:left
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right"> <--- float:right
<img src='...' />
</div>
And if you want to have an other div BUT not on the same line , you must add a "clear:both" to the new div :
<div style="float: left;">
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right">
<img src='...' />
</div>
<div style="clear:both"> <------ here clear both
...
</div>
Hope this will help you ! , vinc
EDIT : If you want learn more about css positioning and float you can go to W3 school, they have some nice tuto about it.
This is a CSS issue. You'll need two floated divs, something like this:
<div class="clearfix">
<div style="float:left; width:75%;">
<asp:Repeater ID="MyRepeater" runat="server" [etc] />
</div>
<div style="float:right; width:25%;">
<asp:Image ID="MyImage" runat="server" [etc] />
</div>
</div>
If you want specific examples, please see http://www.vanseodesign.com/css/vertical-centering/.
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }