I am using nodemailer to send a welcome mail after registration, the email template is stored in variable
var template = '</!DOCTYPE html><html><head><meta charset="utf-8"><meta http -equiv="X-UA-Compatible" content="IE=8; IE=edge,chrome=1"> <title> Cushbu Art</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">';
template+= '<style type="text/css"> * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box - sizing: border-box; } p { margin: 0; }';
template+='#font -face{ font - family:"roboto-regular"; src: url("/Roboto-Regular.ttf/"); } body { } main { } . mailer { max - width : 100 %; width: 100 %; margin - left: auto; margin - right: auto; float: left; clear: both; } h2 { font - family: roboto-regular; font - size : 32 px; text - align : center; color: # fff; margin: 0; } h3 { font - family: roboto-regular; font - size : 52 px; text - align : center; color: # fff; margin: 0; } . mailer -head{ width: 100 %; padding: 52px 0; background: url("/mailer-head.png/") no-repeat; background -size: cover; background -color: #fff; } . mailer -body{ width: 100 %; background -color: #fff; float: left; padding: 24px 0; box - shadow : 0 2 px 5 px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } . mailer -body .logo{ height: 60 px; width: 160 px; margin: auto; display: block; background: url("/logo.jpg/") no-repeat center; background -size: contain; } . para { padding: 24px; max - width : 80 %; margin: auto; } . para p { font - size : 20 px; font - family: roboto-regular; text - align : center; color: # 161616; margin: 0; line - height: 34px; } . container-grid{ max - width : 100 %; margin - left: auto; margin - right: auto; width: 100 %; float: left; clear: both; } . grid - 2{ width: 50 %; float: left; padding: 8 px; } . btn { font - family: roboto-regular; font - size : 15 px; text - align : center; color: # fff; border - radius: 2px; text - decoration: none; padding: 8 px 12 px; background -color: #2066df; } . btn - refer{ float: right; } .btn-upload{ float: left; } .signature{ width: 100%; float: left; clear: both; } .signature p{ font-family: roboto-regular; font-size: 15px; text-align: center; padding: 6px 0; } .signature .sign{ height: 60px; width: 160px; margin: auto; display: block; background: url("/sign.png/") no-repeat center; background-size: contain; } .mailer-footer{ width: 100%; float: left; clear: both; padding: 24px 0; background-color: white; /*border-top: 1px solid #ededed;*/ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .mailer-footer ul{ display: table; margin: auto; padding-bottom: 14px; } .mailer-footer ul li{ float: left; list-style: none; } .mailer-footer ul li a{ height: 47px; width: 47px; line-height: 0; border-radius: 50%; cursor: pointer; vertical-align: middle; margin: 10px; display: block; text-decoration: none; } .mailer-footer ul li a i{ padding: 16px 0; color: #fff; display: block; text-align: center; } .btn-fb { background-color: #3B5998; } .btn-li { background-color: #0082CA; } .btn-tw { background-color: #55ACEE; } .btn-ins { background-color: #3F729B; } .btn-pin { background-color: #C61118; } .btn-gplus { background-color: #DD4B39; } .mailer-footer p{ font-family: roboto-regular; font-size: 15px; text-align: center; }.mailer-footer .p-btm{ padding - bottom: 24px; } . mailer -footer .p-top{ padding - top: 24px; } . mailer -footer span{ font - family: roboto-regular; font - size : 15 px; display: block; text - align : center; } . container-mailer-body{ background: #e5e5e5; float: left; width: 100 %; padding: 0 24 px; clear: both; } footer{ background: #e5e5e5; padding: 10px; clear: both; } footer p { font - family: roboto-regular; font - size : 15 px; text - align : center; } </style></head>';
template+= '<body> <main> <div class="mailer"> <div class="mailer-head"> <h2>Welcome</h2> <h3>user!</h3> </div> <div class="container-mailer-body"> <div class="mailer-body"> <div class="logo"></div> <div class="para"> <p>I am so delighted you have joined us here at www.cushbu.com. Our goal is to create a global platform for artists to exhibit, sell their artworks and worldwide visibility for the International art community. If you are interested in promoting your artworks through our site, instead of the sale, we welcome to do so by an active participation by creating and sharing artworks. We heartily invite you to explore our site with new creative artworks and connect with the talented artists all around the world.</p> </div> <div class="container-grid"> <div class="grid-2"> Refer Now </div> <div class="grid-2"> Ulpoad Art </div> </div> <div class="signature"> <div class="sign"></div> <p>Sanata Balakrishnan</p> <p>COO - Cheif Operating Officer</p> </div> </div> <div class="mailer-footer"> <ul> <li> <a type="button" class="btn-floating btn-small btn-fb" href="https://www.facebook.com/cushbuart/" target="_blank"><i class="fa fa-facebook"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-li" href="https://www.linkedin.com/company-beta/13277468/admin/updates/"><i class="fa fa-linkedin"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-tw" href="https://twitter.com/cushbuart"><i class="fa fa-twitter"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-ins" href="https://www.instagram.com/cushbuartlive/"><i class="fa fa-instagram"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-pin" href="https://in.pinterest.com/cushbu/"><i class="fa fa-pinterest"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-gplus" href="https://plus.google.com/u/0/communities/112678263549800648922"><i class="fa fa-google-plus"></i></a> </li> </ul> <p class="p-btm">You are receiving this email because you opted in at our website</p> <span>Email your thoughts to,</span> <span>info#cushbu.com</span> <span>contact#cushbu.com</span> <p class="p-top">You are receiving this email because you opted in at our website</p> </div> </div> </div> </main> < footer> < p > Copyright © 2017 Cushbu Art Pvt Ltd rights reserved</p> < / footer></body ></html>';
Email sending code
var transporter = nodemailer.createTransport({
host:'XX',
port :465,
secure: true,
auth: {
user: 'XX',
pass: 'XX'
}
});
var mailOptions = {
from: '<sender>', // sender address
to:'me#me.com', // list of receivers
subject: 'Welcome', // Subject line
html:template
};
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
res.send(error);
return console.log("Error ",error);
}
res.send('Message %s sent: %s', info.messageId, info.response);
});
But the problem is email is not rendering the HTMl properly styles are missing
I'm not an authority on this, but I'm fairly sure the html payload of an email is supposed to be a lot simpler than a full document. Whether or not it gets rendered, and how complicated the styles can be is really up to the client that the receiver is using to view the email (gmail, thunderbird, etc, etc).
I'd use a couple rules of thumb for sure:
Don't expect anything from the <head> element to be included. I'd even leave out the <body> and just use a <div> or <p> or <table> as your root element.
Put styles either directly on your elements, or in a <style> tag - not in the <head> as that will likely be excluded.
No links to local resources! I think you're trying to grab a font from a relative url. Best to avoid all external resources if you can, but if you must, absolute urls may work.
The simpler the better.
You can really do a lot with just a few styles in an email. If you really need your branded font, just create a logo image that features it. Nodemailer has some cool tricky ways to include your images as attachments so they don't count as external resources and are less likely to be blocked. (I can't find the docs, but here is a quick guide).
External files dont seem to work with nodemailer,
You are referencing a CSS file, you need to make all those styles inline
Related
So, I am using flexbox for some columns. Basically column 1 is left-aligned, column two i centered, and column three is right-aligned. No big deal, or so I thought. In Chrome, everything looks fine, even when looking at things through Chrome's Inspect tool...but on my iPhone I can't get the right column to justify-content.
My code looks like:
<div id="nav">
<div class="wrap">
<div>
<p><i class="far fa-dot-circle"></i> Watch</p>
</div>
<div>
<p><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" title="" /></p>
</div>
<div>
<p><i class="fas fa-donate"></i> Give</p>
</div>
</div>
</div>
The css looks like:
#nav div {
align-items: center;
display: flex;
flex: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-transform: uppercase;
}
#nav > .wrap > div:nth-child(1) {
background: #00ff00;
justify-content: left;
}
#nav > .wrap > div:nth-child(2) {
background: #ff0000;
justify-content: center;
}
#nav > .wrap > div:nth-child(3) {
background: #0000ff;
justify-content: right;
}
#nav img {
max-width: 175px;
width: 100%;
}
#nav i {
color: #fff;
margin-right: 5px;
}
#nav a {
color: #fff;
text-decoration: none;
}
Here is the Fiddle: https://jsfiddle.net/1kw5g3h7/
I added the following code this morning and this works:
#nav > .wrap > div:nth-child(3) p {
text-align: right;
width: 100%;
}
I don't like this approach, it seems like to me the justify-content just isn't working is there a way to fix this using flexbox? I'm trying to understand why my original code isn't working on my iPhone? Maybe it's because I have Font Awesome icons in front of the text, I just don't know. Any ideas?
Thanks,
Josh
I didn't realize until now that I hadn't ever posted my final code. This is what I ended up with: https://jsfiddle.net/tc36e24s/2/
HTML:
<div id="head">
<div id="nav">
<i class="ion-android-close"></i>
<ul>
<li>Watch</li>
<li>Give</li>
<li><img src="images/logo.png" alt="Logo" title="Logo" /></li>
<li>Visitors</li>
<li>Contact</li>
</ul>
</div>
<div id="logo">
<p><img src="images/logo.png" alt="Logo" title="Logo" /></p>
<div onclick="openNav()" class="open">
<i class="ion-android-menu"></i>
</div>
</div>
</div>
CSS
body {
background: #009151;
}
#head {
display: flex;
flex-flow: column;
height: 100vh;
}
#nav ul {
flex: 0 1 auto;
}
#nav ul img {
max-width: 175px;
width: 100%;
}
#nav ul i {
color: #9ac2e7;
margin-right: 5px;
}
#nav li {
font-family: 'Open Sans', sans-serif;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-align: center;
text-transform: uppercase;
}
#logo {
display: flex;
}
#logo img {
max-width: 200px;
margin: 20px 30px;
width: 100%;
}
#media screen and (max-width: 800px) {
#head .open {
color: #9ac2e7;
font-size: 30px;
margin: 20px 30px;
text-align: right;
width: 100%;
}
#head .open:hover {
cursor: pointer;
}
#nav {
background: #9ac2e7;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
#nav ul {
align-items: center;
display: flex;
flex-flow: column;
height: 100%;
justify-content: center;
width: 100%;
}
#nav ul a {
color: #000;
text-decoration: none;
}
#nav li {
font-size: 20px;
padding: 10px 0;
}
#nav li:nth-child(3) {
display: none;
}
#nav .close {
color: #000;
font-size: 30px;
position: absolute;
right: 30px;
top: 20px;
}
}
#media screen and (min-width: 801px) {
#nav .close {
display: none;
}
#nav[style] {
display: block !important;
}
#nav ul {
align-items: center;
display: flex;
}
#nav ul a {
color: #9ac2e7;
text-decoration: none;
}
#nav li {
flex: 1;
font-size: 14px;
}
#logo {
display: none;
}
}
JS
function openNav() {
document.body.style.overflow="hidden";
document.getElementById("nav").style.display = "block";
}
function closeNav() {
document.body.style.overflow="scroll";
document.getElementById("nav").style.display = "none";
}
I added some JS to make my menu work on mobile, but other than that this is code I went with...which is pretty much the same as before except I added two additional links (one on each side of the logo).
Thanks,
Josh
I have an image in each li label with some text below each image. The parent ul and child li have flexbox properties as below.
Parent Ul:
{ display: flex; flex-wrap: row wrap; height: auto;}
Child Li:
ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}
I have used align-self: center; to get the images to align to the centre of the parent ul. However, the image sizes are not consistent and change according to the amount of text in each respective label. Where the label text flows into a 2nd ord 3rd line, the image above stretches to fill the blank space above. align-self: flex-start; and align-self: flex-end; also don't help and the image size differs in each li.
How do I get to fix the image sizes across li irrespective of the text in the label below, such that the images align with each other and the text labels also align themselves?
Find below working code:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
ul.uploaded-pics { margin: 0; padding: 1px; border: 1px solid #aaa; border-radius: 4px}
ul.uploaded-pics { list-style-type: none;}
ul.uploaded-pics img { border: 2px;}
ul.uploaded-pics input[type="checkbox"]{ display: none;}
ul.uploaded-pics label { padding: 4px; display: block; position: relative; cursor: pointer; text-align: center; color: blue;}
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}
ul.uploaded-pics { display: flex; flex-wrap: row wrap; height: auto;}
ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
.pull-right .btn { margin-left: 5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id=Destination>Select the brands:
<ul class="uploaded-pics">
<li id=SubBrands>
<input class="SubBrandCheckBox" name="Brand1" type="checkbox"/>
<label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand1</label>
</li>
<li id=SubBrands>
<input class="SubBrandCheckBox" name="Brand2" type="checkbox"/>
<label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />Brand2</label>
</li>
<li id=SubBrands>
<input class="SubBrandCheckBox" name="Brand3" type="checkbox"/>
<label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />XXXX XXXX XXXX XXXX XXXX Brand3</label>
</li>
<li id=SubBrands>
<input class="SubBrandCheckBox" name="Brand4" type="checkbox"/>
<label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX Brand4</label>
</li>
<li id=SubBrands>
<input class="SubBrandCheckBox" name="Brand5" type="checkbox"/>
<label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand5</label>
</li>
</ul>
</div>
You need to add align-self and flex-basis to the ul.uploaded-pics li as follows:
ul.uploaded-pics li {
align-self: flex-start;
flex-basis: 100%;
}
then each of columns is the same size and images fit into it. You can remove both the flex property from li and the flex-grow property from ul because they are unnecessary.
The following code works well on Chrome, but on Edge the Sticky element is out of place
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Result in Edge:
I noticed that if I remove the box-shadow from the sticky component or the dir=rtl from the body. It all works as expected.
It appears to be a bug in Edge, and after one resize the window in e.g. jsFiddle, it corrects itself.
What Edge also does, with dir="trl" set on the body, it render the scrollbar on the left side of the viewport, which e.g. neither Chrome nor Firefox does.
A workaround could be to instead of swap position with dir=rtl on the body, use Flexbox's own order property, and then set the direction on the inner elements to control the flow.
Fiddle demo
Stack snippet
.main {
display: flex;
max-width: 1200px;
/*width: 100%; default /*
/*flex-flow: row nowrap; default */
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
order: 1; /* added, move last */
}
<body>
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Updated based on a comment.
After some more testing and research, trying to move the box-shadow, which obviously cause this issue, to an inner element such a pseudo, still offset the .sticky element.
So two simple solutions, so dir="rtl" can be kept on the body, is to either, using a pseudo, use an image to create the shadow, or, as in below sample, use the filter property.
Here I used a CSS trick to apply it only on Edge, but it can fully replace the box-shadow, and which way to go is more about how old browsers one need to support.
Fiddle demo 2
Stack snippet 2
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
/* CSS to target Edge only */
#supports (-ms-ime-align: auto) {
.sticky {
box-shadow: none;
filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
}
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.
I have a horizontal scrolling website with a fixed sidebar and footer. I am trying to get my content to 100% height to sit on the footer. Although my sidebar is at 100% height even though there is hardly any content in it I cannot get my contents divs to go to 100% and sit on the footer. Here is my HTML structure:
<html class="multiplebgs" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="wrapper">
<div class="sidebar">
<div class="hlogo">Lorem Ipsum</div>
<div class="navigation demi f11">
<ul>
<li>ABOUT US</li>
<li>WHAT WE DO</li>
<li>OUR THEORY</li>
<li>PORTFOLIO</li>
<li>CLIENTS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<section class="habout step">
<div class="content" id="content1">
</div>
</section>
</div>
<div class="footer fcolor">
</div>
</body>
</html>
And my CSS:
html {
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale')";
height:100%;
}
body {
margin:0;
height: 100%;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
color:black;
font-size:12px;
width: 12660px;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -45px;
}
.content{
float:left;
width:1000px;
margin: 0px;
height: 100%;
padding: 0 360px;
}
#content1 { background:url(../img/bgaboutus.png) no-repeat bottom center;}
.sidebar {
float:left;
width:350px;
position: fixed;
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
background-size:cover;
height: 100%;
z-index: 1;
}
.step {
float: left;
margin: 0px;
position:relative;
height: 100%;
min-width: 1000px;
padding: 0px;
overflow:auto;
}
.no-multiplebgs .habout {}
.multiplebgs .habout {background: url(../img/naboutus.png) top right no-repeat fixed;}
Even if I apply the CSS of the sidebar class which is 100% height the section and content divs wont stretch to 100% height.
Any suggestions are welcome.
Thanks
The problem was in class .wrap{ height: auto !important;} . Once I removed the height auto the content div expanded to 100% .
Thanks