The code below should make the navigation panel centered and fixed. However, it does not meet the "centered" criteria, only fixed.
Any ideas what I have done wrong ?
<tr style="position:fixed">
<td class="bgnavigator" "align="center" height="40" valign="top">
<table align="center" ><tr><td>{NAVIGATOR}</td></tr></table>
</td>
</tr>`
If you you want to center table just add this CSS to the root table element:
margin-left: auto
margin-right: auto
Furthermore you shouldn't use deprecated inline css-attributes like align, valign. It's deprecated. Use CSS only styles.
Here you are: http://jsfiddle.net/mVzsY/
Related
Is there an alternative to negative positioning in HTML emails? The image in the second table below is positioned 100px up using negative positioning. I need that image to overlap somewhat with the content above.
<table>
<tr>
<td valign="top" width="400" style="padding-right:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem Impsum</p>
</td>
<td><img src="kneeler.jpg" /></td>
</tr>
</table>
<table>
<tr>
<td style="position:relative; top:-100px;"><img src="shoes.jpg" /></td>
<td valign="top" width="400" style="padding-left:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem ipsum</p>
</td>
</tr>
</table>
I've tried padding-top: -100px; but that did not work. Please help!
You can do this by wrapping the element above in a div and setting the height of the wrapper to be less than the actual height of the element. (for example, height:200px if the element is naturally 300px and you want 100px of overlap) The element will overflow the wrapper, but the next element will start where the wrapper ends.
See answer here:How to position an element on top of another element without using position and margin?
And the example:
https://jsfiddle.net/acq3ob6y/1/
Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.
The only way to accomplish an image overlapping the container is to fake it. See this similar question for an example
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'm trying to create an e-mail newsletter in HTML. The layout has a fixed-width (600px) center. If the viewport is larger than 600px in width, there should be some decoration images on the left and the right. These images should be 'glued' to the viewport's edges:
As you can see, when the viewport scales, the fixed-width (blue) content stays centered, but the (red) images on the left and on the right are moving with the viewport's edges.
If the viewport gets too narrow, the (red) images should become fixed such that they don't overlap the (blue) center content.
To accomplish this, I'm using <div>s with auto margins for the (red) images, for example: margin:0 auto 0 0.
This works well, except that on small devices like the iPhone, I want the e-mail client to just show the (blue) centered content:
But the <div>s with the (red) images on the side influence the content width, so the e-mail clients show them too.
How can I achieve this? Using Javascript and/or CSS media queries is not an option, since most e-mail clients strip CSS and JS from the e-mail HTML.
You should use tables.
You'll need 3 tables for that.
First, the good old centering table:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
Then, another centering table of 3 columns in percents:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle">YOUR LEFT CONTENT HERE</td>
<td width="70%" align="center"> YOUR MAIN CONTENT TABLE HERE </td>
<td width="15%" align="right" valign="middle">YOUR RIGHT CONTENT HERE</td>
And, in the middle TD of the previous center, you can put your 600px wide main content table.
This might need some styling tweaks with floats and block elements aligns, but the basic structure is there.
*Table 2 is nested in table 1's main TD cell.
For mobile mail clients, just put a class on the two LEFT and RIGHT tds, then have them display:none; in your media query. Since the content will be nested inside those, it will inherit the display none and your 3 columns table will effectively become a single column one.
This is not possible without media queries. There is no way to get the left and right columns to pop or hide on resize. Even if you used a float/align technique, it would just pop the right side only (then center with the left above).
I would suggest a fluid table with a max width div to keep your main content at 600px.
<style>
#media only screen and (min-device-width: 600px) { /* don't over stretch */
.main {
width:600px !important;
}
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="15%" align="left">left
</td>
<td width="70%" align="center">
<div class="main" style="max-width:600px !important;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
center
</td>
</tr>
</table>
</div>
</td>
<td width="15%" align="right">right
</td>
</tr>
</table>
What about a table where the middle cell has a fixed width and the other two cells have a) either a background image aligned to either side, or b) have an image with overflow:hidden on the cells?
Here's a more minimal solution to what you want to achieve.
For the red elements, you can continue to set their positions with margin: 0 auto 0 0... etc, but include this CSS:
width: 0;
overflow: visible;
z-index: 1;
This way, the red elements won't "clash" with the blue <div> when they "meet".
For the blue <div>, declare a higher z-index:
z-index: 2;
Because the z-index of the blue is higher than the red, the red elements will hide underneath the blue element when they "overlap".
Note: gmail does not yet support z-index (source), but you could look into creating the same effect through default stacking.
Side notes:
It REALLY does not have to get as complex as using tables. Read: Why not use tables for layout in HTML?
I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.
When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,
<div align="center" style="width:510px;height:510px;margin-left:300px">
<table style="width:510px;height:510px">
<tr>
<td align="center" valign="middle">
<img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/>
</td>
</tr>
</table>
</div>
But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?
You shouldn't be using <div align="center"> either really, its been deprecated:
http://reference.sitepoint.com/html/div/align
This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.
I'm not certain on the best way of vertically aligning div's (although you may find this article worth reading), but I know that you are right, you shouldn't use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.
This will help you i think so:
just give #to div. and then style it in CSS as follow:
position: absolute;
left: 50%;
right: 50%;
width: _px;
height: _px;
margin: half of the width, half of the height;
Try this. May help you.
<div style="width:510px;height:510px;border:1px solid;margin:auto;">
<table style="width:100%; height:100%;">
<tr>
<td align="center">
<img id="main" src="wp1.JPG" style="max-width:300px;max-height:300px;"/>
</td>
</tr>
</table>
</div>
When you create a basic HTML table everything seems to stay in center of the table. I don't want this how can i stop this from happening?
I wish to use a 2 column html table one for column for a sidebar one for content. Because i have so much content the sidebar text (which is little) gos to the middle of column.
How do i align the text to stay to the top left of the columns?
In the <td> element that contains the lefthand sidebar, try specifying a style that aligns text to the top:
<td style="vertical-align: top">(Sidebar HTML code here)</td>
You can control the alignment of columns directly in your markup by using:
<td style="text-align: left; vertical-align: top;"></td>
or even just
<td align="left"></td>
This will work fine for a 2-column table, but Piccolomomo has the better plan if you are going to use it a lot. This might help you further if you need it:
http://www.w3schools.com/html/html_tables.asp
You can use CSS to change text aligning inside your table:
td {
text-align: left;
vertical-align: top;
}
For aligning text in table you have to use css.Without css or any style sheet you can't make them align.So you can use inline css or external css for that.
<style type="text/css">
table td{
text-align:left;
vertical-align:top;
}
</style>
<table>
<tr valign="top">
<td align="left">
Side Bar
</td>
<td>
Content
</td>
</tr>
</table>