I wanted to create a responsive table using plain css with two columns and sub tables with columns.
<div class="table">
<div class="column main-column">
<h3>Send Security Code</h3>
<div class="table">
<div class="column">
<span>Voice Primary</span>
<span>Text Primary</span>
</div>
<div class="column">
<span>Voice Secondary</span>
<span>Text Secondary</span>
</div>
</div>
<button>Send Code</button>
</div>
<div class="column column-border main-column">
<h3>Send password via email</h3>
<button>Send Email</button>
</div>
</div>
here is the link for plnkr with css based solution to create a responsive tables
and columns
https://plnkr.co/edit/TmT5lEaXs1LWTEOEEp1w?p=preview
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.table{
width:100%;
}
.column{
width: 100%;
}
#media (min-width: 500px) {
.column{
display: inline-block;
width: 49%;
vertical-align: top;
}
.column-border{
border-left: 1px dotted #996;
}
}
.column span{
display:block;
padding: 10px;
}
.column button, .column h3{
margin-left: 10px;
}
.main-column{
height: 200px;
}
</style>
</head>
<body>
<div class="table">
<div class="column main-column">
<h3>Send Security Code</h3>
<div class="table">
<div class="column">
<span>Voice Primary</span>
<span>Text Primary</span>
</div>
<div class="column">
<span>Voice Secondary</span>
<span>Text Secondary</span>
</div>
</div>
<button>Send Code</button>
</div>
<div class="column column-border main-column">
<h3>Send password via email</h3>
<button>Send Email</button>
</div>
</div>
</body>
</html>
Related
I have 3 images which are not the same size in Desktop format, how do I get the same size? Then in mobile format I would like it to overlap by taking the entire width.
I tried with flex-direction: column but it doesn't work. I use flexbox for my code.
.background-color {
background-color: #f05f40;
}
h2 {
text-align: center;
padding-top: 2%;
margin-top: 0;
}
.row {
display: flex;
width: 100%;
text-align: center;
}
.content {
justify-content: space-around;
padding: 0 10px;
}
img {
height: 200px;
object-fit: cover;
object-position: center center;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
<div class="background-color">
<h2 id="projets">Mes Projets</h2>
<div class="row">
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/pain.jpg" alt="Bred" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/catmash.jpg" alt="catmash" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="snakegame" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
You are add flex-direction: column inside .content which doesn't have display: flex. Instead you need to add in .row which wraps all three contents
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
Take a look at this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>3 Images responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%">
</div>
</div>
</div>
</div>
</body>
</html>
You would achieve the same size for all images by setting the width and height to the same value. I normally just resize all images in a image editing software such as Photoshop and then just import them. Saves you the work with sizing in CSS.
Here is what I have
And here is what I want to accomplish
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div>
</body>
</html>
You need to try like this-
Just use this below script -
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display:inline-flex;
vertical-align:top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class=" grid js-masonry">
<div style="height:200px;" class="card grid-item">1</div>
<div style="height:240px;" class="card grid-item">2</div>
<div style="height:200px;" class="card grid-item">3</div>
<div style="height:270px;" class="card grid-item">4</div>
<div style="height:300px;" class="card grid-item">5</div>
<div style="height:250px;" class="card grid-item">6</div>
</div>
import bootstrap and format the divs using col-md- in rows. i believe you have that css.
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-4">
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div></div>
<div class="col-md-4">
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div></div>
<div class="col-md-4">
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div></div>
</div>
</body>
</html>
This is not possible using plain CSS.
You can either change your HTML to have a wrapping "column" div for every two (in your case) .card elements, or alternatively there are lots of javascript plugins that you can easily achieve this layout by manipulating the HTML dynamically... Check http://masonry.desandro.com/ as one good example
This is the quick answer; but for DIVs with dynamic heights, I beleive it's better using a jQuery plugin (e.g. masonary as Ronen mentioned).
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px; top:-40px; position:relative;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px; top:-40px; position:relative;" class="card">6</div>
</body>
</html>
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
I have been hitting a area which I dont belive is coverd in the bootstrap documentation which is to add margins to col in bootstrap.
To fix this I used the following code but the issue is the centre box is always smaller then the outer two.
Does anyone have a fix to this?
HTML
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="marginBoxes noMarginLeft">
<div class="clearBoth"></div>
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="marginBoxes">
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="marginBoxes noMarginRight">
</div>
</div>
</div>
CSS
.marginBoxes {
margin-left: 20px;
margin-right: 20px;
}
.noMarginLeft{
margin-left:0 !important;
}
.noMarginRight{
margin-right:0 !important;
}
Live Preview #
As suggested in the comments, I'd leave Bootstrap alone and make the boxes separate, possibly something along these lines:
#lightBlueFix { background-color: blue; }
#lightGrey { background-color: grey; }
#lightYellow { background-color: yellow; }
.bannerBox {
margin-left: 20px;
margin-right: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="bannerBox">
Blue
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="bannerBox">
Grey
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="bannerBox">
Yellow
</div>
</div>
</div>
Right now, I have 3 divs Content1, Content2, Content3
I want to add a simple stylized rule to separate the content in each. Here is the code that I am working with.
HTML
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
I want to add a Horizontal Rule inbetween Content1 and Content2 and between Content2 and Content3.
I have included an image so you can see exactly what I mean.
Thanks!
Don't use <hr> for this, as it's chiefly a semantic element rather than presentational. A bottom border is ideal for this. E.g. http://codepen.io/pageaffairs/pen/pjbkA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {width: 500px; padding-bottom: 10px; }
#Content1, #Content2 {border-bottom: 3px solid #4588ba; margin-bottom:10px;}
div p {background: #4588ba; line-height: 150px; font-size: 2em; font-family: sans-serif; color: white; margin: 0; padding-left: 30px;}
</style>
</head>
<body>
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
</body>
</html>
You can use an hr tag to separate your div elements
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<hr />
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<hr />
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
Demo
You can reset the default 3d style of an hr tag using solid border
hr {
margin: 20px 0;
border: 1px solid #f00;
}
if you don't want to use hr tag. you can bound every div with another div and decorate it. Like this:
See demo at : jsfiddle
<div id="Content1" class="divOutside">
<div class="divInside">
<strong>Content1</strong>
</div>
</div>
<div id="Content2" class="divOutside">
<div class="divInside">
<strong>Content2</strong>
</div>
</div>
<div id="Content3" class="divOutside last">
<div class="divInside">
<strong>Content3</strong>
</div>
</div>
And the Css:
.divOutside {
border-bottom:2px blue solid;
width:200px;
padding-bottom:5px;
padding-top:5px;
}
.divInside {
width:200px;
height:80px;
color:#fff;
background-color:blue;
}
.last {
border-bottom:0;
}
Try like this
demo
HTML
<div id="Content1" class="content">
<p><strong>Content1</strong></p>
</div>
<div class="break"></div>
<div id="Content2" class="content">
<p><strong>Content2</strong></p>
</div>
<div class="break"></div>
<div id="Content3" class="content">
<p><strong>Content3</strong></p>
</div>
CSS
.content {
padding:20px;
background:#3E87BC;
font-size: 24px;
margin-bottom:10px;
font-family: Arial;
color: #FFF;
}
.break {
background: #3E87BC;
height: 2px;
margin: 5px 0 10px 0;
width: 100%;
}
<div id="Content1" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content1</strong></p>
</div>
<div id="Content4" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content2" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content2</strong></p>
</div>
<div id="Content5" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content3" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content3</strong></p>
</div>
<div id="Content6" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>