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.
Related
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.
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 am producing a personalised HTML email which has already been designed. I have coded the email with all the content placed within a table. I need to place text in three different areas in one row in a kind of scattered way. I tried placing the text into a div within the table row and styling it using inline CSS however, when i tested it on emailonacid (email testing website) it doesn't display correctly on the different email programs. Is there a way i can do this so that it works for all email programs?
I would like to position the text like so:
http://i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg
The black boxes is where the images are.
<tr>
<td>
<div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">
<div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
</td>
</tr>
You should not concentrate with fancy CSS tricks in E-mail. Email should be more about content and less about CSS positioning and gimmicks.
Having said that Email clients do support certain CSS attributes.
Click here to check which attributes are supported by different Email clients.
Also here is a tool which can allow you to see how your email will be rendered in different E-mail clients.
So my advice is instead of trying to hack your way into getting your content displayed , focus more on what the end user will see rather than how he see's it.
Instead of using CSS, you can also add the another table in the row to adjust the text position. This way you can manage the text position easily.
Set the border of the table to zero (<table border="0">) to make it invisible if necessary.
I am fairly new to creating HTML emails but I have found that not all CSS code really works across all email clients so it is better to stick with as much HTML as possible.
One way you could accomplish this is a table with two columns. In the left column you have text 1 and 3 then in the right column you have text 2. In order to create the spacing, you will need to include empty "cells" that give the spacing.
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="290">
<table align="center">
<tr>
<td>
<h1>Text 1</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
<tr>
<td>
<h1>Text 2</h1>
</td>
</tr>
</table>
</td>
<td width="20">
</td>
<td width="290">
<table align="center">
<tr>
<td height="20">
</td>
</tr>
<tr>
<td height="20">
<h1>Text 2</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should give you a solid base to work with and all email clients will render tables properly.
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax