using FOUNDATION 6.
Have 3 columns, each has:
image (always same size)
title (varies in length )
text (varies in length )
button
How can I have them all align horizontally throughout the colums?
This is current situation:
current situation
What I need:
enter image description here
Current code for this section:
<div class="row small-up-1 medium-up-3 large-up-3 " data-equalizer="prodMain" >
<div class="column" data-equalizer-watch="prodMain" >
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum ipsum ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT THE LOREM
</div>
<div class="column" data-equalizer-watch="prodMain">
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT THE LOREM Y
</div>
<div class="column" data-equalizer-watch="prodMain">
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum & Lorem ipsum </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT OUR LOREM
</div>
</div><!--/ -->
If you want to use jquery you could try including a class like same-height to your html, then testing with jquery
HTML (add the extra class name same-height)
<div class="row small-up-1 medium-up-3 large-up-3 same-height" data-equalizer="prodMain" >
Javascript
$(function() {
function getLargest(elements) {
largest = 0;
$(elements).each(function(i, obj) {
if($(this).height() > largest) {
largest = $(this).height();
}
});
return largest;
}
function setHeights(elements, largest) {
$(elements).each(function(i, obj) {
$(this).height(largest);
});
}
var largest = getLargest('.same-height h5');
setHeights('.same-height h5', largest);
var largest = getLargest('.same-height p');
setHeights('.same-height p', largest);
});
Works fine but if you want to resize the browser or limit to certain screen sizers you would need extra code.
Related
I am wondering if it is possible to left align text below center aligned text, so that both texts start from same position.
In the example figure. The TITLEs are center aligned and the copy below is left aligned.
How can you realise something like this with CSS?
Here is a JSFiddle to start from
https://jsfiddle.net/j5p7v8m9/
<div>
<p style="text-align: center;">TITLE</p>
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Here is the answer. I've updated your JSFiddle. You need to add some wrappers for each divs, then you can centerize the title as follows:
HTML:
<div class="container">
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
CSS:
.container{
display: block;
}
.col{
float: left;
width: 33.33%;
}
.contents{
margin-left: 20px;
margin-right: 20px;
}
.title{
text-align: center;
}
JSFiddle: https://jsfiddle.net/53oLpvqg/
Please try with bootstrap css it my help you for easy css.
<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>
</div>
Check Fiddle https://jsfiddle.net/0h2nmj3r/
*Look at other answers for directions on align text this is answer will help with getting that column effect
The best way to get three columns like that is to use a type of special display in css called "flex". Flex allows you to easily align elements within the parent html element.
.container{
display:flex;
flex-direction : row;
justify-content: space-around;
}
.text-box{
display: flex;
flex-direction:column;
align-items:flex-start;
width:20%;
}
p{
margin: 0 0 5px 0;
}
<div class="container">
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
So as you can see I have applied flex to both the container and the text-box's. Left align can be used like in these other answers but i opted for align-items:flex-start so any element within the text-box will be aligned to the left.
By setting justify-content:space-around it makes each element within the container have equal space around it so if you were to change the window size the spaces would be relative and change. I would recommend studying more about flex and grid to improve your css skills.
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.
}
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
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:
I am trying to set up a section of a website to have a column of text, a long vertical picture, and another column of text on the other side of the picture. I have been able to achieve the look I want but only by using a negative top margin(not shown in this example).
The code I have tried is here
http://www.bootply.com/3hKEyWGlJp
You don't need the extra row since a new row will create a new block below the previous row. It's how CSS grids work (Bootstrap in your example). Just put the content of step 1/2 in left column, div in center column and step 3/4 content in right column.
<div class="row">
<div class="col-md-3 col-md-offset-1">
<p class="lead text-left">Step 1: asdf asdf asdf </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>
<p class="lead">Step 2: Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
</div>
<div class="col-md-3">
<div class="phone"></div>
</div>
<div class="col-md-3">
<p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
<p>Start typing your address & we will give you a list of options to choose from.</p>
<p class="lead">Step 4: Lorem ipsum dolor sit</p>
<p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
</div>
</div>
Example: http://www.bootply.com/rCr1B4wiKD