The Code
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
is not recognized and i do not know why. I took a look with Firebug and the second child is not even listed. I simply want to set the background to the image provided in the Link you see above.
Here is the complete sourcecode.
CSS
.inner {
background-color: #000;
height: 100%;
padding: 35px;
text-align: justify;
width: 100%;
color: #fff;
}
.inner-video,
.inner-image {
padding: 0px;
}
.inner-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="inner">
This is a Test!
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="inner inner-video">
<iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe>
</div>
</div>
<div class="col-md-6">
<div class="inner">
This is a Test!
</div>
</div>
</div>
</div>
</body>
</html>
You're selecting the wrong class. :nth-child(2) will not be selected for .inner-image because it is always the only child. You should select the .image-container. :nth-child refers to itself and not its children.
.image-container:nth-child(2) .inner-image {
/* styles here */
}
The reason it is not working is because there are no siblings of .inner-image; it is contained in its own div. A solution could be:
<div class="image-container col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="image-container col-md-4">
<div class="inner inner-image">
</div>
</div>
CSS:
.image-container:nth-child(2) .inner-image{...}
Related
I'm working on a project where I'm using bootstrap flex-box. I have attached the link to the layout that I'm using. I need to change the column on the right side to downwards when using on different devices except on pc.
This is what I want to get
<div class="d-flex flex-row">
<div class="flex-column"></div>
<div class="flex-column"></div>
</div>
I think you mean this... the right-most column gets to the bottom on a size smaller than lg... you can change the behavior on smaller screens through relevant classes;
UPDATE: added code for the same effect with flex
check the code snippet below:
.leftSection div {
border: 2px solid red;
height: 150px;
background: #000;
margin-top: 5px;
}
.leftSection div:nth-child(1) {
height: 300px
}
.rightSection div {
border: 2px dotted pink;
height: 100px;
background: gray;
margin-top: 5px;
}
.flexDirection>div {
min-height: 100px;
min-width: 100px;
display: flex;
flex-direction: column;
}
.flexDirection {
display: flex;
flex-direction: row;
}
#media screen and (max-width:992px) {
.flexDirection {
flex-direction: column;
}
}
.flexDirection>div:nth-of-type(1) {
flex-grow: 2;
}
.flexDirection>div:nth-of-type(2) {
flex-grow: 1;
}
.flexDirection div {
margin-top: 5px;
}
.leftSectionFlex>div:nth-child(1) {
border: 2px solid red;
height: 300px;
width: 100%;
background: #000;
margin-top: 5px;
}
.leftSectionFlexBottom {
display: flex;
flex-direction: row!important;
}
.leftSectionFlexBottom>div {
border: 1px solid red;
height: 150px;
width: 100%;
background: #000;
}
.rightSectionFlex>div {
border: 2px dotted pink;
height: 100px;
width: 100%;
background: gray;
margin-top: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<h2>Flex</h2>
<div class="d-flex flexDirection">
<div class=" flex-column">
<div class="leftSectionFlex flex-row">
<div class=""></div>
<div class="leftSectionFlexBottom">
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>
</div>
</div>
<div class=" rightSectionFlex flex-column">
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>
</div>
<hr/>
<!--
-->
<h2> Bootstrap grid</h2>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row leftSection">
<div class="col-md-12"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="col-lg-4">
<div class="row rightSection">
<div class="col-lg-12 col-md-12"></div>
<div class="col-lg-12 col-md-12"></div>
<div class="col-lg-12 col-md-12"></div>
</div>
</div>
</div>
</div>
if you are using bootstrap-4 you can follow this structure. bootstrap 4 grid structure is all depends on flex and you can use the following structure for the devices except PC for the structure you want.
.box-content{
height: 300px;
background-color: #000;
border: 2px solid red;
margin-bottom: 20px;
}
.big-box{
height: 600px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xl-9">
<div class="box-content big-box"></div>
<div class="row">
<div class="col-4">
<div class="box-content"></div>
</div>
<div class="col-4">
<div class="box-content"></div>
</div>
<div class="col-4">
<div class="box-content"></div>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="row">
<div class="col-12">
<div class="box-content"></div>
</div>
<div class="col-12">
<div class="box-content"></div>
</div>
<div class="col-12">
<div class="box-content"></div>
</div>
</div>
</div>
</div>
</div>
You can create it purely using flex-box in following way. But I would recommend you to go for css grid for 2 dimensional layout.
Code:
.container {
display: flex;
}
.container div {
border: 1px solid #e1e1e1;
margin: 4px;
text-align: center;
}
.main {
flex: 4;
}
.sidebar {
flex: 1;
}
.abc {
display: flex;
}
.abc div {
flex: 1;
}
#media screen and (max-width: 980px) {
.container {
flex-direction: column;
}
.sidebar {
display: flex;
}
.sidebar div {
flex: 1;
}
}
<div class="container">
<div class="main">
<div>1</div>
<div class="abc">
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div class="sidebar">
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</div>
CSS Grid example:
https://gridbyexample.com
http://cssgrid.io/
Same as You want.
.demo{
background: #000;
height: 200px;
border: 2px solid red;
margin: 15px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="row">
<div class="col-md-12">
<div class="demo"></div>
</div>
<div class="col-md-4 col-sm-4">
<div class="demo"></div>
</div>
<div class="col-md-4 col-sm-4">
<div class="demo"></div>
</div>
<div class="col-md-4 col-sm-4">
<div class="demo"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="row">
<div class="col-md-12">
<div class="demo"></div>
</div>
<div class="col-md-12">
<div class="demo"></div>
</div>
<div class="col-md-12">
<div class="demo"></div>
</div>
</div>
</div>
</div>
</div>
</body>
I got my bootstrap grid to work. But I'm having trouble trying to figure out how to get it to collapse at 750px.
This is what it's suppose to look like this when larger than 750px:
Full-Size
and this is what it's suppose to look like when between 550px-750px:
Mid-Size
anything smaller than 550 the Aside and Section parts disappear (which I was able to do using #media in my CSS file)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle-A.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
#media only screen and (max-width: 550px) {
.aside {
display: none;
}
.section {
display: none;
}
}
It was easy to figure out the 550 using '#media' since I just have to not display it, but how could I use #media only screen and (max-width: 750px)to collapse it like the second picture?
550 and 750 isn't one of the standard breakpoint sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
the following would be similar to what you are looking for, but would break between the full view at smaller than 768, and then would hide the aside and section at under 576
<div class="row">
<div class="col-12">Header</div>
</div>
<div class="row">
<div class="col-12">Nav</div>
</div>
<div class="row">
<div class="col-12 col-md-9">Article</div>
<div class="col-12 col-md-3">
<div class="row">
<div class="d-none d-sm-block col-12">Aside</div>
<div class="d-none d-sm-block col-12">Section</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">footer</div>
</div>
If you really want to break at 750, and 550, you can override the breakpoints. See How to extend/modify (customize) Bootstrap 4 with SASS
I've been working on this for days and feel like I've tried everything. Not sure if it's just something small that I'm missing or if I'm completely off track. I need to position my divs on the page like in this image the code I've got so far is this.
HTML:
body {
margin: 0px;
padding: 0px;
width: 1024px;
height: 768px;
float: left;
}
.pagebanner {
height: 200px;
width: 1024px;
}
.header {
background-color: aqua;
height: 50px;
margin-top: 0px;
padding-left: 200px
}
.navbar {
background-color: brown;
float: left;
height: 768px;
}
.subheading {
background-color: chartreuse;
padding-left: 420px;
margin-top: 0px
}
.content {
background-color: crimson;
height:
}
.footer {
background-color: darkgreen;
padding: 20px;
margin-bottom: 0px
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>The Club Site</title>
</head>
<body>
<div wrapper="mainwrapper">
<div class="pagebanner"><img src="HTML Pract A/images/banner.jpg" alt="PageBanner" width="1024px" height="200px">
<div class="navbar">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="header">
<h1 class="header">The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="content">
</div>
<div class="footer">
<p>blah blah blah</p>
</div>
</div>
</body>
</html>
Any help with this would be greatly appreciated. First time trying to use HTML and I'm not having much luck with it.
In this sample i try to introduction bootstrap framework to you, bootstrap can help you to make a lot of html templates with less time, try t read documentation of this framework and you will figure out how it's easy.
Good luck with it and always before you ask something search about it,
i'm sure you will get solved questions.
This sample based on bootstrap 4 framework
.nav {
background-color: #ccc;
min-height: 500px;
}
.header {
background-color: #eee;
}
.sub-header {
background-color: yellow;
margin-bottom: 15px;
}
.item {
border: solid 1px #ccc;
text-align: center;
height: 150px;
margin-bottom: 15px;
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>The Club Site</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>header</h1>
</div>
</div>
<div class="row">
<div class="col-4 nav">
<h3>nav</h3>
</div>
<div class="col-8">
<div class="row">
<div class="col header">
<h3>The Club Site</h3>
</div>
</div>
<div class="row">
<div class="col sub-header">
<h6>sub header</h6>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="item">
<h4>item 1</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 2</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 3</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 4</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 5</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 6</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<header>Header</header>
<div id="main">
<article>
<div class="my-container">
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
</div>
</article>
<nav>Nav</nav>
</div>
<footer>Footer</footer>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
order: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
#main > nav {
background: #D7E8D4;
order: 3;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
.my-container {
display: flex;
flex-flow: row wrap;
align-content: flex-start; /* pack wrapping lines to the top */
width: 100%;
height: 300px;
}
.image {
flex: 0 0 30%;
margin: 5px;
}
img {enter code here
max-width: 100%;
}
</style>
Note: try to learn instead copy & paste it, to start try to write codes again.
I change and also add some css class in your codes, so pay-attention to different between old version and new css and html files.
Description: for start modeling your style you need to separate all partsyou need; for example here we need:
Header
Header > image
main > nav
main > content
main > content > header
main > content > subheading
main > content > area
main > content > area > items
main > content > area > items > item
etc...
and then start to html them, insert your div or what you want, and last step is manage them with css.
body {
margin: 0px;
padding: 0px;
}
.mainwrapper {
width: 1024px;
margin: 0 auto;
}
.pagebanner {
height: 250px;
margin: 0;
}
.pagebanner img {
width: 100%;
height: 100%;
}
.main {
margin: 0;
}
.navbar {
background-color: brown;
min-height: 500px;
width: 20%;
float: left;
}
.navbar li {
list-style: none;
margin-bottom: 15px;
}
.navbar a {
color: #fff;
font-size: 20px;
}
.content {
width: 80%;
float: left;
padding: 0;
min-height: 500px;
}
.header {
background-color: #000;
text-align: center;
}
.header h1 {
color: #fff;
margin: 0;
}
.subheading {
background-color: #f8d631;
text-align: center;
}
.subheading h2 {
background-color: #f8d631;
margin: 0;
}
.area h3 {
margin: 0;
text-align: center;
}
.item {
width: 33.33333333333333%;
float: left;
text-align: center;
}
.item div {
padding: 0 15px;
}
.item img {
height: 150px;
width: 100%;
}
.footer {
background-color: darkgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="mainwrapper">
<div class="pagebanner">
<img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
</div>
<div class="main">
<div class="navbar">
<ul>
<li>
Information
</li>
<li>
Home
</li>
</ul>
</div>
<div class="content">
<div class="header">
<h1>The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="area">
<h3>discounted Items</h3>
<div class="items">
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am in a bit of a pickle trying to vertically align a div. What I aim to achieve is to have 3 divs with height: 100% and width:33% to have a centered content div. Can anyone help? Here is the code:
.wrapper {
height: 100%;
width: 100%;
}
.window {
width: 33%;
float: left;
background-color: #666;
}
.windowContent {
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
</div>
</body>
</html>
Try this example
<div class="wrapper">
<div class="window">
<div class="windowContent">
1
</div>
</div>
<div class="window">
<div class="windowContent">
2
</div>
</div>
<div class="window">
<div class="windowContent">
3
</div>
</div>
</div>
CSS
.wrapper
{
height: 100%;
width: 100%;
display: flex;
}
.window
{
width: 100%;
min-height: 200px;
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}
.windowContent
{
background-color: #000;
color: #fff;
}
Demo - https://jsfiddle.net/xa3v1c3o/
So the title pretty much explains my problem. For now, I have my image placed at the top of the column and at the same time I need it to be at the bottom. How can I do this?
My Codepen
HTML
<div class="content">
<div class="row">
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 200px;
}
Flexbox can do that:
.content {
padding: 0 35px;
}
.row {
display: flex; /* columns now equal height */
}
.first-column {
border: 1px solid;
height: 200px;
flex: 10; /* replicates md-10 */
}
.back-to-blog {
flex: 2; /* replicates md-2 */
display: flex;
flex-direction: column; /* sets directionality */
justify-content: space-between; /* separates elements across direction */
}
a {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="row">
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
</a>
<a href="/">
<img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
</a>
</div>
</div>
</div>
</div>
Here is another way if you want to stick into Bootstrap column classes:
HTML:
<div class="content">
<div class="row">
<div class="col-xs-2 col-sm-10 col-md-10 first-column">aaa</div>
<div class="col-xs-2 col-sm-2 col-md-2 back-to-blog">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</div>
</div>
</div>
</div>
CSS:
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 200px;
}
.back-to-blog{
height: 200px;
}
.btm-link{
position: absolute;
bottom: 0;
}
Codepen:
http://codepen.io/anon/pen/xZyGoQ