I am trying to get my images in my table datas to line up across the table, but when there is multi line h5 I am struggling to figure out how to get them to line up. Its almost as if the text is like linked to the image and h6 in a way.
Here is the code http://codepen.io/anon/pen/XbpzJa
td img {
width: 25px;
height: 25px;
float: left;
margin: 2px;
display: inline-block;
}
If I understood correctly - you simply need to add vertical-align: top to TDs:
td {
width: 100px;
height: auto;
vertical-align: top;
}
td img {
width: 25px;
height: 25px;
float: left;
margin: 2px;
display: inline-block;
}
td h6 {
display: inline;
}
table h5 {
width: 100%;
padding-top: 5px;
padding: 0;
margin-top: 5px;
margin: 0;
position: relative;
display: block;
clear: both;
}
<table>
<tbody>
<tr>
<td>
<img src="icon.png" />
<h6>(Text one)</h6>
<h5>Textline Two</h5>
</td>
<td>
<img src="icon.png" />
<h6>(Text Two)</h6>
<h5>Long textline two long</h5>
</td>
<td>
<img src="icon.png" />
<h6>(Text one)</h6>
<h5>Textline Two</h5>
</td>
</tr>
</tbody>
</table>
Related
I coded a product purchase page for a clothing line, and according to the teacher, my product page should switch to whichever small image I hover over. When I hover however the product image will not change as required. What am I doing wrong? I also have bootstrap cdn code in the heading area, but I don't think it has much effect on the code except for the fa fa icon.
HTML
<body>
<div class="small-container single-product">
<div class="row">
<div class="col-2">
<img src="images/thigh-ties-cross-set.png" width="100%" id="ProductImg">
<div class="small-img-row">
<div class="small-img-col">
<img src="images/thigh-ties-left.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-front.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-left.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-front.png" width="100%" class="small-img">
</div>
</div>
</div>
<div class="col-2">
<p>Home / T-Shirts</p>
<h1>Yoga Sets From Chaucey Moore</h1>
<h4>$90.00</h4>
<select>
<option>Select Size</option>
<option>XXL</option>
<option>XL</option>
<option>LARGE</option>
<option>MEDIUM</option>
<option>SMALL</option>
</select>
<input type="number" value="1">
Add to Cart
<h3>Product Details<i class="fa fa-indent"></i></h3>
<br>
<p>Give your summer wardrobe a style upgrade with the Men's Active T-Shirts. Team it with a pair of short for your morning workout or a denims for an evening out with the guys.
</p>
</div>
</div>
</div>
<script>
var ProductImg = document.getElementByID("ProductImg");
var SmallImg = Document.getElementsByClassName("small-img");
SmallImg[0].onclick = function()
{
ProductImg.src = SmallImg[0].src;
}
SmallImg[1].onclick = function()
{
ProductImg.src = SmallImg[1].src;
}
SmallImg[2].onclick = function()
{
ProductImg.src = SmallImg[2].src;
}
SmallImg[3].onclick = function()
{
ProductImg.src = SmallImg[3].src;
}
</script>
</body>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.small-container{
max-width: 1000px;
margin:auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20px;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
line-height: 60px;
font-size: 50px;
margin: 25px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
.single-product input{
width: 50px;
height: 40px;
padding-left: 10px;
font-size: 20px;
margin-right: 10px;
border: 1px solid #ff523b;
}
input:focus{
outline: none;
}
a{
text-decoration: none;
color: #555;
}
.single-product .fa{
color: #ff523b;
margin-left: 10px;
}
p{
color: #555;
}
.btn{
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #563434;
}
Responsive Email Template doesn't show buttons and footer isn't aligned properly on outlook web. Attached is the code and screen shot of the result in outlook web and the desired output as displayed in gmail web. I need help in fixing it for outlook.
<!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" />
<!-- For development, pass document through inliner -->
<!--<link rel="stylesheet" href="css/simple.css" />-->
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65; }
img {
max-width: 100%;
margin: 0 auto;
display: block; }
body,
.body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none; }
a {
color: #f08414;
text-decoration: none; }
.text-center {
text-align: center; }
.text-right {
text-align: right; }
.text-left {
text-align: left; }
.button {
display: inline-block;
color: white;
background: #f6c095;
border: solid #f6c095;
border-width: 10px 20px 8px;
/*font-weight: bold;*/
border-radius: 4px; }
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25; }
h1 {
font-size: 25px; }
h2 {
font-size: 28px; }
h3 {
font-size: 24px; }
h4 {
font-size: 18px; }
h5 {
font-size: 16px; }
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px; }
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important; }
.container table {
width: 100% !important;
border-collapse: collapse; }
.container .masthead {
padding: 80px 0;
background: #3d4a7c;
color: white; }
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
/*text-transform: uppercase;*/ }
.container .content {
background: white;
padding: 30px 35px; }
.container .content.footer {
background: none; }
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px; }
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold; }
#contactmanager {
display: inline-block;
color: white;
background: #3d4a7c;
border: solid #3d4a7c;
border-width: 10px 20px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container">
<!-- Message start -->
<br />
<table>
<tr>
<td align="center">
<img alt="accesbank-logo" src="images/accessbank.png"/>
</td>
</tr>
</table>
<br/>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td align="center" class="masthead">
<h1>High Account Balance</h1>
</td>
</tr>
<tr>
<td class="content">
<h4>Dear Emmanuel Onyeje</h4>
<p>Access Bank Checking Account has a high balance of #X. Consider investing this in a higher yielding account such as a fixed/call deposit </p>
<p><em>– Bank Team</em>
</p>
<table>
<tr>
<td align="center">
<p>
Contact Account Manager
Ignore Advice
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td class="content footer" align="center">
<p>Copyright © 2016 Access Bank,Powered by Molib
</p>
<p>If you do not want to recieve emails from us, you can | Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sounds like you need bulletproof email buttons! It's possible to get buttons like this email, but it requires more code than it would on the web / email clients with decent box model support:
<td align="center">
<!-- Button 1 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #f6c095; text-align: center;">
<a href="http://www.google.com" style="background: #f6c095; border: 10px 20px 8px 20px; solid #f6c095; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Contact Account Manager
</a>
</td>
</tr>
</table>
<!-- Button 1 : END -->
<!-- Button 2 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #3d4a7c; text-align: center;">
<a href="http://www.google.com" style="background: #3d4a7c; border: 10px 20px 8px 20px; solid #3d4a7c; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Ignore Advice
</a>
</td>
</tr>
</table>
<!-- Button 2 : END -->
</td>
This is one of a few similar techniques, outlined on Litmus.
For this, i use a table :
<table cellpadding="0" cellspacing="0" border="0" width="150" bgcolor="#000000" class="cta-black" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; border-collapse: collapse; mso-padding-alt: 0pt 0pt 0pt 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background: #000000;">
<tbody>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
<tr>
<td align="center" mc:edit="selection-1-cta" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">VOIR LE PRODUIT</td>
</tr>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
</tbody>
</table>
I am trying to create a PDF that contains table which is partly filled, partly empty. To accomplish this I am using DomPDF via a Laravel wrapper.
It seems that DomPDF somehow miscalculates the height of the empty cells and also displaces the table grid and content.
Here is a minimal broken example:
<html>
<head>
<style>
html, body {
font-family: DejaVu Sans;
}
table {
border-collapse: collapse;
border: none;
margin: 0;
width: 100%;
}
table.main td {
padding: 0;
border: 2px solid black;
}
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
height: 14px;
}
</style>
</head>
<body>
<table class="main">
<tr>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</table>
</td>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how that table looks like in the generated PDF:
I have tried to add min-height and max-height for the table cell, but no results, it still randomly misaligns everything.
It turns out that this requires line-height to be set exactly equal to the font size. This will work:
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
line-height: 10px;
height: 14px;
}
I'm trying to make my first website in Dreamweaver, and I've run into a problem I can't seem to fix. I have a div containing an unsorted list, and the elements of the list are rollover images. There are 5 images, so I have 3 on the first line and 2 on the second line. They are sized to be a certain percentage of the page.
I want the div to extend down to the end of the bottom row of images automatically, I do not want to have to hard code the value for the size. I have the div size set to auto, but it does not seem to recognize the images in the unsorted list. It is sizing its self to 0, so all the images are overlaying everything that comes after the div.
If I manually resize the div it fixes the problem, but I'm not sure I want to do this.
Is there anyway to fix this issue without hard coding the height of the div?
Here is the html code for the list of roll over images..
<div id="rolloverlocs">
<ul>
<li><img src="images/Davie.jpg" alt="" width="" height="" id="Image1"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image2"></li>
<li><img src="images/Denman.jpg" alt="" id="Image3"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image4"></li>
<li><img src="images/Denman.jpg" alt="" width="" height="" id="Image5"></li>
</ul></div>
And for this part of the css style sheet ..
#rolloverlocs ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: auto;
display: block;
}
#rolloverlocs img {
width: 31%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
float: left;
border-style: solid;
border-color: #000000;
background-color: #E5E9E2;
height: auto;
}
#rolloverlocs {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}
try add this style:
#rolloverlocs ul {
overflow:hidden;
}
demo
or you can use this:
html,body{
width:100%;
}
*{
margin:0;
padding:0;
}
#rolloverlocs ul {
list-style: none;
width: 100%;
display: block;
overflow:hidden;
}
#rolloverlocs li{
display:block;
float:left;
width:33%;
}
#rolloverlocs a{
display:block;
width:100%;
height:auto;
}
#rolloverlocs img {
width:94%;
margin:1%;
display: block;
background-color: #E5E9E2;
height: auto;
padding:2%;
}
#rolloverlocs {
width:100%;
}
I have out of order display problem in IE6 and IE8.
Following is the output screenshot in IE6 and IE8 :
http://img707.imageshack.us/img707/1875/61807760.jpg
Following is my HTML code :
<div>
<div style="width: 280px; float: left; height: 220px; background:url(images/content_box.gif) no-repeat; text-align: left; padding-left: 20px; padding-top: 20px;">
<div class="cont_featr"><div class="cont_txt"><b>Features</b></div></div>
<hr class="container_hr" align="center">
<div style="text-align: left;margin-left: 15px;">
<ul class="as_ul">
<li class="as_li">Immediate/Cron based delivery.</li>
<li class="as_li">Multilanguage support.</li>
<li class="as_li">Auto integration to any Joomla, vBulletin style.</li>
</ul>
</div>
</div>
</div>
Following is the CSS code :
.as_ul {
list-style: none url(images/tick.gif);
list-style-position:outside;
border: 1px solid #f00;
}
.as_li {
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana, Sans-Serif;
background-image: url(images/tick.gif) no-repeat;
border: 1px solid #0f0;
}
.container_hr {
color: #888888;
background-color: #888888;
height: 0.8px;
border: 0;
width: 85%;
text-align: center;
}
.cont_featr {
background: url(images/featurs.png) no-repeat;
width: 40px; height: 40px;
}
.cont_txt {
FONT-SIZE: 11pt;
padding-left: 50px;
padding-top: 10px;
}
Please help.
Try giving .as_li or .as_ul the property/value zoom:1