* {
background-color:grey;
}
body {
margin: 0 ;
}
#container {
height:800px;
display:flex;
text-align:center;
justify-content:flex-start;
flex-direction: column;
}
#container {
width:15%;
}
#container > a {
flex:1;
border-radius:10px;
height:100px;
}
#box-1 {
background-color:green;
flex-grow: 2;
}
#box-2 {
background-color:yellow;
}
#box-3 {
background-color:pink;
}
#box-4 {
background-color:aqua;
}
#box-5 {
background-color:blue;
}
#box-6 {
background-color:chocolate;
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id ="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6"href="#"></a>
</div>
</nav>
</body>
Hello , recenly I was learning flexbox, and right now I'm trying to go back to #media rule and it doesn't seem to work. I even tried changing it to w3 school's #media rule example . But it doesn't change its background-color to olive as it is written in the #media rule. Could anyone explain me how come it doesn't work?
You need to add html in your css like so:
html, body {
background-color: olive;
}
Here's a working example
The issue is simply that, in the snippet in your question, nav takes up the entire page, so it completely covers body. The background color body will only show if there are not elements on top of it.
Nav is being affected by this rule:
* {
background-color: grey;
}
The best thing to do is to not use the wildcard selector for setting background color. Instead, if you want the background of your page to be gray on desktop and olive on mobile, do that:
body {
background-color: grey;
}
#media (max-width: 600px) {
body {
background-color: olive;
}
}
Then delete the wildcard rule entirely. Make a separate rule for the elements that you actually want to have a special background color as needed.
body {
background-color: gray;
margin: 0;
}
#container {
height: 800px;
display: flex;
text-align: center;
justify-content: flex-start;
flex-direction: column;
}
#container {
width: 15%;
}
#container>a {
flex: 1;
border-radius: 10px;
height: 100px;
}
#box-1 {
background-color: green;
flex-grow: 2;
}
#box-2 {
background-color: yellow;
}
#box-3 {
background-color: pink;
}
#box-4 {
background-color: aqua;
}
#box-5 {
background-color: blue;
}
#box-6 {
background-color: chocolate;
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6" href="#"></a>
</div>
</nav>
</body>
Add
nav {
background-color: transparent;
}
The reason: nav is 100% wide and takes on the background color from the * rule, therefore its grey background spreads across the whole width, even below 600px width. The rule above prevents that and lets the olive background of body come through.
* {
background-color: grey;
}
body {
margin: 0;
}
#container {
height: 800px;
display: flex;
text-align: center;
justify-content: flex-start;
flex-direction: column;
}
nav {
background-color: transparent;
}
#container {
width: 15%;
}
#container>a {
flex: 1;
border-radius: 10px;
height: 100px;
}
#box-1 {
background-color: green;
flex-grow: 2;
}
#box-2 {
background-color: yellow;
}
#box-3 {
background-color: pink;
}
#box-4 {
background-color: aqua;
}
#box-5 {
background-color: blue;
}
#box-6 {
background-color: chocolate;
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6" href="#"></a>
</div>
</nav>
</body>
Related
I have a wrapper div with flexbox on it, containing two other divs:
The right hand div has 3 other divs in it, one is a search bar
Is there a way I can use flexbox to say fill all the space available, unless the parent is being forced to shrink?
This is my CSS
.header-nav {
background: $storm;
.container {
display: flex;
justify-content: space-between;
}
.logo {
display: block;
}
a {
color: #fff;
text-decoration: none;
}
.is-search {
display: flex;
align-items: center;
background:yellow;
}
}
.header-nav-profile {
display: flex;
}
.block-menu,
.inline-menu {
display: flex;
margin: 0;
padding: 0;
li {
list-style: none;
}
}
.inline-menu {
display: flex;
align-items: center;
a {
padding: 2px 12px 2px 10px;
}
}
.block-menu {
border-left: 1px solid $grey;
border-right: 1px solid $grey;
a {
display:block;
padding: 25px;
box-sizing: border-box;
}
li + li a,
.is-search {
border-left: 1px solid $grey;
}
.is-search {
padding-left: 18px;
padding-right: 18px;
// flex-basis: 280px;
}
}
And HTML
<div class="header-nav">
<div class="container">
<div class="header-nav-profile">
<a href="/">
<img src="http://placehold.it/80x80" alt="Logo" class="logo">
</a>
<ul class="inline-menu">
<li>
Name
</li>
<li class="has-icon">
Add bookmark
</li>
<li>
View bookmark
</li>
</ul>
</div>
<ul class="block-menu">
<li>
Dashboard
</li>
<li>
Period
</li>
<li>
Filters
</li>
<li class="is-search">
<div class="search">
<input type="text" placeholder="Search">
<span class="submit"></span>
</div>
</li>
</ul>
</div>
</div>
I have a link to a demo if you want to try it out:
https://codepen.io/EightArmsHQ/pen/dmZxRv?editors=1100
I'd like the search bar to have a good length (longer than the other two items in its div) then as the width gets smaller only then does it start shrinking.
Modify your block menu class like this:
.block-menu {
border-left: 1px solid grey;
border-right: 1px solid grey;
flex-grow:1;
justify-content:flex-end
}
Basically you can use flex-grow to take up the available space and then justify-content:flex-end to move them to the right (end of) the container.
Here is a codepen
Try using max-width: pixel amount; and max-height: pixel amount;.
It that doesn’t work, it’s possible with #media tags.
.selector {
width: normal width;
}
#media (max-width: 800px) {
.selector {
width: percent amount; /* Width when window is thinner than 800px */
}
}
I have 2 div<> that I would like to be next to eachother. They are inside of a form<>. The one I have on the left won't float all the way up. It seems that my First Div keeps blocking it. I have resized it multiple times and It still doesn't work. Here is my Css code and as you can see there is not much to it. I also have no inline styling. My first Div is called ContactInput and my second Div is called invisible
#body {
border: 1px double black;
}
#checkout { //this is just a head at the top
text-align:left;
border-bottom: 1px solid black;
}
#contactInput{
clear:right;
padding:.5em;
}
#invisible{
float:right;
padding:.5em;
}
Like this?
#contact {
width: 50%;
padding:.5em;
background: blue;
float: left;
box-sizing: border-box;
}
#invisible {
width: 50%;
padding:.5em;
background: red;
float: left;
box-sizing: border-box;
}
<div id="contact">
</div>
<div id="invisible">
</div>
I recommend flex instead of float
.wrap {
display: flex;
}
#contact {
flex: 1;
padding:.5em;
background: blue;
}
#invisible {
flex: 1;
padding:.5em;
background: red;
}
<div class="wrap">
<div id="contact">
</div>
<div id="invisible">
</div>
</div>
I am trying to create a site with just one actual page containing multiple pseudo-pages in form of divs. There are four divs and I have set the width of the wrapper in which the divs are to 200%(so that I get two rows of two divs each) and set the divs to 50% width(so that they cover the whole page of the viewport).
I have four divs named home, like, dislike and contact. I first created a tag link to the like div and it worked. But tag links to no other divs are working and shows only the second page everytime.
Here is the jsfiddle : JsFiddle of my site
What am I doing wrong?
Css:
#wrapper { max-width : 100%;
overflow : hidden;
position : relative;
}
#header { position : fixed;
float : left;
}
#logo { margin-left: 0px;
padding-top: 20px;
height: 50px;
width: 300px;
border : solid black;
background-color: red;
}
#nav {margin-top : 20px;
width : 50%;
height: 300px;
border : solid black;
}
#pages { width: 200%;
position : relative;
border : solid black;
float: left;
height : 800px;
}
#main-page, #like-page, #dislike-page, #contact-page {float:left;
position : relative;
width:50%;
height: 800px;}
div.content { margin-top: 100px;
}
div H2 {margin-left: 180px;
margin-bottom: 20px;
}
div p {margin-left: 180px;
margin-right: 50px;
}
Here is a working fiddle on what you are talking about:
http://jsfiddle.net/X4URc/3/
I used html:
<div class='container'>
<div class='navbar'>
<div align='center'> <a class='menu1 menu-item'>Item 1</a>
<a class='menu2 menu-item'>Item 2</a>
<a class='menu3 menu-item'>Item 3</a>
<a class='menu4 menu-item'>Item 4</a>
</div>
</div>
<div class='content'>
<ul class='content-container'>
<li class='contents content1'>Content 1</li>
<li class='contents content2'>Content 2</li>
<li class='contents content3'>Content 3</li>
<li class='contents content4'>Content 4</li>
</ul>
</div>
</div>
CSS:
.menu-item {
background: black;
color: white;
padding: 15px;
cursor: pointer;
}
.menu-item:hover {
background: white;
color: black;
}
.menu-item:not(.menu1) {
margin-left: -8px;
}
.navbar {
background: black;
padding: 15px;
width: 700px;
}
.container {
background: white;
width: 730px;
margin: 0 auto;
}
.content1 {
margin-left: -40px;
}
.contents {
padding-bottom: 400px;
padding-right: 668px;
height: 500px;
background: red;
list-style-type: none;
display: inline;
}
.contents:not(.content1) {
margin-left: -4px;
}
body {
background: #ccc;
}
.content {
width: 730px;
background: white;
overflow: hidden;
}
.content-container {
width: 9999999px;
height: 500px;
}
Jquery:
$('.menu1').click(function(){
$('.content1').css({'margin-left' : '-40px'});
});
$('.menu2').click(function(){
$('.content1').css({'margin-left' : '-770px'});
});
$('.menu3').click(function(){
$('.content1').css({'margin-left' : '-1500px'});
});
$('.menu4').click(function(){
$('.content1').css({'margin-left' : '-2230px'});
});
// for more add -730px every time
//If you don't want animations change .animate() to .css()
Instead of having lots of divs, I used a <ul> within a div with overflow hidden and then styled it display: inline;
What I want is a layout for each list item like:
But what I'm getting is more like:
So I want to:
Put div1 to occupy a specific width, for instance 20px (in percentage would be better...) and is heigth to fill is parent heigth (list item heigth). I already tried put heigth:100% but no effect.
div2 should occupy the rest of the horizontal space with some padding.
How can I manipulate css style to do that?
Below is my code so far:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div1"> </div>
<div class="div2">Some content</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.listItem div {
display: inline-block;
}
.div1{
width: 20px;
}
.div2{
padding: 15px;
}
</style>
Something like this? DEMO
ul {
list-style: none;
padding: 0;
margin: 0;
display: table;
width: 100%;
}
li {
display: table-row;
}
.listItem div {
display: table-cell;
}
.div1 {
width: 10%;
}
.div2 {
width: 90%;
padding: 15px;
}
Using jQuery Mobile 1.3 I used an example using a listview widget from the docs to achieve what I think you are going for.
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li><div class="div1">test</div><div class="div2wr"><div class="div2">test2</div></div><div class="clr"></div></li>
</ul>
<style type="text/css">
.div1, .div2wr{
height:30px;
}
.div1 {
width: 10%;
background:black;
float:left;
}
.div2wr {
width: 90%;
float:right;
}
.div2 {
margin:5px;
height:20px; /* height must be height of div1/div2wr minus div2 margin X2 */
background:blue;
}
.clr{
clear:both;
}
.ui-li-static.ui-li{padding:0px;
}
</style>
The solution that I used was:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div2" style="border-left-color: #{{:CorBack}};">
Some content
</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.div2{
padding: 15px;
border-left-width:15px;
border-left-style:solid;
}
</style>
i have a number containers that i want aligned. This is the code i have so far: jsfiddle
First of all, when i run this code from my machine, the "day-label" is double the size that it shows on jsfiddle. the next two ("max-points" and "close-points") are stacked on top of each other and are right text to "day-label", this is as i want it.
Now the next three containers i can't seem to get them lined up, the "points-totals" container i want to be like the "day-label" but to the right of the max and close points. then the next two "thirty-points" and "fifty-points" i want next to the totals.
They should all be on the same line but they're not all the same shape.
Does anyone know what i'm talking about or am i confusing the situation?
I think i'll be able to use "top:X" and "left:X" but i wanted to know if there was an easier way to get them all inline with each other? like the first three containers.
Thanks for the help.
This is a mock up of how i want it to look -
How's this jsFiddle example?
HTML
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
</div>
CSS
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float:right;
}
.thirty-points
{
background-color: red;
width: 10%;
float:right;
}
.fifty-points
{
background-color: gold;
width: 10%;
clear:right;
float:right;
}
I'm not 100% sure what you're trying to achieve but you could try to use the float function in CSS, e.g float:lefthere's a link to W3schools page on float http://www.w3schools.com/cssref/pr_class_float.asp or if you just want them centered you could always try <center>
use this : fiddle
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float: left;
}
.thirty-points
{
background-color: red;
width: 10%;
float: left;
}
.fifty-points
{
background-color: gold;
width: 10%;
float: left;
display:inline;
float: left;
}
.clearfix {
clear: both;
}
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
<div class="clearfix"></div>
</div>
Update with prettier code
Also- dude, what you look like you're trying to do is display tabular data
If that is the case, there's nothing wrong with using an actual table-- in fact, NOT doing so would be wrong.
html
<section class="container">
<header>
<h1 class="title">Title</h1>
</header>
<ul class="point-container">
<li class="day"><h1>1<span>st</span></h1></li>
<div class="points">
<li class="max">Max</li>
<li class="close">Close</li>
</div>
<div class="results">
<li class="totals">Total</li>
<li class="thirty-points">30 points</li>
<li class="fifty-points">50</li>
</div>
</div>
</section>
css
// ==================
// base
//
//
html{ font-size: 62.5%; }
body{
font-size: 1.6rem;
font: normal normal 100 1.6rem "Helvetica Neue", sans serif;
background-color: black;
}
.container{
width: 90%;
color: white;
margin: auto;
}
// ==================
// layout
//
//
body,
.container,
.points,
.results,
.point-container{
display: flex;
}
.points,
.container{
flex-flow: column;
}
.results{ flex-flow: row;}
.day,
.results li{
flex: 1;
}
.points,
.results{
flex:3;
}
.results li{
text-align: center;
}
// ==================
// colors
//
//
.title{ background-color: #008001; }
.day{ background-color: #00ff00; }
.max{ background-color: blue; }
.close{ background-color: purple; }
.totals{ background-color: orange; }
.thirty-points{ background-color: red; }
.fifty-points{ background-color: gold; }