How to make the 3 boxes to display above the background image - html

How to make the boxes display above the background images. I tried to use z-index bit it doesnt work.
HTML
<section class="showcase">
</section>
<section class="boxes">
<div class="box 1">
</div>
<div class="box 1">
</div>
<div class="box 1">
</div>
</section>
Section "showcase" contains the background image.
I set the margin of .boxes -40px.

Since there is no CSS I and just by looking at the image I assume the issue is with the background color of the boxes.
Here is a working example with what I assume the CSS is:
.showcase {
background-color: pink;
height: 200px;
}
.boxes {
display: flex;
justify-content: space-around;
margin-top: -40px;
}
.box {
border: 2px solid salmon;
width: 100%;
max-width: calc((100% / 3) - 30px);
height: 100px;
background-color: cadetblue;
}
<section class="showcase">
</section>
<section class="boxes">
<div class="box 1">
</div>
<div class="box 1">
</div>
<div class="box 1">
</div>
</section>
And a link to a fiddle: https://jsfiddle.net/x75p9mj0/
Please provide more code (relevant CSS) so we can better see what could the issue be.

Related

Flexbox that wraps around a fixed container

I'm trying to create a form with a variable number of form fields that would expand horizontally. Each field would have a minimum width of 300 px, but would expand to fill the row if there is extra space. If there is not enough space for each field at 300px, then it would wrap to another row. Flexbox would be the perfect solution for this. However, I also want there to be a variable width container for submit & cancel buttons that is fixed on the right side of the first row. (See the attached illustration.)
How can I create this fixed, right-aligned container that Flexbox would flow around? Can this be done with Flexbox alone? Would CSS Grid (or a combination of Flexbox & Grid) be helpful here? Example code would be appreciated.
I think your best solution is to use float and inline-block. then you can adjust sizing considering media query
body>.container {
background-color: #FFFFFF;
margin: auto;
margin-top: 24px;
padding: 0px;
}
.container {
border: solid 1px #F00;
font-size:0;
}
.box {
box-sizing: border-box;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
min-height: 36px;
width: calc(25% - 10px);
min-width: 200px;
display:inline-block;
margin: 5px;
font-size:initial;
}
.box.buttons {
float:right;
}
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<div class="container">
<div class="box buttons">
<button>Submit</button>
<button>Cancel</button>
</div>
<div class="box a">Box A</div>
<div class="box b">Box B</div>
<div class="box c">Box C</div>
<div class="box e">Box E</div>
<div class="box f">Box F</div>
</div>
After some experimentation, I found that this is possible with CSS Grid. Here is the basic layout:
HTML:
<div class="auto-fit">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
<div class="I">I</div>
<div class="J">J</div>
<div class="K">K</div>
<div class="L">L</div>
<div class="M">M</div>
<div class="buttons"><button>Submit</button><button>Cancel</button></div>
</div>
CSS:
div.auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
div.auto-fit > div {
background-color: #fff;
border-radius: 3px;
padding: 15px;
font-size: 14px;
}
div.buttons {
grid-column: -1/-2;
grid-row: 1/2;
}
Here is a jsfiddle that shows it in action: https://jsfiddle.net/lobo78/5ufqdm4y/22/

Element alignment: Remove margin with modifier class not working

