I want to make a div like this
I used two <div> that contain two <h2> and must replace the top and bottom of the parent <div>.
Here is my code :
.parent {
background: #eae8db;
margin: 20px;
border: 1px solid black;
position: relative;
height: 300px;
}
.top {
background-color:#d6d1b1;
height: 15%;
width: 100%;
position: absolute;
top: -06%;
left: -03.7%;
line-height:100px;
vertical-align:middle;
}
h2{ text-align: center;}
.center {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.bottom{
background-color:#24bfd1;
height: 5%;
width: 100%;
position: absolute;
bottom : 60%;
left: -03.7%;
line-height:100px;
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<img class="center" src="https://picsum.photos/200">
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
</body>
</html>
Link to JsFiddle
Someone can help me to adapt it please ?
I just made some changes in your CSS, replace it should help :
.parent {
background: #eae8db;
border: 1px solid black;
display: flex;
align-items:center;
justify-content:center;
height: 300px;
position:relative;
}
.top {
background-color:#d6d1b1;
height: 15%;
width: 100%;
position:absolute;
top:0;
display:flex;
justify-content:center;
align-items:center;
}
.bottom{
background-color:#24bfd1;
height: 12%;
width: 100%;
position: absolute;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
}
I created a fiddle based on your DOM:
https://jsfiddle.net/xy0zqsnt/1/
I also tried to reuse your css classes, but I threw out some stuff, which didn't make sense to me. There is still room for improvement, but I hope you are able to recognize the changes in the css.
The main point is the use of display:flex in the .parent css class. Flexbox helps a lot for layout tasks like this, make sure to check it out (e.g.: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - but there are many resources out there!)
HTML
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<img class="image" src="https://picsum.photos/200">
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
CSS
h2{ text-align: center;}
.parent {
background: #eae8db;
margin: 20px;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.top {
background-color:#d6d1b1;
width: 100%;
}
.bottom{
background-color:#24bfd1;
width: 100%;
}
.image{
margin: 1em;
}
Solution: ->
No need to use absolute position for this layout...
Here is the solution: ->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<p>
<img class="center" src="https://picsum.photos/200">
</p>
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
</body>
</html>
CSS part->
.parent {
background: #eae8db;
margin: 20px;
}
.top {
background-color:#d6d1b1;
padding: 20px;
}
p{
margin-top: 0;
text-align: center;
padding: 50px 0;
}
h2{ text-align: center;}
.bottom{
background-color:#24bfd1;
padding: 10px;
}
Related
My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar
Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>
A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>
I want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I have a webpage with following structure:
div: (app)
div: (navbar)
div: (wrapper) {position: relative}
div: (intro)
div: (content) {position: absolute}
div: (footer)
where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.
I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.
I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
position: relative;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
/* align-items: center;
justify-content: center;
display: flex;*/
}
.content {
position: absolute;
top: 250px;
width: 94%;
right: 3%;
left: 3%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 960px;
margin: auto;
min-height: 800px;
background-color: gray;
}
.footer {
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content
Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).
Updated: .contentto span width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
}
.content {
margin: -250px auto auto;
width: 94%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 906px;
min-height: 800px;
background-color: gray;
}
.footer {
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
delete your content min-height. is that what you need?
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
I have been doing some practice in CSS and HTML and while creating a layout for page I faced this problem here is the first code.
note: below codes are just example of problem which I faced while creating layout
<!DOCTYPE html>
<html>
<head>
<style>
*
{margin:0px;padding:0px;box-sizing:border-box;}
#container
{
width:800px;
position:relative;
background-color:darkgray;
}
#temp
{
position: relative;
}
#content
{
position:absolute;
top:100px;
right:120px;
width:200px;
height:200px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="temp">
<img src="psp.jpg" alt="no imgage">
<div id="content">
<h1>
Goku Vs Vegeta
<form>
<input type="text" placeholder="Start fighting" name="img">
</form>
</h1>
</div>
</div>
</div>
</body>
</html>
The above code works perfectly for me the text remain's exactly on the image whether we increase or decrease the zoom of browser the text does not changes it position.
The problem arrives when I change the container width from pixel to percentage here is the second code.
<!DOCTYPE html>
<html>
<head>
<style>
*
{margin:0px;padding:0px;box-sizing:border-box;}
#container
{
width:100%;
position:relative;
background-color:darkgray;
}
#temp
{
position: relative;
}
#content
{
position:absolute;
top:100px;
right:120px;
width:200px;
height:200px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="temp">
<img src="psp.jpg" alt="no imgage">
<div id="content">
<h1>
Goku Vs Vegeta
<form>
<input type="text" placeholder="Start fighting" name="img">
</form>
</h1>
</div>
</div>
</div>
</body>
</html>
The problem with the second code is if we increase or decrease the zoom of browser the position of text will change and it will not be relative to image rather it will be to view port of browser or to the container but not to the image. Can someone tell me how to fix this problem?
JS Fiddle : https://jsfiddle.net/30d2nqeL/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#container {
width: 100%;
position: relative;
background-color: darkgray;
}
#temp {
position: relative;
background-image: url('http://lorempixel.com/1336/768');
background-size: cover;
height: 400px;
padding: 0 10vh;
}
#content {
position: absolute;
top: 50%;
margin-top: -100px;
right: 0;
margin-right: 10%;
width: 200px;
height: 200px;
border: 1px solid yellow;
background-color: rgba(255,255,255,.4);
}
#content h1 {
text-align: center;
margin: 1em 0 1em 0;
color: #000;
}
#content form {
text-align: center;
}
<div id="container">
<div id="temp">
<div id="content">
<h1>Goku Vs Vegeta</h1>
<form>
<input type="text" placeholder="Start fighting" name="img">
</form>
</div>
</div>
</div>
form in h1 - bad practice.
use css background-image.
check flexbox.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#container {
width: 100%;
position: relative;
background-color: darkgray;
}
#temp {
display: flex;
align-items: center;
flex-direction: row-reverse;
background-image: url('http://lorempixel.com/1336/768');
background-size: cover;
height: 768px;
padding: 0 10vh;
}
#content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid yellow;
background-color: rgba(255,255,255,.4);
}
#content h1 {
text-align: center;
margin: -.4em 0 1em 0;
color: #000;
}
<div id="container">
<div id="temp">
<div id="content">
<h1>Goku Vs Vegeta</h1>
<form>
<input type="text" placeholder="Start fighting" name="img">
</form>
</div>
</div>
</div>