I've got a site that I am working on that has greebles on the top left, top right, bottom left and bottom right corners. The full width of this is roughly 1100px. The actual content area is within the 960px layout.
I want the site to be properly centered right down to 960px, with the extra imagery disappearing out the right and left, but not causing any horizontal scrolling provided it is over 960px.
All four images are seperate files (can't really join them) and there is already a background image. Did I mention that they are added through CSS, rather than as in-file images?
Thanks!
Edit: This really has to work in IE6. Not my choice :(
You can use overflow: hidden in the CSS for your body tag (or whatever container tag you have your main content in) to prevent scrollbars. Some browsers allow you to constrain that just to horizontal or vertical content (-ms-overflow-x and overflow-x in your case, because you're dealing with the horizontal overflow; there are corresponding y styles). I think these are / are going to be part of CSS3, according to this link.
I'm sorry folks, but the only way I can see this working including IEs 6 and 7 is using tables.
Working example: Here
The "Greeble" text (I don't really know what a greeble is :) distorts the resizing somewhat, that'll disappear when the columns have background images only.
Issues: The columns need to contain something to be rendered by IE. The I built in will prevent the complete disappearance of the right and left columns. You will have to find a way around that, maybe with a 1x1 Pixel image or something. You will always have to have some content - even if just 1 pixel wide - in all columns.
Relies on: Tables with an unspecified width rendering the way they do. I think this is pretty reliable, tough.
Tested in: IE 5.5 and greater, Firefox
To anybody who dares downvote this because tables are evil: Find me a better, CSS-based solution that works in IE6 as well, and I will gladly remove mine.
HTML: No separation between markup and CSS, no semantics, just the working prototype.
<body style="margin: 0px">
<table style="width: 100%; height: 100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td style="background-color: orange; height: 50%; color: white">
Greeble top left
</td>
<!-- The content area -->
<td style="width: 960px" rowspan="2">
<!-- This is important, serves as min-width replacement. -->
<div style="width: 960px; text-align: center">
I will always be 960 pixels wide
</div>
</td>
<td style="background-color: blue; color: white">
Greeble top right
</td>
</tr>
<tr>
<td style="background-color: blue; height: 50%; color: white">
Greeble bottom left
</td>
<td style="background-color: green; height: 50%; color: white">
Greeble bottom right
</td>
</tr>
</table>
</body>
I think I've worked out a ludicrously simple way of doing it: Add an empty div for each corner element, position it relatively and then give it a negative (or high positive for the rhs) margin - seems to work in IE 6 too.
Thanks for all the ideas though.
Not sure if you solved this, but I think it is possible using background images. If you layer the images on top of one another, without specifying a width for their containing divs, you should be able to pull it off. Here's the basics:
<body style="background: url(body-bg.png);">
<div style="background: url(greeble1.png);"></div>
<div style="background: url(greeble2.png);"></div>
<div style="background: url(greeble3.png);"></div>
<div style="background: url(greeble4.png);"></div>
<div class="wrapper" style="width: 960px;">
<p>Main Content Area</p>
</div>
</body
I think you'd need to use a bit of JS to position each of the greeble background images depending on the size of the image and the viewport, but it should be possible.
Related
I am trying to put text over an image. Something like this (i have changed the background image for propriety reasons)
The tool/app i am working with has following limitations -
Using negative margins don't work
Using position:absolute and position:relative don't work
fancy stuff like grid and flexbox also dont work
I know i know. You all are thinking "what the heck is it?". But if any one of you used salesforce visualforce email templates, you will know what i am talking about.
So i need to implement it without them. I want the image to retain its aspect ratio as i compress and expand browser window.
When i use background image html tag, i notice that background image does not maintain it's aspect ratio. In full screen mode, it stretches horizontally (actual image i am using has drawing of animated characters in it, which visible look horizontally stretched out)
<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">
But when i use an img tag, image fits the full screen nicely, and maintains its aspect ratio when i change browser window size
<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">
So i figured i need to come up with a solution without using background image (or negative margin or position:relative) and somehow get text on it.
I read a post where a guy suggested a hack using tables -
How to put text over an image without absolute positioning or setting the image as backbround
It seems to work to an extend. I need help fixing it. Here is the final code i have-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<table>
<tr>
<td></td>
<td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
</tr>
<tr>
<td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
</tr>
</table>
</div>
</body>
</html>
Issue i am facing is if i compress browser window too much, the text float above the blue image, as shown below
Any help would be appreciated. Both text and image are part of table. Is there a way to make sure they stay within table boundaries, so they stay overlapped?
You need to align the image on the top in <td> element, because its default is middle. That is why it is being aligned that way and giving space above and below.
So, add vertical-align: top to <td> element.
td {
vertical-align: top;
}
How to divide the html page to fill up all the window with a top panel with the minimal height necessary, a left panel and a right panel with a fixed width?
I tried as follows, but the right panel takes more than 100px. It works if I remove the top header. Also, using height: 100% is not correct, as the top header takes some space also.
<table border="1" style="width: 100vw; height: 100vh">
<tr><td colspan="2" style="width: 100%">top</td></tr>
<tr>
<td style="height: 100%">left</td>
<td style="width: 100px; height: 100%">right</td>
</tr>
</table>
If you are determined to use a table to perform your layout, the following may help with your specific issue.
At the moment, you are specifying that the top row should take 100% of the available width. In this case, it will take the available page width, not the width of the table.
To rectify, simply remove the width: 100% on the top row and allow the row below to define the width of the table based on the settings on the left and right columns:
<table border="1" style="width: 100vw; height: 100vh">
<tr><td colspan="2">top</td></tr>
<tr>
<td style="height: 100%">left</td>
<td style="width: 100px; height: 100%">right</td>
</tr>
</table>
However, now the left column will automatically take the available width, which will also cause your top row to expand automatically. The right column will now be the fixed 100px you requested.
A note on laying out content
Modern HTML5 and CSS3 bring a plethora of powerful layout methods for content. I strongly encourage you to investigate these for laying out a web-page as opposed to relying on tables.
Although tables are sometimes necessary (I'm thinking laying out emails for older-Outlook versions), most of the time you can rely on modern techniques to achieve the same.
A Google of HTML5 CSS3 layouts will provide a plethora of useful content, but a starting point could be W3 Schools which have a good basic introduction.
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding.
https://www.campaignmonitor.com/css/box-model/padding/
The way to fix this is simple and it will work with every email client:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftsidespacer" width="30"></td>
<td class="maincontent" width="140">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer" width="30"></td>
</tr>
</tbody>
</table>
</body>
</html>
I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly.
Edit: Base table in Outlook 2007
This is the base table in Outlook 2007 with no extra css that I posted above:
This image came out of Litmus.
I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue.
Good luck.
Here is something you can try.
Code:
<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
<tr>
<td height="200"></td>
<td valign="top" style="color:#ffffff;">
All content here
</td>
</tr>
</table>
Result in Outlook version 1803 (tested: 20/04/2018)
What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is.
Note: You can make do without the left column if you wish but do add the height
Hope this is the answer you were looking for.
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've searched and searched and tried different techniques with nothing that works.
I have 3 columns, and in the left and right columns I have an image that needs to be vertically aligned to the center as well as horizontally to the center. However, my middle content div stretches down a bit. So I would like my 2 columns to match the height. These 3 columns are wrapped in another div.
Any ideas?
in your case it's better to use table instead of div because any change in some cell inside certain row will effect the other cells.. try this code it may do the job
<div style="border:1px black solid; width:850px; margin:auto">
<table style="border:1px red solid; width:100%; height:500px; text-align:center" cellspacing="0">
<tr>
<td style="border:1px lime solid">1</td>
<td style="border:1px lime solid">2</td>
<td style="border:1px lime solid">3</td>
</tr>
</table>
</div>
I'm not sure wat you mean by "100% of the height", that shouldn't matter, but I would just play around with the css "margin" attribute, and assign percentages (not pixels) to it based on the parent size. It may not be what you're looking for, but it's saved my butt on sites before, and it's probably the easiest way.
Add this to your css:
margin: auto;
padding: auto