I have a webpage containing rows of news tidbits with associated thumbnail images.
<div class="news-list">
<div class="news-item">
<div class="news-image">
<img class="news-image" src="penguin.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Lorem ipsum dolor sit ... sapientem honestatis.
</p>
</div>
</div>
<div class="news-item">
<div class="news-image">
<img class="news-image" src="walrus.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Mel et dolores luptatum ... dicta alienum.
</p>
</div>
</div>
<div class="news-item">
...
</div>
I currently have the page styled with all the images on the left and the descriptions on the right, via the CSS
div.news-list { display: table; }
div.news-item { display: table-row; }
div.news-image { display: table-cell; }
div.news-info { display: table-cell; }
But I'd like to change this layout to alternate between picture on left and picture on right, as I show in the mockup below:
I am having trouble identifying a CSS solution to achieve this layout that doesn't require me to alternate the order of the text tidbits and the images in the actual markup. (I'm happy to put either the images or the text first as necessary, but it ought to be consistent through the whole HTML.)
Any tips?
For older-browser support, you could add even and odd classes.
img.news-image {
background: #dadada;
height: 50px;
width: 50px;
}
p.news-info {
margin-top: 0;
}
.news-item {
clear: both;
border-top: 1px solid #dadada;
}
.odd div.news-info {
float: right;
}
.odd div.news-image {
float: left;
}
.even div.news-info {
float: left;
}
.even div.news-image {
float: right;
}
<div class="news-list">
<div class="news-item odd">
<div class="news-image">
<img class="news-image" src="penguin.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Lorem ipsum dolor sit ... sapientem honestatis.
</p>
</div>
</div>
<div class="news-item even">
<div class="news-image">
<img class="news-image" src="walrus.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Mel et dolores luptatum ... dicta alienum.
</p>
</div>
</div>
</div>
For modern browsers, you could use css pseudo classes.
img.news-image {
background: #dadada;
height: 50px;
width: 50px;
}
p.news-info {
margin-top: 0;
}
.news-item {
clear: both;
border-top: 1px solid #dadada;
}
.news-item:nth-child(odd) div.news-info {
float: right;
}
.news-item:nth-child(odd) div.news-image {
float: left;
}
.news-item:nth-child(even) div.news-info {
float: left;
}
.news-item:nth-child(even) div.news-image {
float: right;
}
<div class="news-list">
<div class="news-item">
<div class="news-image">
<img class="news-image" src="penguin.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Lorem ipsum dolor sit ... sapientem honestatis.
</p>
</div>
</div>
<div class="news-item">
<div class="news-image">
<img class="news-image" src="walrus.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Mel et dolores luptatum ... dicta alienum.
</p>
</div>
</div>
</div>
Related
i'm working on a school project where im supposed to do a portfolio. im trying to make a grid with pictuers and information next to that picture about stuff i have worked on. I'm trying to get the textbox to be as big as the picture. I have tried jusing flexbox and a lot of other stuff but can't get it to work. is there someone who can help me?
*{
box-sizing: border-box;
}
body{
background-color: #f4f4f4;
padding: 20px;
font-family: Arial;
}
.container {
max-width: 1600px;
margin: 0 auto;
}
.row {
margin:8px-16px;
}
.row,
.row > .column {
padding:2px 0px;
}
.column {
float:left;
width:50%;
}
.row:after {
content:"";
display:table;
clear:both;
}
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width:100%;
}
}
<div class="container">
<div class="row">
<div class="column">
<div class="content">
<h3>Hemsida 1</h3>
<p>Lorem ipsum.</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="atleta1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="atleta1.jpg" style="width:100%">ยด
</div>
</div>
<div class="column">
<div class="content">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="atleta1.jpg" style="width:100%">
</div>
</div>
</div>
</div>
You have complicated the layout very much. How do you like this layout option?
Each line is divided into two parts of 50%.
A small bonus: with small screens, due to the Flexbox property order, the description block is located above the picture.
P.S. Of course, this is not the final option. You can continue to improve it
Result
* {
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
padding: 20px;
font-family: Arial;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.item {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
;
padding: 10px;
background-color: white;
}
.item__desc {
flex-basis: 50%;
}
.item__pic {
flex-basis: 50%;
}
.item_img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.item {
flex-direction: column;
width: 100%;
}
.item__desc {
order: -1;
}
}
<ul class="container">
<li class="item">
<div class="item__desc">
<h3>Hemsida 1</h3>
<p>Lorem ipsum.</p>
</div>
<div class="item__pic">
<img class="item_img" src="https://picsum.photos/536/354"></div>
</li>
<li class="item">
<div class="item__pic">
<img class="item_img" src="https://picsum.photos/536/354">
</div>
<div class="item__desc">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
</li>
<li class="item">
<div class="item__desc">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
<div class="item__pic">
<img class="item_img" src="https://picsum.photos/536/354"></div>
</li>
</ul>
And same code on CodePen
will be enough for homework. Edit and improve codes
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
.box{
margin-bottom:20px;
background: #3498db;
height:500px;
}
.box-left{
width:50%;
float:left;
height:500px;
padding:50px;
}
.box-left h3{
margin-bottom: 15px;
}
.box-right{
width:50%;
float:right;
height:500px;
}
.box-right img{
width:100%;
height:100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="box-left">
<h3>Head</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quas a velit. Aut nihil, modi nobis corporis eveniet ratione aperiam repellat maiores corrupti quidem ipsam animi officiis, fugit quasi rem!</p>
</div>
<div class="box-right">
<img src="https://i.ibb.co/S6PdtwP/69037904-2403297686584790-2753464427788369920-n.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-left">
<h3>Head</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quas a velit. Aut nihil, modi nobis corporis eveniet ratione aperiam repellat maiores corrupti quidem ipsam animi officiis, fugit quasi rem!</p>
</div>
<div class="box-right">
<img src="https://i.ibb.co/S6PdtwP/69037904-2403297686584790-2753464427788369920-n.jpg" alt="">
</div>
</div>
</body>
</html>
live demo
codepen live demo
I am a new web designer and I am struggling right now in designing unordered list of icons to be displayed horizontally without the bullet.
Here's my html code:
<section id="call-to-action" class="section-padding">
<div data-velocity="-.3" class="overlay-bg cta-bg"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="cta-text text-center">
<h2>Call to action</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius labore itaque, nam eaque aut repellat ratione nesciunt explicabo numquam sit.</p>
<div class="partners">
<ul style="list-style: none;">
<li>
<img class="img-responsive"
title="Illustrator" alt="Illustrator"
src="../Assets/img/software/illustrator_icon.png" />
<img class="img-responsive"
title="Photoshop" alt="Photoshop"
src="../Assets/img/software/photoshop_icon.png" />
<img class="img-responsive"
title="InDesign" alt="InDesign"
src="../Assets/img/software/inDesign_icon.png" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End call to action -->
CSS Code:
#call-to-action {
position: relative;
}
.section-padding {
padding: 50px 0;
}
.partners ul {
list-style: none;
margin: 0;
padding: 0;
}
.partners ul li {
display: inline-block;
float: left;
width: 20%;
}
Here's the link to JSFiddle that includes all of my code: https://jsfiddle.net/nta1qov2/
Could you please tell me how I can do this?
you can try this one:
#call-to-action {
position: relative;
}
.section-padding {
padding: 50px 0;
}
.partners ul {
list-style: none;
margin: 0;
padding: 0;
}
.partners ul li {
display: inline-block;
float: left;
/*width:20%; remove width 20% ;*/
width: 100%; /* add width :100%;*/
}
DEMO HERE
Add this css code":
.partners ul li {
position: absolute;
text-align:center;
display: inline-block;
width: 100%;
}
[UPDATED DEMO HERE]2
If you wish to do it through only twitter-bootstrap, then the following code illustrates the same:
HTML:
<div class="form-group">
<div class="pull-left control-label">
<img src="../img1.jpg" />
</div>
<div class="pull-left control-label">
<img src="../img2.jpg" />
</div>
<div class="pull-left control-label">
<img src="../img3.jpg" />
</div>
</div>
<div class="clearfix"></div>
Here, pull-left, is to make unordered horizontal list.
control-label for right indentation.
form-group for vertical indentation.
clearfix for nullifying the float as a result of pull-left after completion.
Demo is like this : https://jsfiddle.net/oscar11/9syLgw9m/3/
My code is like this :
<table border="2" width="650px">
<tr>
<td>
<div style="float:left">
<!-- <p style="text-align:center;"> -->
<img style="width:200px; height:140px; margin:9px;" src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" />
<!-- </p> -->
</div>
<div style="float:left">
<div class="hotel">Nana hotel</div>
<div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.</div>
<div class="price" style="">
<div style="float:left;color:#c80000;font-size:16px;">Price : <b>123</b> / night</div>
<div style="float:right;"><button type="button" class="btn blue more">Detail</button> <button type="button" class="btn blue more">More</button></div>
</div>
</div>
</td>
</tr>
</table>
I want to show class "price" at the very bottom . Actually it can use the margin, but the problem is the class description, class description is the dynamic
How to make class "price" at the very bottom?
Thank you
First, please don't use <table> when you're not using tabular data.
That said, you can add padding-bottom to your .description and set the .price to position: absolute; and position it in the left bottom corner. The padding-bottom is the space that the price comes in, so play around to your needs. See my example below.
table {
position: relative;
}
.description {
padding-bottom: 20px;
}
.price {
position: absolute;
bottom: 0;
left: 0;
}
<table border="2" width="650px">
<tr>
<td>
<div style="float:left">
<!-- <p style="text-align:center;"> -->
<img style="width:200px; height:140px; margin:9px;" src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" />
<!-- </p> -->
</div>
<div style="float:left">
<div class="hotel">Nana hotel</div>
<div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, modi ipsum natus provident molestias magni culpa ab cumque, quo, deleniti fugiat adipisci sequi suscipit
porro maiores! Quod quibusdam modi consectetur!</div>
<div class="price" style="">
<div style="float:left;color:#c80000;font-size:16px;">Price : <b>123</b> / night</div>
<div style="float:right;">
<button type="button" class="btn blue more">Detail</button>
<button type="button" class="btn blue more">More</button>
</div>
</div>
</div>
</td>
</tr>
</table>
Edit
Here's a better solution, without using tables. Check out the code below and play around with it to your needs. display: flex; is the way to turn your 'design' easily in to what you want.
Please consider that in the future you need to do your own work. We're not employees ready to do whatever you want.
.description {
padding-bottom: 20px;
}
.container {
width: 650px;
border: 2px solid black;
display: flex;
flex-flow: row wrap;
}
.image {
width: 200px;
flex-basis: 200px;
}
.image img {
width: 200px;
}
.content {
flex-basis: calc(100% - 200px);
padding-left: 10px;
box-sizing: border-box;
}
.info-container {
display: flex;
flex-flow: row-wrap;
justify-content: flex-start;
}
.price {
color: #c80000;
font-size: 16px;
}
.buttons {
margin-left: auto;
}
<div class="container">
<div class="image">
<img src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" alt="Chelsea" />
</div>
<div class="content">
<div class="title">Nana hotel</div>
<div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.</div>
<div class="info-container">
<div class="price">Price : <strong>123</strong> / night</div>
<div class="buttons">
<button type="button" class="btn blue more">Detail</button>
<button type="button" class="btn blue more">More</button>
</div>
</div>
</div>
</div>
html code:
<body>
<div id="grid-main_content">
<div class="block ">
<div class="column column-1">
<p>Esse ingeniis instituendarum...</p>
</div>
</div>
<div class="block">
<div class="column column-2">
<p>Quis voluptate o comprehenderit non fugiat ullamco..</p>
</div>
<div class="column column-2">
<p>Irure an arbitror de appellat fugiat offendit,..</p>
</div>
<span class="clear-both"></span>
</div>
<div class="block">
<div class="column column-3">
<p>Cernantur est possumus,..</p>
</div>
<div class="column column-3">
<p>Multos quamquam deserunt ea minim sed consequat,..</p>
</div>
<div class="column column-3">
<p>Eiusmod illum mandaremus quo appellat...</p>
</div>
<span class="clear-both"></span>
</div>
<div class="block">
<div class="column column-4">
<p>Duis arbitror sed dolor sint...</p>
</div>
<div class="column column-4">
<p>Eram expetendis doctrina ut offendit ipsum et deserunt familiaritatem,..</p>
</div>
<div class="column column-4">
<p>Cupidatat aut elit appellat...</p>
</div>
<div class="column column-4">
<p>Eu irure summis...</p>
</div>
<span class="clear-both"></span>
</div>
</div>
</body>
css:
.block {
border: 1px solid black;
margin: 2px;
}
.column {
padding: 5px;
margin: 5px;
}
.column-1 {
background: lightblue;
width: 100%;
}
.column-2 {
background: lightgreen;
width: 48%;
float: left;
}
.column-3 {
background: yellow;
width: 32%;
float: left;
}
.column-4 {
background: red;
width: 23%;
float: left;
}
And it looks like this:
As you can see, all of the contents of each blocks are not equal in length and are not centered because I want the block (columns) to be responsive to the width. How can I equally divide them into column-1 having full width, column-2 having 1/2 of the width, column-3 having 1/3 of the width and column-4 with a width of 1/4 width? And be centered horizontally.
css:
body, html{
margin:0;
padding:2px;
}
*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.block {
border: 1px solid black;
padding: 2px;
float:left;
width:100%;
}
.column {
padding: 5px;
}
.column-1 {
background: lightblue;
width: 100%;
}
.column-2 {
background: lightgreen;
width: 50%;
float: left;
}
.column-3 {
background: yellow;
width: 33.333%;
float: left;
}
.column-4 {
background: red;
width: 25%;
float: left;
}
js:
$(function(){
equalHeight();
});
$(window).resize(function(){
equalHeight();
});
function equalHeight(){
var maxHeight = 0;
$(".column-4").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".column-4").height(maxHeight);
$(".column-3").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".column-3").height(maxHeight);
$(".column-2").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".column-2").height(maxHeight);
}
find fiddle dmeo
flexbox can do that.
With just this:
.block {
display: flex;
}
.column {
flex:1;
}
Suppport is IE10 and up.
.block {
border: 1px solid black;
margin: 2px;
display: flex;
}
.column {
padding: 5px;
margin: 5px;
flex:1;
}
.column-1 {
background: lightblue;
}
.column-2 {
background: lightgreen;
}
.column-3 {
background: yellow;
}
.column-4 {
background: red;
}
<body>
<div id="grid-main_content">
<div class="block ">
<div class="column column-1">
<p>Esse ingeniis instituendarum...</p>
</div>
</div>
<div class="block">
<div class="column column-2">
<p>Quis voluptate o comprehenderit non fugiat ullamco..</p>
</div>
<div class="column column-2">
<p>Irure an arbitror de appellat fugiat offendit,..</p>
</div>
</div>
<div class="block">
<div class="column column-3">
<p>Cernantur est possumus,..</p>
</div>
<div class="column column-3">
<p>Multos quamquam deserunt ea minim sed consequat,..</p>
</div>
<div class="column column-3">
<p>Eiusmod illum mandaremus quo appellat...</p>
</div>
</div>
<div class="block">
<div class="column column-4">
<p>Duis arbitror sed dolor sint...</p>
</div>
<div class="column column-4">
<p>Eram expetendis doctrina ut offendit ipsum et deserunt familiaritatem,..</p>
</div>
<div class="column column-4">
<p>Cupidatat aut elit appellat...</p>
</div>
<div class="column column-4">
<p>Eu irure summis...</p>
</div>
</div>
</div>
</body>
Here's a fiddle http://jsfiddle.net/gx9hfeLq/1/ that helps you with setting equal widths. It uses border-box so you won't have your boxes bumping to the next line when you use exactly half (50%), third (33.3%) etc. The padding takes up space inside the boxes making them fit and stretch 100% across:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I'm trying to create in HTML a layout like in the image below:
I've a fixed image, (I know its size), then I need to place some multiline text, then another image, of variable size.
All the three elements should be aligned vertically i.e. the vertical centre of all them should be the same.
If it matters, this page should be shown on mobile devices.
I've checked all the related questions on stackoverflow, and tried all the possibilities I see, but with no luck.
You can use display table and play with it... not sure if you want the same layout on mobile, but you can do something like this:
<div class="content-wrapper">
<div class="col four">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div class="col four">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col four">
<img src="http://lorempixel.com/200/200/" alt="">
</div>
</div>
and the following css:
*{ box-sizing: border-box; }
.content-wrapper{
display-table;
max-width:800px;
}
.col{
display:table-cell;
vertical-align:middle;
padding:10px;
}
.four{
width: 33.33%
}
If you want a different layout on mobile you should problably change the display table to display relative and the with of each one of the col to 100%.
Check this example: https://jsfiddle.net/m8zqm4co/10/
You can do something slightly complicatedly simple for this:
.three-col {text-align: center; vertical-align: middle; display: table; width: 100%;}
.three-col .running-text {vertical-align: middle; display: table-cell; text-align: center;}
.three-col .running-text p {display: inline-block;}
<div class="three-col">
<div class="running-text">
<img src="http://placehold.it/100x100" alt="" class="fixed-img">
</div>
<div class="running-text">
<p>Poda Venna</p>
</div>
<div class="running-text">
<img src="http://placehold.it/200x200" alt="" class="fixed-img">
</div>
</div>
<div class="three-col">
<div class="running-text">
<img src="http://placehold.it/100x100" alt="" class="fixed-img">
</div>
<div class="running-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam modi cumque ratione voluptatem sunt voluptatibus veniam esse placeat amet labore cupiditate, mollitia eaque hic earum officia voluptatum et, obcaecati consequuntur.</p>
</div>
<div class="running-text">
<img src="http://placehold.it/200x200" alt="" class="fixed-img">
</div>
</div>
HTML, BODY{
height: 100%;
}
.wrap{
border: 1px solid red;
position: relative;
height: 100%;
}
.wrap img:nth-of-type(1), .wrap img:nth-of-type(2), .wrap p{
top: 50%;
transform: translateY(-50%);
position: relative;
}
.wrap img:nth-of-type(1){
position: absolute;
left: 10px;
}
.wrap img:nth-of-type(2){
display: inline-block;
vertical-align: middle;
width: 30%;
float: right;
}
.wrap p{
float: left;
width: 40%;
margin: 0 10px 0 25%;
text-align: center;
}
<div class="wrap">
<img src="http://lorempixel.com/100/100/nature/" alt="">
<img src="http://lorempixel.com/200/200/nature/" alt="">
<p>0s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially un</p>
</div>
Lets suppose you have a div where both images and the text goes inside it.
Try this out:
#container {
height: 300px;
line-height: 300px; /* same size as height */
display: inline-block;
}
.inner img{
display: inline-block;
vertical-align: middle;
}
<div id="container">
<div class="inner">
<img src="http://placehold.it/100x100">
Example Test
<img src="http://placehold.it/200x200">
</div>
</div>