I'm creating email template with variables in it. The variables will be replaced at run-time with one of two different sets of values as show below. The first set has an extra paragraph in the middle with a link embedded in it. The problem I'm having is getting the second and third paragraphs to have the correct spacing when they are combined. Is there some way to create a bottom margin from p3 to create that space between the second and third paragraphs?
Here is the template I am using.
Template
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
background-color: #f5f5f5;
}
.body-div{
width: 560px;
background-color: #ffffff;
padding: 10px 20px;
margin: 0 auto;
}
.below-spacing, .p3{
padding-bottom: 20px;
}
.above-spacing{
padding-top: 10px;
}
.p1:empty, .p2:empty, .p3:empty{
display:none;
}
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">{{FirstParagraph}}</div>
<div><span class= "p1">{{MidParagraphPart1}}</span><span class="p2">{{MidParagraphPart2}}</span><span class="p3">{{MidParagraphPart3}}</span></div>
<div>{{LastParagraph}}</div>
</div>
</body>
</html>
Example 1
In this example I've inserted values into all the variables showing all three paragraphs and the link with text in it. Notice how paragraphs two and three do not space correctly in a browser. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><span class="p2">(Part #2) Link text</span><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Example 2
In this example I've replaced only the first and last variables with text. The middle paragraph is hidden and both paragraphs are spaced correctly. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1"></span><span class="p2"></span><span class="p3"></span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Try this:
Add this to the end of your css.
.hidden{
display: none;
}
Then add the injectable variable Hidden to any element you want to hide on demand.
<div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><span>{{Paragraph3}}</span><span>{{Paragraph4}}</span></div>
Inject "hidden" (no double quotes) for the variable {{Hidden}}. That will hide the paragraph with the correct spacing.
You can remove the p1, p2, and p3 classes.
The span is inline tag. We can not set margin for it. You should set span to display: inline-block.
.p1,
.p2,
.p3 {
display: inline-block;
}
To hide second span you should add class empty for it:
<span class="p2 empty></span>
CSS:
.p1.empty,
.p2.empty,
.p3.empty {
display: none;
}
I saw some error in your HTML code.
your first span is missing " before the class name.
Your second span doesn't have a class. Maybe add p2 like you want.
I'm not sure to understand the whole question here, but why did you put a
display: none;
to your span?
Try
display: inline-block;
Another solution could be to remove span and add
<p>
instead and add that in your css
p{
margin-bottom:20px; //can add a class p3 to your p.
}
Related
I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!
I'm making my second test HTML file from PSD file.
In this picture you may see my issue.
Could you please guide me how to sit two images next to each other which have text below?
Also I want it be responsive.
For example in large screens, the two images sit next each other. In small screens each image in one separate line.
Thanks a bunch
first have the image and text in a box like this:
<div class="contentBox">
<img>
<h3>some title</h3>
<p>some text</p>
</div>
then float those boxes.
.contentBox{
float:left;
}
I made a quick snippet to show you how you could use it:
#boxes{
text-align:center;
}
.contentBox {
display: inline-block;
width: 200px;
border: 1px solid black;
margin: 20px;
}
.contentBox img {
width: 100%;
}
.contentBox h3 {
margin: 5px;
}
.contentBox p {
text-align: justify;
margin: 5px;
}
<div id="boxes">
<div class="contentBox">
<img src="http://via.placeholder.com/350x250">
<h3>some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p>
</div>
<div class="contentBox">
<img src="http://via.placeholder.com/350x250">
<h3>some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p>
</div>
</div>
So I have a <h> tag and a <p> tag. The width of <p> tag needs to follow the width of <h> tag and the width of <h> tag will be altered dynamically according to the length of its text.
Below are examples
Example1:
Heading: this text will change from time to time
Paragraph: Width of this text needs to fit the
width of previous Heading tag. blah blah blah bl
ah blah blah lbah
Example2:
Heading: this text changed
Paragraph: Width of this
text also changed because
width of prevous heading
changed.
I cannot use javascript so will need a css or html solution for this. Thanks!
One way you can do it with CSS table + table-caption.
jsfiddle
.container {
display: table;
}
.container h2 {
margin: 0;
}
.container p {
display: table-caption;
caption-side: bottom;
background: #ccc;
padding: 5px;
}
<div class="container">
<h2>Short Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec risus dignissim, varius nibh sed, dapibus tortor.</p>
</div>
<br/>
<div class="container">
<h2>Long Long Long Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec risus dignissim, varius nibh sed, dapibus tortor.</p>
</div>
I don't know if the title is good enough, but I'll explain it here more thoroughly. So I've got the following HTML code:
<section>
<aside>
<div class = "container">
<div class = "col-md-4 lefterino">
<p><span>Daily Posts</span>Lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit</p>
<p><span>Daily Posts</span>Lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit</p>
</div>
<div class = "col-md-3 midderino">
<p>asd</p>
</div>
<div class = "col-md-4 righterino">
<p>asd</p>
</div>
</div>
</aside>
</section>
And the following CSS code:
section {
height: 100%; // screen height
}
aside {
bottom: 0em;
position: absolute;
width: 100%;
}
.lefterino {
text-align: right;
color: #fff;
font-weight: 300;
}
.lefterino p {
width: 75%;
float: right;
opacity: 0.92;
margin-bottom: 4em;
}
The problem is that I want to align all the elements from the container div's at the bottom of the section. For the first div (lefterino) it works fine. For the second and third one, the elements (in my case the <p>) always gets aligned with the elements from the first div.
Here's an image that shows the effect:
It is possible to use text-indent property to indent the first line of text towards either side of left corner. Consider this example:
h1 { text-indent: -200px; margin-left: 200px; }
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula molestie imperdiet.</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula molestie
imperdiet.
|---------- 200px ----------+------ 100% - 200px ------|
|-------------------------->| left margin
|<--------------------------| negative text indent
Is there a trick to do this the other way round:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula molestie
imperdiet.
|------ 100% - 200px ------+---------- 200px ----------|
What I want is the first line (and only the first line) of text to extend 200px past the left edge. Perhaps there is a similar CSS property which applies indenting around the right edge or applies to 2nd and latter lines of text.
Here is a jsFiddle
text-indent could come from parent. with a padding.
http://jsfiddle.net/qsDST/
#wrapper {
width: 300px;
text-indent: -200px;
padding-left:200px;
}
h1 {
background: lime;
display:inline;
}
Is this you want?
h1.other-way-round {
margin-left: 0px;
text-indent:0px
}
DEMO
Second method
h1.other-way-round{
text-indent:0;
position:relative;
width:100%;
left:-200px;
}
DEMO
As I undarstand your expected result is something like this:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Mauris vehicula
molestie imperdiet.
The easiest way to do this might be using Javascript.
You could detect the 2nd and past lines and wrap an tag around them with a padding-right of 200px.
You may need to use jQuery or simmilar to do this.
Badly it's not possible to set width/height nor padding to the :first-line pseudoelement.