www.SportsAntiques.com
When I look at my home page on my laptop or android it looks fine. But when I look at it on large monitor it's all skewed to the left. Can someone take a look at my source code and tell me where the problem is.My site above. I built the site with FrontPage 2000 and have shared borders if that makes any difference. thanks so much
In the HTML, there are two <div> elements with the id="fb-root" that have style of width: 987:
<td valign="top" width="24"></td>
<td valign="top">
<div id="fb-root" style="width: 987; height: 48274">
<div id="fb-root" style="width: 987; height: 58405">
<p align="center" style="margin-top: 0; margin-bottom: 0">
For large screens, that width constrains the width of the center column. Remove tbose constraints and the column will expand to fill the large screen.
Related
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.
Okay so I've bought a theme for mailchimp and need to modify it slightly for my own personal use. The html is written in tables.
What i am aiming for, is the background image in the header of the page (top table), to resize when the browser shrinks down to mobile size.
So far i have been able to achieve the shrinking of the image (through the use of setting width to 100% and not setting a height), although, when the browser is shrunk down to mobile size, the purple body behind the image overflows underneath the image (like this http://i.imgur.com/DfLv29v.png), when do not want to see any background at all. Along with this, on shrinking, I am trying to get the title, text, and read more button to scale down with the image, and have the logo and all top links hidden.
I have tried playing around with max-height and max-width, setting overflow to hidden, and trying to re-do the whole thing using a div container instead of a table, but it got way too complicated. I have no knowledge of javascript or jquery so a html/css solution is preferred.
Here is the code for the main section that i'm trying to shrink -
<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" class="container800">
<tr>
<td align="center" style="background-image: url(http://pickedmail.com/mira/img/main-bg.png); background-size: 100%; background-position: top center; background-repeat: repeat;" background="http://pickedmail.com/mira/img/main-bg.png">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bodybg_color">
<tr><td height="30" style="font-size: 30px; line-height: 30px;"> </td></tr>
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td height="5" style="font-size: 5px; line-height: 5px;"> </td></tr>
<tr>
here is the full thing in jsfiddle - https://jsfiddle.net/jackgenesin/2zzkrqzf/
Any help appreciated, feel free to tell me its way too complicated to do purely in html/css haha, thanks
The purple body has nothing to do with the image. That's coming from the bgcolor="8a5a8d"in the first <table> tag in your fiddle. You could eliminate that and the color would go away.
With the code you've posted, you've got explicit pixel widths declared in the first two <table> tags. This tells a browser that these shouldn't be resized. You need to use a relative dimension (e.g. 100%) to make this work. Better still add this css: `style="max-width=800px;" so the table doesn't get too big on desktops.
Since you've got nested tables to make this layout (something that still is required for many email clients), to really stop the header image from spilling over into the message body, you'd have to create two sets of nested tables one after the other. If that's too much work, change the background-size: parameter to cover. That will stretch the image to fill the background, cropping edges if needed to make everything fit.
Finally, to really achieve everything you want, with the auto-hiding logos and shrinking menus, you need to make your template responsive. Take a look at the free mailchimp templates for code you might be able to reuse for this.
And you will have to do all this in HTML/CSS, since you can't rely on an email client allowing javascript.
How can I achieve the following effect without the use of a table?
Example:
http://enstar.nl/example.php (The example may not be visible at the moment, the nameservers should have been changed, but my hosting isn't that fast in updating them. Should be working later today. I apologize for the inconvenience)
All methods require a header and/or a footer. I don't want that.
What I want is the following:
Pure CSS, no tables
2 columns, fixed fluid (in that order)
if the content hasn't reach the bottom of the viewport, than extend the columns to it. Else extent to the content (so like a sticky footer)
A table at 100%x100% does this naturally. But I really don't want to use a table for this.
Any ideas?
EDIT:
Current HTML
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="navigation" valign="top" align="left">
</td>
<td id="content" valign="top" align="left">
</td>
</tr>
</table>
to set a two column there are a couple of options if you don't want to use tables
<div id="wrapper" style="height: 100%;">
<div style="background-color: green;">
<div id="leftCol" style="float: left; width: 200px;">testing</div>
<div style="background-color: red; margin-left: 200px;">
<div id="rightCol" style="height: 900px;" >testing testing testing testing testing testing testing</div>
</div>
<div class="clear"></div>
</div>
</div>
As long as the text inside the rightCol is longer than that in the left col (which can be handled by a min-height on the element) then you shouldn't have any problems with it scaling.
This also nullifies the need for the Javascript to set the second width. The reason is it is set to the width of the parent div which by default is 100% since you margin the red column left 200px it slides the display section over so you can see your left column.
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.