I am making a newsletter with foundation. I need to get my background to go to full width, but at the moment the full width is defined in center:
My Example
How can I make the background color go full width? Foundation has made a prewritten CSS, where the width should be defined:
.wrapper {
width: 100%; }
#outlook a {
padding: 0; }
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
.bgcolor {
background-color: #fff;
}
.bgcolor--blue {
background-color: #ccd8db;
}
.bgcolor--content--light {
background-color: #ebe4cf;
}
.bgcolor--footer {
background-color: #e8e8e8;
}
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container" align="center">
<tbody>
<tr>
<td>
<!-- Row 1 -->
<table class="row collapse" border="1px solid red">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<center>
<img src="http://bbacher.weebly.com/uploads/8/4/6/2/8462405/6449752.jpg" alt="Logo" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<center>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Table have padding and cellspacing by default. You'll need to manually remove these in order for your content to take up the full width and height of the element.
You'll need to do this on every table tag.
<table cellpadding="0" cellspacing="0">
https://jsfiddle.net/wb9qg34e/
With regards to the table not being responsive. You have set static widths to the table and there is a class pulling through that has a min width on
td.large-12 center, th.large-12 center {
min-width: 532px;
}
If you remove the width from the table.container and add a new class like below, it should be fully responsive.
td.large-12 center, th.large-12 center {
min-width: auto;
}
Related
I have a little problem:
I have one table per row with different columns, and I need to have the first and the second column with the same width percentage so I have used inline-block inside td elements. My problem is that when I don't put text inside td the border of the cell renders differently than a td with text.
What can I do?
I have found that putting: inside, the td works fine, but I don't like this solution.
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
text-align: left;
padding: 1px;
}
<div style="width:100%">
<tr>
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
</tr>
<tr>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
for td tag in css use min-height attribute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
min-height: 20px;
text-align: left;
padding: 1px;
}
</style>
</head>
<body>
<div style="width:100%">
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
</body>
</html>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
Trying to create a nice html email with a border around the content, but haven't figure that out.....there is always something..... Thanks for a help!
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
like this???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Email</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ACD13C">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can wrap your table in a div, make it's background that green and width:100%, change the background of your table to white and its width to 500, the margin:0 auto will center the table, like this:
JS Fiddle- updated
<div style="width:100%; background-color:#ACD13C; padding:50px 0; ">
<table style="margin:0 auto;" bgcolor="white" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</div>
Something like that?
td {
border: 1px solid black;
}
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
do u want to see like this??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Email</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ffffff">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
As the title says I am having the issue of no scroll bar showing up on my web page. I have viewed similar questions to this one on stack overflow and I don't have some of the other common issues such as overflow: hidden. I thought it was a problem with bootstrap but I commented out all off the links to bootstrap CSS and I still dont get a scroll bar. I also added overflow: scroll to my CSS file and while a scroll bar showed up it still didnt work. My code is below and any help would be greatly appreciated.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
`<title>Cosmic Bowling!!!</title>`
<!-- Bootstrap -->
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/homepage.css" rel="stylesheet">
</head>
<body>
<div id="banner"></div>
<table class="score-table" id="table1">
<thead>
<th>FR</th>
<th>RD</th>
<th>SCORE</th>
</thead>
<tbody>
<tr>
<td class="_frameCol">1</td>
<td class="_roundCol">
<div class="big_div">
<div class="_roll">
<p>cat</p>
</div>
<div class="_roll">
<p>cat</p>
</div>
</div>
</td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">2</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">3</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">4</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">5</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">6</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">7</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">8</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">9</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">10</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
</tbody>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</body>
</html>
and the CSS file
body
{
background-image: url("images/stardust.png");
}
th
{
padding: 10px;
text-align: center;
}
#banner
{
/*position:fixed;*/
background-image: url("images/bowling_banner.jpg");
background-position: center;
width: 100%;
height: 10%;
}
#table1
{
/*positioning*/
position: fixed;
top: 50%;
}
.score-table,th,tr,td
{
border: 1px solid white;
border-width: 2px;
color: white;
}
._frameCol
{
text-align: center;
}
._roundCol
{
height: 50px;
width: 90px;
}
._scoreCol
{
width: 10px;
}
._roll
{
display: inline-block;
background-color: yellow;
position: relative;
}
.big_div
{
height: 100%;
background-color: red;
}
Sorry for the delay, here is the fiddle
http://jsfiddle.net/ryyanj/us9undLf/
Assuming you're referring to the table going off the bottom of the page...
This is because of the #table1 CSS (in css/homepage.css), more specifically position:fixed
position:fixed is makes your element "float" - it is positioned relative to the browser window rather than the content. Because of this is won't expand the content so as to create scroll bars, even if it did you would be scrolling the content, not the window.
Since you didn't mention why the table was fixed I can only assume it's to space it 50% down the page, in which case your problem can be rectified by switching:
position:fixed to position:absolute
The CSS for #table1 would then be:
#table1
{
/*positioning*/
position: absolute;
top: 50%;
}
I'm trying to make an html mail so I need to use inline CSS. The problem is that I can't figure out why the cell height I set doesn't display as I intended. I've set the % height of the cells like I would them to be, but the result isn't as I expected.
The code is this and as you can see the result is not like I intended because I've set 15% for the header but in the result is obviously not 15% and no matter the value it does not change the result. The same thing happens with the other td:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<title></title>
</head>
<body>
<table style="table-layout:fixed; width:56%; height:100%;" border="1" bordercolor=black align=center>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<a href="http://www/">
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/> </a>
</th>
</tr>
<tr>
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td style="border-left-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>
<tr>
<td colspan="2" style="height:60%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>
I hope you can help me.
To have the image to stretch to the same height and width as the containing boxes, simply add a 100% width and a height equal to the row it is in:
http://jsfiddle.net/j2bcc24o/4/
If you just want the width, go for:
http://jsfiddle.net/j2bcc24o/3/
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;">
<img src="image.png" width="100%" height="10%" alt="Patrik" />
</td>
And also don't forget to set html and body to 100% height and width as well as 0 padding and margin:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
i am not able to understand your problem properly,
assign class to td and set the height
<td class="classname">
</td>
.className{
height:20%;
background:red;
}
Try the below code
let me know if you need any help.
<html>
<head>
<style>
html,body{
height:100%;
margin:0 auto;
}
table{
table-layout:fixed;
width:56%;
height:100%;
border:1px solid #000;
text-align:center;
margin:0 auto;
}
table th{
height:15%;
width:100%;
}
.className{
height:20%;
background:red;
}
td{
height:50%;
border:1px solid #000;
background:#000;
width:100%;
}
</style>
</head>
<body>
<table >
<tr>
<th colspan="2" >
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/>
</th>
</tr>
<tr>
<td >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>
<tr>
<td colspan="2" class="className" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>
Defining height in percentage will not work with td/div, specially for the mailers, need to assign pixel values only.