I have a wrapper with two boxes in it. The boxes are each to other. In the boxes there is a title (optional) and a content. I have two cases. First case: One of the boxes has a title the other hasn't. Second case: Both boxes have a title. If you take a look on the example for the second case (both titles), the boxes and titles are aligned on the bottom of the wrapper, and the titles are also aligned. There is also an example for the first case (one box without title). Because of the missing title, the alignment isn't correct yet. Here is a screenshot of the problem:
So what I tried is, to figure out the missing space for the first case, which was 21px. After this I select in CSS the second box and add the missing space. For the second case with both title, I tried to add a modifier class on the box and remove the margin-top. So default there would be a space on the second box if no title (this title is optional) and if both titles are avalable, a class should remove it again. Thats the part of the code:
.box + .box {
margin-top: 21px;
}
.box--with-title {
margin-top: 0;
}
Now with my idea it doesn't work. The first case is solved, but my class is not removing the margin. So now the alignment for the second case is wrong. Any ideas how to solve that the class is removing the margin or is there a bether way to do this with pure CSS? Hope this is clear enough.
.wrapper {
display: flex;
justify-content: space-betweet;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
.box+.box {
margin-top: 21px;
}
.box--with-title {
margin-top: 0;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<h3></h3>
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
Simply use align-items:flex-end on the container and no need to consider margin:
flex-end
The cross-end margin edge of the flex item is flushed with
the cross-end edge of the line. ref
.wrapper {
display: flex;
justify-content: space-between;
align-items:flex-end;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
By the way your intial code was almost good, you are simply facing a specificity issue which make the rule of .box--with-title not being considered. You may do something like this instead:
.wrapper {
display: flex;
justify-content: space-betweet;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
.box+.box {
margin-top: 21px;
}
.box.box--with-title {
margin-top: 0;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<h3></h3>
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>

how can i add another div which will cover all the space present in the right side of .left, .mid and .right?

Hello there i want to add one more div on the right side of 3 divs i.e left, right and mid, i am new to CSS, also if you could then please also explain how to position complex div designing, or please share a link to resource which elaborates this concept easily
Here is my complete source code..Here is the output
<html>
<head>
<title>Template</title>
<style>
body {
background-color: black;
}
.top, .left, .right, .mid, .bottom {
margin: 5px;
background-color: plum;
padding: 5px;
}
.left, .right, .mid {
width: 30%;
}
</style>
</head>
<body>
<div class="top">
<p>Top</p>
</div>
<div class="left">
<p>Left</p>
</div>
<div class="mid">
<p>Mid</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div class="bottom">
<p>Bottom</p>
</div>
</body>
</html>
You can create a flex row with 2 flex children and put the left/mid/right elements in the left flex child set to the flex-basis you want those to occupy, then set the other flex child to flex-grow: 1. I'm using the shorthand properties in this code.
body {
background-color: black;
}
.top,
.left,
.right,
.mid,
.bottom,
.panel2 {
margin: 5px;
background-color: plum;
padding: 5px;
}
.flex {
display: flex;
}
.panel1 {
flex: 0 0 30%;
}
.panel2 {
flex: 1 0 0;
background: blue;
}
<div class="top">
<p>Top</p>
</div>
<div class="flex">
<div class="panel panel1">
<div class="left">
<p>Left</p>
</div>
<div class="mid">
<p>Mid</p>
</div>
<div class="right">
<p>Right</p>
</div>
</div>
<div class="panel panel2">
foo
</div>
</div>
<div class="bottom">
<p>Bottom</p>
</div>

What is the space between the sections in HTML?

I've got this HTML structure:
<body cz-shortcut-listen="true">
<div id="panels">
<section id="sect0" name="lvl0">
<div id="divLvel0" class="level zero">
<h2>top<nav><ul><li>Languages</li><li>Proficiency</li><li>Milestones</li><li>Details</li></ul></nav></h2>
</div>
</section>
<section id="sect1" name="lvl1">
<div id="divLvel1" class="level one">
<div id="panel_lvl1">
<h2>Languages</h2>
</div>
</div>
</section>
<section id="sect2" name="lvl2">
</section>
<section id="sect3" name="lvl3">
<div id="divLvel3" class="level three">
<div id="panel_lvl3">
<h2>Milestones</h2>
<div id="chart3">
</div>
</div>
</div>
</section>
<section id="sect4" name="lvl4">
<div id="divLvel4" class="level four">
<div id="panel_lvl4">
<h2>Details</h2>
<div id="chart4">
</div>
</div>
</div>
</section>
</div>
</body>
https://jsfiddle.net/thadeuszlay/Lkdo5xv3/2/
Every section touch each other directly, i.e. there is no additional element in between the sections. But somehow you can see a gap (the green background color) between each section.
I already set the padding and the margin of the body to zero. Also I replaced the sections with DIVs. But the gap is still there.
How do I get rid of the gap and make each section touch other without a gap between them?
reset padding and margin for all objects at the start of your style
* {
margin:0;
padding:0;
}
after that you can set padding and margin as you want for each object
This is where the green background is coming from. What you are seeing is the body element. Imagine there are 'holes' in your layout through which you see what's behind.
I advise you to always use a CSS Normalizer in order to harmonize and set reasonable defaults for your elements.
In your example, you need to add:
h2 { margin: 0; padding: 0}
body { margin: 0; }
as well as remove the padding of sections. Here is the working snippet:
body {
padding: 0;
margin: 0;
background: green;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
.zero,
.one,
.two,
.three,
.four {
padding: 40px 0;
font-size: 20px;
}
.outer-box {
background-color: blue;
padding-top: 100px;
}
.zero {
background: red;
}
.one {
background: LightSeaGreen;
}
.two {
background: LightGreen;
}
.three {
background: HotPink;
}
.four {
background: LightSteelBlue;
}
h2 {
margin: 0;
padding: 0;
}
<body cz-shortcut-listen="true">
<div id="panels">
<section id="sect0" name="lvl0">
<div id="divLvel0" class="level zero">
<h2>top<nav><ul><li>Languages</li><li>Proficiency</li><li>Milestones</li><li>Details</li></ul></nav></h2>
</div>
</section>
<section id="sect1" class="outer-box" name="lvl1">
<div id="divLvel1" class="level one">
<div id="panel_lvl1">
<h2>Languages</h2>
</div>
</div>
</section>
<section id="sect3" class="outer-box" name="lvl3">
<div id="divLvel3" class="level three">
<div id="panel_lvl3">
<h2>Milestones</h2>
<div id="chart3">
</div>
</div>
</div>
</section>
<section id="sect4" class="outer-box" name="lvl4">
<div id="divLvel4" class="level four">
<div id="panel_lvl4">
<h2>Details</h2>
<div id="chart4">
</div>
</div>
</div>
</section>
</div>
</body>
I was incorrect in my comment, your body had a margin and that is why you had the space around the elements.
I'm assuming you're using a browser with a similar rendering engine, and as such they sometimes have default styles that may not show up. Seems like it was the case here, just set the margin-bottom on all elements to 0 or simply just reset margins and padding on all elements and add them when you need.
* {
margin: 0;
padding: 0;
}
body {
background: green;
}
.zero,
.one,
.two,
.three,
.four {
min-height: 100vh;
max-height: 1000px;
font-size: 20px;
}
section {
padding-top: 100px;
}
.zero,
.sel:nth-child(1) {
background: red;
}
.one,
.sel:nth-child(2) {
background: LightSeaGreen;
}
.two,
.sel:nth-child(3) {
background: LightGreen;
}
.three,
.sel:nth-child(4) {
background: HotPink;
}
.four,
.sel:nth-child(5) {
background: LightSteelBlue;
}
#sect0,
#sect1,
#sect2,
#sect3,
#sect4 {
/* The image used */
background: blue;
}
<body cz-shortcut-listen="true">
<div id="panels">
<section id="sect0" name="lvl0">
<div id="divLvel0" class="level zero">
<h2>top<nav><ul><li>Languages</li><li>Proficiency</li><li>Milestones</li><li>Details</li></ul></nav></h2>
</div>
</section>
<section id="sect1" name="lvl1">
<div id="divLvel1" class="level one">
<div id="panel_lvl1">
<h2>Languages</h2>
</div>
</div>
</section>
<section id="sect2" name="lvl2">
</section>
<section id="sect3" name="lvl3">
<div id="divLvel3" class="level three">
<div id="panel_lvl3">
<h2>Milestones</h2>
<div id="chart3">
</div>
</div>
</div>
</section>
<section id="sect4" name="lvl4">
<div id="divLvel4" class="level four">
<div id="panel_lvl4">
<h2>Details</h2>
<div id="chart4">
</div>
</div>
</div>
</section>
</div>
</body>
Add padding and margin 0. In addition change your html to this:
<section></section><!--
--><section></section>
Or in one line:
<section></section><section></section>

Child element shifting parent div

I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example

Resources