I need some help with some overflowing text on my webpage that I am designing for school. I'm two weeks into my HTML/CSS webdesign class, so I am unable to use some of the more advanced coding. I am just curious as to why the text on the right hand side of my website(I'll post a link to jsfiddle in the comments because I cannot figure out how to add it in this original post.) doesn't want to stay on its side of the screen. Any help?
here are my codes(both CCS and HMTL):
#charset "utf-8";
/* temporary background color for testing purposes */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
el,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* My Styles */
body {
font-family: Arial, Hevetical, sans-serif;
font-size: 100%;
background-color: blue;
width: 80% margin: 0 auto;
}
header {
padding: 3em;
height: 330px;
margin: 0;
background-color: lightblue;
position: relative;
}
nav {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 1em;
}
nav a {
padding: .25em 5em;
background-color: #235B8A;
}
section {
padding: 3em;
}
footer {
padding: 3em;
background-color: lightblue;
text-align: center;
}
aside {
padding: 3em;
background-color: lightgrey;
}
h1,
h2,
h3 {
padding-bottom: 1em;
}
h1 {
font-size: 250%;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 80%;
}
.container {
overflow: hidden;
}
.col-1-3 {
width: 32%;
float: left;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.col-2-3 {
width: 65% float: left;
}
.cleafix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
clear: both;
}
<title>Crystal Coast Theater</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css">
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
</h1></a>
<nav style="text-align:center">
Home
Events
Tickets
Contact us
</nav>
</header>
<div class="container cleatfix">
<aside class="col-1-3">
<h2>Upcoming events:</h2>
<p><span class="emphasis">May 22 – June 8:</span> Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11 – June 29:</span> Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3 – July 20:</span> Beach Rental</p>
<p><span class="emphasis">July 23 – August 10:</span> The Siege of Fort Macon</p>
</aside>
<section style="text-align:center" class="col-2-3">
<h2>Your Down East Playhouse</h2>
<p>The Crystal Coast Theater is located in downtown Moorehead City. It features local talent performing in both renowned plays and in works written by some of the Crystal Coast’s own talented playwrights.</p>
<br>
<p>The Crystal Coast Theater also offers educational performances that bring to life the history and culture of the 85 miles of coastline that are favorite destinations for tourists.</p>
<br>
<p>Check out our upcoming events and make plans to come and see one of our shows.</p>
</section>
</div>
<footer style="text-align:center">
<small>Copyright © 2015 Paul Bernhardt Enterprises</small>
</footer>
</body>
</html>
-dark_nemesis
This will fix it:
section {
overflow: hidden;
padding: 3em;
position: relative;
}
Greetz
Related
<script>$(document).ready(function() {
$("#menu li a").on('click', function() {
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
</script>
<script>$(function () {
$("#categories li, #bottom-page li").click(function (e) {
e.preventDefault();
$("#categories li, #bottom-page li").addClass("active").not(this).removeClass("active");
});
});
</script>
<script>
function goto($hashtag){
document.location = "store.html#" + $hashtag;
}
</script>
#categories {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#categories ul li {
font-size: 16px;
background-color: #f1c96c;
text-align: center;
width: 32%;
margin-top: 3em;
display: inline-block;
}
#categories ul li:hover {
background-color: #f2e860
}
#categories ul li a {
color: #112c61;
font-size: .85em;
text-decoration: none;
padding: 1em 0;
display: block;
}
.nowrap {
white-space: nowrap;
}
.hide {
display: none;
}
li.active [data-page='category-1'] {
background-color: lavender;
}
li.active [data-page='category-2'] {
background-color: lavender;
}
li.active [data-page='category-3'] {
background-color: lavender;
}
#bottom-page {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#bottom-page ul { float: right; }
#bottom-page ul li {
font-size: 16px;
cursor: pointer;
width: 60px; height: 40px;
display: inline-block;
}
#bottom-page ul li a {
font-size: .85em;
text-decoration: none;
text-align: center;
line-height: 1.4;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
#bottom-page ul li:hover { background-color: #f3efb4; }
<section id="categories"><div id="top"></div>
<div id="categories-line">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" name="top" href="#">PRODUCTS <span>A - I</span></a></li>
<li><a data-page="category-2" name="top" href="#">PRODUCTS <span>J - R</span></a></li>
<li><a data-page="category-3" name="top" href="#">PRODUCTS <span>S - Z</span></a></li>
</ul>
</div>
</section>
<section id="bottom-page">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" onclick="goto('top')">Page<br>1</a></li>
<li><a data-page="category-2" onclick="goto('top')">Page<br>2</a></li>
<li><a data-page="category-3" onclick="goto('top')">Page<br>3</a></li>
</ul>
</section>
I have a menu at the top of a page under my nav which separates products on the page alphabetically. This menu is made up of three tabs spanning the width of the page that go A-I, J-R, S-Z. Under the tabs are a bunch of products listed depending on which tab is chosen.
At the bottom of the page after the last product is a menu, the same as the top menu but styled differently i.e. Page 1, Page 2, Page 3. I would like to have Page 1, Page 2 and Page 3 correspond to the proper tab at the top when clicked. So that Page 1 and the first top tab are active and highlighted when either one, top or bottom, is clicked. Thank you for any help!
Your question is a lot to read, make it as short as possible.
If your code consists of HTML or CSS, it's better to use stack overflow's code snippets
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello!</h1>
<section>
<h3>Work</h3>
<ol>
<li>Technical Blogs</li>
<li>Front End Projects</li>
</ol>
</section>
</body>
</html>
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
I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.
I've read many other posts regarding floating divs, but haven't been able to find success yet with the things I've tested, so here I am... (I'm still new to this, so apologies if my code isn't super clean!)
I have an image that I'd like to float over several others. My goal (if it is attainable) is to have it in a fixed position from the upper right corner of .container. I'm close... but I can't get the image to move in from the right, and as it sits now, it is bumping the other photo out of the header (without the .crosses added, it sits in the green, right-aligned.)
The project requires that it still looks good (or degrades nicely) in IE7.
I've set up a fiddle here: (can't figure out what the red error means by "links to jsfiddle.net must be accompanied by code") so, if you could just go there and visit:
http://jsfiddle.net/cathi/VAkk5/5/
HTML (extract):
<div class="container">
<div class="crosses"><img src="/img/common/crosses-motif.png" width="213" height="118" alt="crosses-motif" /></div>
<div class="header"></div>
<div class="hero">
<div class="herophoto">photo</div>
</div>
</div>
CSS (extract):
.container {
width: 80%;
margin: 0 auto;
}
.crosses {
float:right;
margin-right:0;
margin-top:130px;
}
.header {
height: 150px;
}
.headerlogo {
width: 250px;
padding-top: 80px;
padding-left: 20px;
float:left;
}
.headerlogo2 {
float:right;
}
.hero {
height: 205px;
}
.heroheadline {
height: 0;
width: 450px;
padding-top: 45px;
padding-left: 70px;
float:left;
}
.herophoto {
height: 205px;
width: 333px;
float: right;
}
Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"