I have a discussion with a friend here, an example can be seen. Does the container have a width on 500px or 580px? By the content we mean from the sides of the banner picture, and a straight line all the way throughout the text.
We looked in the inspect window, but we cannot find where the width should be.
The site is made in tables, because the setup is for email newsletters.
An example where the width is set is in the html:
<!-- Top Picture Start -->
<table class="row background-color__blue">
<tr>
<td class="center img-position" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<a class="remove-banner-space" href="http://google.dk"><img width="580" height="300" src="http://d21vu35cjx7sd4.cloudfront.net/dims3/MMAH/crop/586x293%2B0%2B95/resize/580x290%5E/quality/90/?url=http%3A%2F%2Fs3.amazonaws.com%2Fassets.prod.vetstreet.com%2F4a%2Ff0%2Fc29d3f434ae6abd19f5433140124%2Fborder-collie-AP-XO4EXW-590sm52314.jpg" alt="Test" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->
In the CSS it should also be set to 580px:
table.container {
background: #fefefe;
width: 580px;
margin: 0 auto;
Margin: 0 auto;
text-align: inherit;
}
In the browser tools/inspector (at least in Firefox) there is (among others) a tab called "calculated" (not sure about the exact English term since in my case it's in another language). This shows you the calculated (i.e. actual) width, with everything that's added up to it: margin, border, padding, inner width - a good representation of the CSS box model.
Related
We're trying to make an HTML newsletter with an image background of a scroll (something like http://images.clipartpanda.com/blank-scroll-clip-art-ancient-parchment-scroll-Download-Royalty-free-Vector-File-EPS-2942.jpg), and would like to have the ability to place text in specific areas of it. Ideally, we'd like to be able to easily place text in the top area (the rolled up section), in the middle, or at the bottom (again, in the rolled up section).
What's the best way to do this? We were experimenting with using the image as a background to a table, and using table cells to try to line up with the image areas, but struggled to get this to work.
Should we be trying to split the image into three separate images (top, middle, bottom) and using these as backgrounds for a table with three rows, or is that likely to not work well?
Apologies for our ignorance. Our HTML skills aren't really there; we just want a simple layout that we can use for newsletters.
EDIT: Here's what we're currently trying:
<html>
<head>
</head>
<body>
<table style="height: 600px; width: 600px; background-image: url(http://cliparts.co/cliparts/qiB/orL/qiBorL8gT.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box">
<tbody>
<tr>
<td class="">
<table style="height: 500px; width: 400px; margin: auto;">
<tbody>
<tr style="height: 100px;">
<td>This is some text in the top area</td>
</tr>
<tr style="height: 400px;">
<td>This is the main text</td>
</tr>
<tr style="height: 100px;">
<td>This is some text in the bottom area</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
I appreciate that this might be the wrong approach these days, though; what would be a better approach? Is this really outdated now?
I need a 3 column layout in HTML/CSS, but different from anything I can find on here.
What I'm really struggling to achieve:
3 Col table with a fixed width of 740px:
A fluid left column (this should expand/contract with whatever space is left)
A fixed width middle column (130px)
Auto-width right column (which is only as wide as the content, must not wrap text)
Is this even do-able? I've seen exmples of this with a fluid left, fixed right but i didn't know how to then add a 3rd auto-width column
Been driving me nuts for ages!
Added complication: Any CSS style needs to be inline, this is for an HTML email!
Thanks folks.
First of all please see the Help Center article on creating a Minimal, Complete, and Verifiable example. You should be trying out your own solution before posting here for help.
To get you started I created a quick codepen example of what you're looking for. The left section will use whatever space is available. The middle section will always be 130px and the right section will fit the width of whatever content you have. Let me know if you have any questions.
HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td class="middle">
middle
</td>
<td class="right">
right - this will fit to your content
</td>
</tr>
</table>
CSS
.middle {
width: 130px;
}
.right {
width: 1%;
}
Edit:
I just saw your note on making the CSS inline. You would just add the relevant CSS to style tags within the HTML instead of having an external style sheet.
New HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td style="width: 130px;">
middle
</td>
<td style="width: 1%;">
right - this will fit to your content
</td>
</tr>
</table>
Okay i can't beleive i wasted hours trying to get this work, yet I randomly tried this and it DID work!
<table style="width:100%; max-width:740px;" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
https://jsfiddle.net/Murdo/5fn1z3g5/
Not sure that setting width to 100% and then limiting it to a max of 740 is the best way...
Or I could put a DIV with a width of 740 and then set the table to 100% width inside the div...
<div style="width:740">
<table style="width:100%" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
</div>
UPDATE: This works great in browser.. sadly, outlook does not like DIV width, any max-width or min width either. Back to drawing board!
you can do it easly with CSS flex model.
HTML
<div class="Container">
<div>COL 1
Im taking all the rest
</div>
<div>COL 2</div>
<div>
COL 3
I'm taking excatly what i need
</div>
</div>
CSS
.Container
{
width: 740px;
height: 300px;
display: flex;
background-color: green;
}
.Container div:first-child
{
background-color: red;
flex: 1 0 auto;
}
.Container div:nth-child(2)
{
background-color: yellow;
flex: 0 0 130px;
}
.Container div:nth-child(3)
{
background-color: blue;
flex: 0 0 auto;
}
and here with Inline style (for your mail)
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
I'm developing an email and would like an image to show up only on a mobile device.... So I created an empty <td> with a span inside, and styled the span to have a background image.
The problem is, I'd like the image to take up a whole row, instead of being right next to the headline. I tried clear:both and display:block but I'm not sure why it's not working. I also tried setting the width to 100% but that just throws everything off... any suggestions?
http://jsfiddle.net/pEDSn/
.test {
width: 41px;
height: 41px;
background-image: url('http://placehold.it/41x41');
background-repeat: no-repeat;
background-size: 41px 41px;
display: block;
clear: both !important;
}
because of the arrangement of 3 in your single row, the table layout is enforced over the and css.
I would suggest moving your h1 into a separate row.
<tr>
<td> <!-- first td you are using as a spacer --> </td>
<td> <span><!-- this is where your image is --></span> </td>
<td> <!-- last column is here --> </td>
</tr>
<tr>
<td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>
I added an empty row with the class "test" and it worked... check it out:
<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">
<td align="left" valign="top">
<h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
</td>
</tr>
<tr>
<td height="25" class="marginResize">
<!-- spacer -->
</td>
</tr>
http://jsfiddle.net/pEDSn/2/
Using a background-image in this technique is not supported across major email clients. You should inline the tag for all the clients that do not support css in the style tag. Also, background-image does not work in Outlook, unless it is in the <body> tag.
If you want it to show the image only on mobile, you'd be better off using a normal image tag and hiding it with display:none;, then in a media query, overriding to display:block;. This would still not work for the inline-only clients like Gmail, but it is the better way to do it.
my website layout uses a table like this.
<table>
<tr>
<td align="left" valign="top" rowspan="2" style="padding-right:41px;">
</td>
<td align="left" valign="top" width="440px">
</td>
</tr>
<tr>
<td align="left" valign="top" width="440px">
</td>
</tr>
</table>
a nav bar on the left which takes up two rows and two columns.
How can I translate this to CSS? how do i handle rowspan?
I've read that using a table will slow down rendering the page, because the browser has to render all columns first before it can render the table. so if one column contains 1000 nested divs the other columns have to wait to render. Is this true?
I think you want something like this:
CSS:
div#navBar {
float: left;
padding-right: 41px;
}
div.nonHeader {
width: 440px;
}
HTML:
<div id="navBar"></div>
<div id="header" class="nonHeader"></div>
<div id="bodyText" class="nonHeader"></div>
That forces the navbar to the left of the header and body text divs, which are fixed-width.
I do wonder if you don't want the navBar div to be fixed-width and the other two flexible, however.