http://imgur.com/IAHUR4U
I need to style a grid like above. The only thing I have a problem with is the 2 boxes on top of each other within the same row. Has anyone any suggestions on how to do this ?
Cheers!
css:
{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }
.row .one { width: 8.33% }
.row .two { width: 16.66% }
.row .three { width: 25% }
.row .four { width: 33.33% }
.row .five { width: 41.66% }
.row .six { width: 50% }
.row .seven { width: 58.33% }
.row .eight { width: 66.66% }
.row .nine { width: 75% }
.row .ten { width: 83.33% }
.row .eleven { width: 91.66% }
.row .twelve { width: 100% }
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
HTML:
<div class="row">
<div class="three columns">
...
</div>
<div class="nine columns">
...
</div>
</div>
<div class="row">
<div class="six columns">
...
</div>
<div class="six columns">
this is the div i need to split up into 2 divs on top of eachother
</div>
</div>
I would use float:right, and clear:right on the one on the bottom.
Related
I'm trying to build a simple grid system using SASS:
app.scss:
.row,
.col {
box-sizing: border-box;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.col {
position: relative;
float: left;
}
.col + .col {
margin-left: 1.6%;
}
.col-1 {
width: 6.86666666667%;
}
.col-2 {
width: 15.3333333333%;
}
.col-3 {
width: 23.8%;
}
.col-4 {
width: 32.2666666667%;
}
.col-5 {
width: 40.7333333333%;
}
.col-6 {
width: 49.2%;
}
.col-7 {
width: 57.6666666667%;
}
.col-8 {
width: 66.1333333333%;
}
.col-9 {
width: 74.6%;
}
.col-10 {
width: 83.0666666667%;
}
.col-11 {
width: 91.5333333333%;
}
.col-12 {
width: 100%;
}
#media only screen and (max-width: 550px) {
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: auto;
float: none;
}
.col + .col {
margin-left: 0;
}
}
// Body
body {
font-family: $default-font;
font-weight: normal;
font-size: 13px;
color: $text-default;
}
.app {
width: auto;
height: 100%;
border-style: outset;
border-width: 1px;
padding: 5px;
}
header-container.scss:
#import '../App/App.scss';
.header-container {
border-style: outset;
border-width: 1px;
border-radius: 5px;
padding: 10px;
}
My HTML:
<header className='header-container'>
<div className='row'>
<div className='col-2'>
<p>Person 1</p>
</div>
<div className='col-2'>
<p>Person 2</p>
</div>
</div>
</header>
Person 1 is appearing above Person 2, not at the side as I expect the grid to work. I cannot find out what's wrong, but I think I'm missing something basic.
You're missing .col on the column elements
.row, .col {
box-sizing: border-box;
}
.row:before, .row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.col {
position: relative;
float: left;
}
.col + .col {
margin-left: 1.6%;
}
.col-1 {
width: 6.86666666667%;
}
.col-2 {
width: 15.3333333333%;
}
.col-3 {
width: 23.8%;
}
.col-4 {
width: 32.2666666667%;
}
.col-5 {
width: 40.7333333333%;
}
.col-6 {
width: 49.2%;
}
.col-7 {
width: 57.6666666667%;
}
.col-8 {
width: 66.1333333333%;
}
.col-9 {
width: 74.6%;
}
.col-10 {
width: 83.0666666667%;
}
.col-11 {
width: 91.5333333333%;
}
.col-12 {
width: 100%;
}
#media only screen and (max-width: 550px) {
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: auto;
float: none;
}
.col + .col {
margin-left: 0;
}
}
// Body
body {
font-family: $default-font;
font-weight: normal;
font-size: 13px;
color: $text-default;
}
.app {
width: auto;
height: 100%;
border-style: outset;
border-width: 1px;
padding: 5px;
}
.header-container {
border-style: outset;
border-width: 1px;
border-radius: 5px;
padding: 10px;
}
<header class='header-container'>
<div class='row'>
<div class='col col-2'>
<p>Person 1</p>
</div>
<div class='col col-2'>
<p>Person 2</p>
</div>
</div>
</header>
For now, your col-2 class doesn't make your div float:left;
Two possibilities:
You add the class col to your divs
You set all the class starting with col to float:left; You can do it this way: [class^="col"] { float:left; }
Well, I hadn't seen that you are using className and not class, so you can change it accordingly: [className^="col"] { float:left; }
I've been struggling to arrange this layout of images.
I've been thinking of using flexbox and i'm pretty sure it's doable with it but I can't manage to find the right way to do it.
If anyone is able to help me i'll be glad.
Here is the layout with each square being an img in a link tag :
img layout
The space between each img must be the same, that's why I've been thinking of using flexbox.
Thanks in advance,
j
Edit: I uploaded what I've been working on :
http://163.172.185.65/flexboxuse.html
Flexbox example with percentage:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.sidebar {
background: limegreen;
height: 70%;
width: 30%;
}
.rightCont {
height: 70%;
width: 70%;
display: flex;
flex-flow: row wrap;
}
.red {
background: red;
height: calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.blue {
background: blue;
height: calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.yellow {
background: yellow;
height: 50%;
width: calc(50% - 10px);
margin-left: 10px;
}
.sky {
background: cyan;
height: 50%;
width: calc(50% - 10px);
margin-left: 10px;
}
.bottom {
background: violet;
height: calc(30% - 10px);
width: 100%;
margin-top: 10px;
}
<div class="container">
<div class="sidebar"></div>
<div class="rightCont">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="sky"></div>
</div>
<div class="bottom"></div>
</div>
You could approach this with flexbox, but even just float:left will do the trick.
Working Example:
section {
width: 312px;
}
div {
float: left;
width: 100px;
height: 100px;
margin: 0 6px 6px 0;
background-color: gray;
}
div:nth-of-type(1) {
height: 206px;
}
div:nth-of-type(6) {
width: 312px;
margin-bottom: 0;
}
div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}
div:nth-of-type(1) {
background-color: lime;
}
div:nth-of-type(2) {
background-color: red;
}
div:nth-of-type(3) {
background-color: blue;
}
div:nth-of-type(4) {
background-color: yellow;
}
div:nth-of-type(5) {
background-color: cyan;
}
div:nth-of-type(6) {
background-color: magenta;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Second approach (this time with element heights relative to the height of the viewport)
section {
width: calc(100vh + 12px);
}
div {
float: left;
width: 33vh;
height: 33vh;
margin: 0 6px 6px 0;
background-color: gray;
}
div:nth-of-type(1) {
height: calc(66vh + 6px);
}
div:nth-of-type(6) {
width: calc(100vh + 12px);
margin-bottom: 0;
}
div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}
div:nth-of-type(1) {
background-color: lime;
}
div:nth-of-type(2) {
background-color: red;
}
div:nth-of-type(3) {
background-color: blue;
}
div:nth-of-type(4) {
background-color: yellow;
}
div:nth-of-type(5) {
background-color: cyan;
}
div:nth-of-type(6) {
background-color: magenta;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Here is a working example using flex and percentage width:
html,body{
border:0;
margin:0;
height:100%;
}
#wrap
{
width:300px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#container
{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
height:70%;
}
#green
{
background-color:chartreuse;
width:30%;
order:0;
}
#red
{
background-color:red;
height:48%;
}
#blue
{
background-color:blue;
height:48%;
}
#yellow
{
background-color:yellow;
height:49%;
}
#aquamarine
{
background-color:aqua;
height:49%;
}
#purple
{
background-color:purple;
height:28%;
}
.col
{
width:32%;
display:flex;
flex-direction:column;
justify-content:space-between;
}
<div id="wrap">
<div id="container">
<div id="green"></div>
<div class="col">
<div id="red"></div>
<div id="yellow"></div>
</div>
<div class="col">
<div id="blue"></div>
<div id="aquamarine"></div>
</div>
</div>
<div id="purple"></div>
</div>
I'm using Flexbox in CSS. In the next link, you can see three squares lying one above the other: http://codepen.io/CrazySynthax/pen/PbLjMO
The first square is the smallest and the last square is the biggest. My question is how to draw these squares that their height will be identical, but their width will differ, so they will look like this:
---
------
---------
This is the code:
<div class="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
displax: flex;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-flow:column wrap;
justify-content:space-around;
}
.square {
flex:1 1 auto;
background-color:gray;
border:solid;
margin: 1em;
}
.square:nth-child(1) {
flex-grow: 1
}
.square:nth-child(2) {
flex-grow: 2
}
.square:nth-child(3) {
flex-grow: 5
}
Add a class to each div with desired width & leave flex-grows in 1 to maintain same height:
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
displax: flex;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-flow:column wrap;
justify-content:space-around;
}
.square {
flex:1 1 auto;
background-color:gray;
border:solid;
margin: 1em;
width: 200px
}
.square:nth-child(1) {
flex-grow: 1;
}
.square:nth-child(2) {
flex-grow: 1;
}
.square:nth-child(3) {
flex-grow: 1;
}
/*added classes*/
.one {
width: 150px;
}
.two {
width: 250px;
}
.three {
width: 350px;
}
#media (max-width: 350px) {
.one {
width: auto;
}
.two {
width: auto;
}
.three {
width: auto;
}
}
<div class="container">
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
</div>
EDIT: For responsive beyond 350px or whatever add a #media query (make sure it's set at the end of the CSS sheet or later than the custom width .one .two & .three):
Test resizing window on external JSFiddle
#media (max-width: 350px) {
.one {
width: auto;
}
.two {
width: auto;
}
.three {
width: auto;
}
}
I'm unable to remove two margins. The one at the top of the page and one underneath my hero image. I've tried margin 0, padding 0, etc.. I've even tried to remove it from the body and html. How can I fix this?
/* Setting up our grid */
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
/*Set the width of the entire website here */
margin-right: auto;
margin-left: auto;
/*Margin-left and right are set to auto to center the container */
}
.seven:first-child,
.eight:first-child,
.nine:first-child,
.ten:first-child,
.eleven:first-child,
.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
margin-left: 0;
/* This line of code makes the left-most column align to the left of the screen */
}
.eleven {
width: 91.5%;
float: left;
margin-left: 2%;
}
.ten {
width: 83%;
float: left;
margin-left: 2%;
}
.nine {
width: 74.5%;
float: left;
margin-left: 2%;
}
.eight {
width: 66%;
float: left;
margin-left: 2%;
}
.seven {
width: 57.5%;
float: left;
margin-left: 2%;
}
.six {
width: 50%;
/* This div spans six columns (the entire row)*/
float: left;
margin-left: 0%;
}
.five {
width: 40.5%;
/* This div spans five columns */
margin-left: 2%;
float: left;
}
.four {
width: 32%;
float: left;
margin-left: 2%;
}
.three {
width: 23.5%;
float: left;
margin-left: 2%;
}
.two {
width: 15%;
float: left;
margin-left: 2%;
}
.one {
width: 6.5%;
float: left;
margin-left: 2%;
}
.row {
width: 100%;
clear: both;
/* Clear creates new styles for the next row */
padding: 0px;
margin: 0px;
}
header {
height: 110px;
}
.hero-image {
height: 767.38px;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
.row2 .six {
width: 50%;
height: 495.56px;
background-color: grey;
}
.row2 .right {
width: 50%;
background-color: blue;
}
.row3 .lower {
width: 50%;
height: 495.56px;
background-color: green;
}
.row3 .corner {
width: 50%;
height: 495.56px;
background-color: black;
}
.follow {
height: 908px;
background-color: tan;
}
.bottom {
height: 169px;
background-color: grey;
}
footer {
height: 169px;
background-color: black;
}
<div class="container">
<!--everything on the page-->
<div class="row">
<div class="hero-image">
<header>
<h1>Vintage McDonald's</h1>
</header>
<h2>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</h2>
</div>
</div>
<!--closing row 1-->
<div class="row">
<div class="row2">
<div class="six">
</div>
<div class="six right">
</div>
</div>
</div>
<!--closing row 2-->
<div class="row">
<div class="row3">
<div class="six lower">
</div>
<div class="six corner">
</div>
</div>
</div>
<!--closing row 3-->
<div class="row">
<div class="follow">
</div>
</div>
<!--closing row 4-->
<div class="row">
<div class="bottom">
</div>
</div>
<!--closing row 5-->
<div class="row">
<footer>
</footer>
</div>
<!--closing row 6-->
</div>
If I understood you correctly >>> Try this:
Your CSS has class:
.hero-image {
height: 767.38px;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
Delete height:
.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
And add new CSS style:
h2 {
margin-bottom:0;
}
Hope it helped...
UPDATE>>>
Try this
.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
background-size:contain;
}
OR
.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try this link: https://necolas.github.io/normalize.css/5.0.0/normalize.css
Copy and paste the code in a new css file and link it before any other file.
And try this to remove margin from top of the page:
.container {
margin-top: 0;
}
and this for hero image:
.hero-image header {
margin-bottom: /* how much ever you want*/
}
or if that does'nt work then try this:
.row {
margin-bottom: /* how much ever you want*/
}
I've found the solution I am looking for on SoF but the issue persists. I'm obviously not doing something correctly. Perhaps another pair of eyes would be helpful.
Basically, I want to show a hidden div while I hover over a separate div. While on hover over the separate div, it will change bg color.
Thanks for the help.
Here is a CodePen of what I have so far.
HTML
<div class="container-fluid">
<div class="image">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="one-text">
<p>Here is some text</p>
</div>
<div class="two-text">
<p>Here is some text</p>
</div>
<div class="three-text">
<p>Here is some text</p>
</div>
<div class="four-text">
<p>Here is some text</p>
</div>
<div class="five-text">
<p>Here is some text</p>
</div>
</div>
CSS
body {
background-color: #c5d5cb;
color: #fff;
font-family: Open Sans;
font-weight: 300;
margin: 0 auto;
}
.container-fluid {
background-color: #9fa8a3;
height: 600px;
padding: 30px;
}
.container-fluid .image {
background-color: #e3e0cf;
height: 100%;
width: 50%;
float: right;
padding: 30px;
display: flex;
justify-content: space-between;
}
.container-fluid .image .one {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .one:hover {
background-color: #3b3a36;
}
.container-fluid .image .two {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .two:hover {
background-color: #3b3a36;
}
.container-fluid .image .three {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .three:hover {
background-color: #3b3a36;
}
.container-fluid .image .four {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .four:hover {
background-color: #3b3a36;
}
.container-fluid .image .five {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .five:hover {
background-color: #3b3a36;
}
.container-fluid .one-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .two-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .three-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .four-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .five-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .one:hover + .one-text {
display: block;
}
.container-fluid .two:hover + .two-text {
display: block;
}
.container-fluid .three:hover + .three-text {
display: block;
}
.container-fluid .four:hover + .four-text {
display: block;
}
.container-fluid .five:hover + .five-text {
display: block;
}
Ok I have done this with JS, simply because it would have been too much a hassle with CSS, also, I doubt it's possible in CSS. I will post the CSS rules later on.
I have done it in plain vanilla JS, it will work in all modern browsers.
First I have added a slight transition to everything, instead of display none on the paragraphs i have done:
webkit-transition:.4s;
transition:.4s;
opacity:0;
Then I have created a mouseIn and mouse Out function, with 3 parameters.
function onEntry(whichDiv,whichText, color) {
whichDiv.style.background = color;
whichText.style.opacity = '1';
}
Then, I had to add an EventListener to all divs:
one.addEventListener('mouseover', function(){
onEntry(one, txtOne, "#3b3a36");
}
See, that 3rd parameter, you can change to your desired colors.
Here is the link to the pen:
http://codepen.io/damianocel/pen/vXQqJE
And on the CSS rules to affect other elements on hover, it goes like:
directly inside the container:
container:hover > #element
If cube is next to (after containers closing tag) the container:
container:hover + #element
If the cube is somewhere inside the container:
container:hover #cube
Cheers
Try it
#content:hover #hoverbar{
visibility:visible;
}