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.
Related
So I have this code for my assignment but I can't figure out how to make the image goes to the side of the text. It keeps going to the right corner. Can someone help me out please? I just started to learn CSS. Thank you in advance.
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
<img src="cy.png" alt="IMG">
Make a table
<table>
<tr>
<td>
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</td>
<td>
<img src="cy.png" alt="IMG">
</td>
</table>
Could you clarify, are you trying to get it to go to the right side of text?
Typically, the align property of the img tag is what you want, and you usually want it before the thing you are trying to align it with.
I also recommend sharing a jsFiddle so that people can play with the code.
<img src="https://images.pexels.com/photos/13728847/pexels-photo-13728847.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="IMG" align="right">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><be>
https://jsfiddle.net/f1e7b6d8/
Nice to see you are started journey of css.
There is X ways to solve your problem with the help of css.
Float
Flexbox
Grid
Position
So for a beginner I would like to solve your problem with the help of float.
if you can not understand my code then you can take reference of any website to learn about css float property.
-------------CSS FILE-------------
.content {
float: right;
}
.image {
float: left;
}
.clear {
clear: both;
}
------------- HTML File -------------
<div class="content">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</div>
<div class="image">
<img
src="your_image_path"
alt="IMG">
</div>
<div class="clear"></div>
</body>
You have many ways to make this by CSS
you can use Float , FlexBox , Grid, Position
You can keep your HTML as it's but with a simple modification to put your img tag under the text
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<img src="cy.png" alt="IMG">
<button class="but1">Example</button>
<button class="but2">Example</button><br>
In you CSS file you can use
.txt {
float: left;
}
.img {
float: right;
}
button {
clear: both;
}
Hope this fix your issue.
I've been researching and trying for ages now and it kind of drives me crazy, that I am not able to solve this seemingly simple problem.
I've been trying to fit headings in blogpost-previews to the same height using flexbox. If a heading is "too long" it gets a line-break and has a greater height than the shorter ones, which is okay. However, the paragraph below the heading don't start on the same height anymore, which just looks very odd. Is there a simple way to achieve this, preferably with flexbox?
Here is an image of what I am trying to achieve:
Here is a link to the code on codepen
<div class="blogpost-container">
<div class="blogpost">
<header class="blogpost__header">
<div class="dummy-image"></div>
<h1>Blogpost heading short</h1>
</header>
<div class="blogpost__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Graecum enim hunc versum nostis omnes: Suavis laborum est praeteritorum memoria.
Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium.</p>
</div>
</div>
<div class="blogpost">
<header class="blogpost__header">
<div class="dummy-image"></div>
<h1>Blogpost Heading is longer and thus has a greater height than the short one</h1>
</header>
<div class="blogpost__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Graecum enim hunc versum nostis omnes: Suavis laborum est praeteritorum memoria.
Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium.</p>
</div>
</div>
</div>
Thank you very much in advance for your help.
Get the Fiddle: https://jsfiddle.net/4sew4x2m/
I used <table>. But you can use display:table instead.
From my point of view, if you you flex, you have to give width for that divs. In case of using tables, you don't have to- that's the advantage.
Good luck!
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
I am showing latest news in a div box in which each news is separated from others by a separator of border-bottom. Note that in the HTML I am not using any ul li; rather than I am using simply divs. The problem is that the last news div is also showing the border bottom separator. I dont know how to remove it even I have already tried :last-child selector but it's not working. I know by using ul li, the problem can be solved by :last-child, but I dont want to change my HTML. Here is a snaphost:
HTML CODE:
<div class="float_left_div posts">
<h3>Latest News</h3>
<div class="news_wrapper">
<div class="news_txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
</div>
<div class="div_separator"></div>
</div>
<div class="news_wrapper">
<div class="news_txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
</div>
<div class="div_separator"></div>
</div>
<div class="news_wrapper">
<div class="news_txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
</div>
<div class="div_separator"></div>
</div>
</div>
The demo is at:
JSFiddle
So by keeping the same HTML, how can we remove the last border of separtor?
Use CSS last-child property to remove the border.
.posts .news_wrapper:last-child .div_separator
{
border-bottom:0px;
}
DEMO
Please be aware that the the :last-child pseudo-class does not work in most browsers. If i where you i would put the border to the top (instead of bottom) and then use
.posts .news_wrapper:first-child .div_separator{border-top:0px;}
Please note first:child is recognised in most browsers.
I am trying to display a caption on my images. Caption should behave in two different ways. One is normal and second is hover. For better understanding I have added an image. check it.
Here I have already finished big part of this, But I can not display normal caption on the image correctly.
Can anybody tell me how I figure this out?
THIS is my HTML -
<div class="slideimages">
<div id="box-1" class="box">
<div class="fix-caption">
<h3>Fix Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<a href="">
<img class="image_scale" src="images/4750.jpg"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</a>
</div>
</div>
MY JS FIDDLE with CSS
Thank you.
Add the following CSS
.fix-caption {
z-index: 5;
background-color: white;
}
Your caption is there, just displaying behind the image...
Alternatively put the elements with .fix-caption lower in the DOM order, which will effectively give them a higher display order (note you'll still want a background-color).
DEMO 1 (z-index) : http://jsfiddle.net/Zfr5c/3/
DEMO 2 (DOM order): http://jsfiddle.net/Zfr5c/2/