I need to position this form into place on top of the image in sidebar of my blog posts page:
http://insightcxo.com/category/blog/
Right now the image and the form are in the same container but are below one another.
Your markup has several issues in it. This is what I'm seeing in the provided link:
<td align="center" valign="top">
<a href="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png">
<img class="aligncenter size-full wp-image-1035" src="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png" alt="blog form background" width="370" height="400">
</a>
<p></p>
<table class="bodyContainer webFormBodyContainer" width="100%" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF">
<!-- form is in here -->
</table>
</td>
First, you've got an <a> tag with an <img> in it, which has a height of 400px. So that's pushing your <table> (which includes your <form>) down.
What you want to do is only have that image as a background image, and not a background of an <a> tag. That way, you can nest your <form> inside the container with the background image.
Something along the lines of this:
<div style="background: url('http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png');">
<form></form>
</div>
Although a few extra pointers:
Don't use <table> tags for layout purposes. Only use them for actual data tables.
Avoid inline styles (I've done that above just to show you where the background image style should go. Instead, set a class, like .form-container, and apply your styles in a separate CSS file.
Avoid having extra markup. What's that empty <p> tag doing there?
Related
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.
I have a table (dim: 100px * 500px) with background image - 1px*10px.
I write the background code in css:
background: white url(../Images/line.png) repeat-x scroll top center;
But I want to convert it to html code in the table tag not css code,
like:
<table bgcolor="#FFF" background=".....">
How can I convert this code to HTML?
This is not good.
But :
<table background="http://yoursite/images/bg.png" width="500" height="500">
<tr>
<td>This is a test ...</td>
</tr>
</table>
<table style="background: white url(../Images/line.png) repeat-x scroll top center;">
If you want to style an element inline, just write the style attribute and the CSS properties into (like in this example).
You may need to adapt the path, if your CSS file is not located in the same place like your HTML document, and that's the first problem that occurs when you style elements inline.
It's better to do this via a CSS file, because your HTML markup becomes cleaner and it will be less expensive to make changes to your layout.
I'm trying to vertically align text and an image element inside a table cell. I am using align="absmiddle" and it works in IE, but not in Chrome.
How can I vertically align the text and image in the middle on both Chrome and IE?
Here's the code:
<tr>
<td height="17" bgcolor="#550000">
<div align="center">
<strong><font color="#000000" size="3">Text</font></strong>
<img src="Image.jpg" alt="US Image" width="30" height="15" border="0" align="absmiddle">
</div>
</td>
</tr>
Demo: http://jsfiddle.net/8xTta/
using absmiddle is not only a common HTML mistake, but is also considered bad practice when used this way, i.e. you should always separate styles from content, and use external stylesheets instead of inline styles embedded in the markup.
to solve this and achieve cross browser compatibility, replace the align:absmiddle; rule and use vertical-align: middle; instead.
here's a nice reference on vertical alignment that may be of interest to you.
I'm using tables because I need to send an html email.
any way my trouble is this: I have two images that are stacked one on top of the other. they are both links, meaning inside a tags. The problem is that there a white padding between the two images that I can't get rid of in IE8.
this is the code:
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mailto:screenings#XXXXXXX.com" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXX.com/emails/images/bottom_all.jpg" border="0" />
</a>
</td>
</tr>
</table>
the space is showing only where theres a tags (tried just images - no problem). originally the padding appears in firefox and IE8, not in chrome. after adding 'line-height' works in firefox, but IE8 still no good....
any ideas?
EDIT: actually, I found out that the problem appears not only in tables, but whenever you have img wrapped in anchors. like this:
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line- height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0" />
</a>
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0" />
</a>
Try adding
vertical-align: top;
to your img elements.
This prevents the img from trying to align with the text baseline, which will always leave space underneath for character descenders.
Try to remove the "white space" between the TAGs. open each TAG directly after closing the previous TAG:
<a href="...
><img src="...
/></a>
You should reset all margins & padding in your CSS *{margin:0;padding:0;} it will make your life much easier.
Try adding
a img {
display: block;
}
Maybe IE8 and Firefox have default margins or padding for "a" tags.
Try smth. like:
a {margin:0;padding:0;)
I've deleted all spaces between the tr tags and all their inside elements and it worked
I am working on e-mail template. Code is something like this :
<table width="702" cellpadding="0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>
</table>
I always get vertical whitespace between these two images.
I tried using valign, vspace but no luck. How to get rid of it?
You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....
img { display:block; }
.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...
img { vertical-align:top; }
http://vidasp.net/media/CSS-vertical-align.gif
BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...
Strange: This shouldn't be.
Maybe the E-Mail client interprets the line break in between the <img>s as white space.
Try setting them directly next to each other: <img src...><img src...
Your lines are high enough to accommodate text in the default font, which is higher than your 11 pixel images, hence the gap.
You need to make the lines smaller; the simplest way for your example is to shrink the font:
<td style="font-size: 1px;" align="left" valign="top">
Tested in IE 8, Firefox 3.6 and Chrome 6.