I want to align this image in this way. I am making an HTML email signature. I know I can do this with margin negative or position relative but I am using the table and their child tags here and I don't want to use margin padding position properties as these properties do not support by many email platforms like outlook.
So, all I need is to align the image in this way by using table tags and their properties.
Thanks.
Not possible as individual elements.
You're relying on a background image plus margin or padding to push the image down into place. This isn't just html email you're building that will be received once, you're building html that is effectively being forwarded and code will be stripped depending on the system you import the signature into as well as any email client cleansing the signature when receiving the signature.
Your only option is to have the white/yellow background, photo and text on the pink tab as one image.
Related
I am trying to create a responsive horizontal layout for an email sign-up form which should look like the image below (image taken at browser width 1024px):
The problem I keep having is that the input button keeps overlapping with the location select field on browser resizing, and the dimensions of the email address input field cannot be modified at all.
I have tried a number of things including setting the widths of the elements individually as percentages and setting to display:inline-block.
I've also tried setting the parent elements to display:table and the child elements to display: table-cell, but this hasn't worked either.
As I am working on top of quite a few layers of legacy code this has proven to be exceptionally difficult - divs nested several levels down and numerous higher level "clearfix" divs. I am not sure how far the latter is influencing things.
Unfortunately the html markup is rather dense in the js fiddle I've created, but I wanted to show as much as possible of the relevant area as shown in Chrome inspector.
I have grabbed the most relevant html markup and css using a chrome plugin and imported in js fiddle: here
The js fiddle represents my latest attempt (of many) using the table display properties for the layout - as in the original shown in the image which I cannot recreate.
I have the following
image as a powerpoint flow chart (text with hyperlinks not shown).
I want to turn this chart into an html-website.
Any ideas how to get a good result for this task?
I think recreating this with coding in html is troublesome.
Thank you.
Text on gray backgrounds (5 on right, 2 on left) are probably headings of the same level so they would be hN floating on the right and coming before each set of arrows.
Each individual set of arrows can be fairly easily coded as lists and styled as these breadcrumbs:
Simple scalable CSS based breadcrumbs (by Veerle Pieters)
Breadcrumb Navigation with CSS Triangles (by Chris Coyer)
They can expand with content if it seldomly occupies 2 lines (Firefox/Ubuntu and Safari/Mac have laaarge fonts, don't assume that your text will always stay on 1 line. Not speaking of zoom text that should be taken into account)
As for orange arrows between individual series ... that's complicated enough without HTML so it depends of context I believe. Is this an industrial process, webmarketing or else? To make it accessible, I'd use HTML images with alternative text trying to describe relationship.
Red arrows could be anchor links, probably.
I Think this image can be optimized pretty good, as it doesn't have a very complicated graphic. Therefore an easy solution can be just including it as an background image and then you can set the text and links into place using css.
A better solution is to break the picture into smaller components, then this way you can define "div" s with the background-color, border, and border-radios as the gray parts, and set the white elements as the background-image of "a" tag... However for the arrows I think you should include them as background-image...
Hope this helped...
I want a widget that is roughly square, the same height as the 16x16 pixel .ico widgets on Widget Row (or whatever the technical term is for that row of widgets at the bottom of the Firefox window) containing a single letter of text, centered horizontally and "middled" vertically, with control through add-on code of text and background color. Can this be HTML coded as the content property of the widget object? I've gotten the colors with a style attribute of a span around the letter, but no luck so far getting the "box properties" to kick in.
not sure what you are trying get but you can do create that with the style attribute very easily. http://jsfiddle.net/k9brL/
I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.
I'm sending some HTML formatted mails where I'm showing property images with their current statuses. There are some triangular status images overlapping to main property images which are getting distorted as MARGIN style property is not allowed in Gmail. Style properties like PADDING and POSITION are also not working. This mail is formatted in table based HTML.
I just want to place status tag images on to right bottom corner of the property images. Kindly help with some alternate solutions.
You can't overlap foreground images, and you can't use multiple background images.
What you can do is use background images, with foreground images overlapping them.
The other alternative is to use one image, and replace the image on the back end as the status changes. If this happens a lot, you could generate them dynamically.