I'm stuck with this part. My image is being clip-path but my class:txt width won't stretch because of the img. I'm sorry if I can't explain it well. English is my 3rd language so I hope you understand the image I attach.
Result
Actual Image
.item1{
background: url(../img/bg.png);
background-size: 100%;
background-repeat: repeat-y;
padding-left: 40px;
}
.item1 img{
float: right;
-webkit-clip-path: inset(5% 10% 15% 46%);
clip-path: inset(5% 10% 15% 46%);
margin-right: -15px;
margin-top: 20px;
}
.item .txt p{
text-align: justify;
}
.item .txt h2{
margin-top: 5px;
padding-top: 65px;
}
<div class="item1">
<img src="https://i.stack.imgur.com/YasK2.png">
<div class="txt">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<style>
.item1 {
background: url(../img/bg.png);
background-size: 100%;
background-repeat: repeat-y;
padding-left: 40px;
position: relative;
}
.item1 img {
-webkit-clip-path: inset(5% 10% 15% 46%);
clip-path: inset(5% 10% 15% 46%);
margin-right: -15px;
position: absolute;
right: 0;
top: 0;
}
.txt {
padding-right: 280px;
}
.item .txt p{
text-align: justify;
}
.item .txt h2{
margin-top: 5px;
padding-top: 65px;
}
</style>
</head>
<body>
<div class="item1">
<img src="https://i.stack.imgur.com/YasK2.png">
<div class="txt">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Ok so maybe something like this if you want to keep the image cropped:
Set your <div class="item1"> to position: relative and <div class="txt"> to position: absolute, then calculate the width of <div class="txt"> based on the width of the image. (And just in case, maybe set z-index: 1 or higher on your text div, so it will never appear "behind" the image?)
.item1 {
background: url(../img/bg.png);
background-size: 100%;
background-repeat: repeat-y;
padding-left: 40px;
position: relative;
}
.item1 img {
float: right;
-webkit-clip-path: inset(5% 10% 15% 46%);
clip-path: inset(5% 10% 15% 46%);
margin-right: -15px;
margin-top: 20px;
}
.txt {
width: calc(100% - 300px);
margin-top: 20px;
position: absolute;
left: 0;
z-index: 1;
}
.item .txt p {
text-align: justify;
}
.item .txt h2 {
margin-top: 5px;
padding-top: 65px;
}
Here is a link to a jsfiddle
is this how want it??.. used flex box to place image next to the text and used
.item1 img{
object-fit:cover;
object-position:center;
}
instead of clip-path
https://codepen.io/Xenio/pen/rRYPoR
.item1{
background: url(../img/bg.png);
background-size: 100%;
background-repeat: repeat-y;
padding-left: 40px;
display: flex;
}
.item1 img{
object-fit:cover;
object-position:center;
}
.item .txt p{
text-align: justify;
}
.item .txt h2{
margin-top: 5px;
padding-top: 65px;
}
<div class="item1">
<div class="txt">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<img src="https://images.unsplash.com/photo-1548659979-53d6a343b767?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
</div>
Instead of clip-path. I suggest you to use width, height & object-fit properties. Which doesn't create a layout issue.
.item1 img{
float: right;
width: 20%;
height: 200px;
object-fit:cover;
margin-left: 15px;
margin-right: 15px;
margin-top: 20px;
}
https://codepen.io/moorthy-g/pen/NJwomY
Related
I want realise this page
this is my work
the probleme is i can't superimpose the div who contain the text "LUCETTE" under the div who contain the picture
my code html:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.titre span {
text-align: center;
text-transform: uppercase;
font-size: 16rem;
font-weight: bolder;
font-family: 'playfair_displayitalic';
position: absolute;
bottom: 0;
z-index: -1;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied">
<h1 class="titre"> <span>lucette</span> </h1>
</div>
</main>
THANKS .
i'm tryng to superimpose the div who contain the image on top of the div who contain the text "LUCETTE".
but the text "LUCETTE" is on the top of my page .
Try this:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
padding-top: 100px;
height: 100vh;
display: flex;
justify-content: center;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.pied {
font-weight: bolder;
font-family: serif;
position: absolute;
width: 0px;
overflow: visible;
bottom: 35%;
left: 50%;
}
.pied h1 {
position: absolute;
text-align: center;
text-transform: uppercase;
font-size: 16rem;
transform: translate(-50%, 0);
font-family: 'playfair_displayitalic';
top: 0;
left: 50%;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied"><h1>lucette</h1></div>
</main>
Mind the fact that you might need to tweak the bottom attribute of .pied as I did not have that font.
Main issue in your code was that you didn't set position: absolute for the main container of the text. I did some tweaks to ensure that text is also centered etc.
Using absolute position removes items from the normal flow of the page, and can often lead to isolation and z-index mistakes.
I'm attaching a method using a grid layout to superimpose items. Grids are usually easier to debug.
Just to be clear absolute positions can be used, this is just an alternative.
section {
display: grid;
}
.behind {
height: 5rem;
width: 5rem;
background-color: red;
grid-area: 1 / 1;
}
.front {
height: 3rem;
width: 3rem;
background-color: blue;
/* Can also use grid-area */
grid-column: 1;
grid-row: 1;
}
<section>
<div class="behind"></div>
<div class="front"></div>
</section>
enter image description here
Now the result is better but the problem now i want move the bloc center ho contain the picture and the texte in the the middle on the page but i can 't
I have two rows of background image and content. Both are displaying properly on the desktop. I need to display in a single column on the mobile device.
I am confused what should I use on the mobile device.
Please check out the images.
Would you help me out in this?
I am getting the output in the desktop
I need a output in the mobile device
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.inner_padding {
box-sizing: border-box;
padding: 0 20px;
}
.example1_bg {
background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}
.banner_bg {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
min-height: 100%;
background-position: center;
position: relative;
}
.example_part {
position: absolute;
right: 50px;
top: 11%;
margin-top: auto;
margin-bottom: auto;
}
.note_part {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 470px;
box-sizing: border-box;
padding: 25px;
}
.const_part {
position: absolute;
left: 50px;
top: 15%;
}
.example1_bg .h_title h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 35px;
margin-top: 14px;
font-family: "Walsheim-Regular";
}
.h_title h2:after {
content: '';
border-bottom: 2px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 60px;
padding-top: 10px;
}
.repair_conent_title,
.repair_conent_text {
padding: 0 70px 0 20px;
}
.h_content p {
font-size: 18px;
}
<div class="example1_bg banner_bg">
<div class="example_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<!--example1_bg-->
<div class="example1_bg banner_bg">
<div class="const_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<!--example1_bg-->
You need to change your structure for it so it works well as you desire and you will require media queries as well.
Wrap both the content as siblings instead of parent and child inside a super class (container) as shown.
Initially since they have absolute positioning with respect to container, they'll show as expected.
When the screen is resized use media query as such and change the position to relative. (Setting to relative allows them to have their natural behaviour and not overlap and you can adjust the top,left,bottom,right positioning as required)
#media only screen and (max-width:600px) {
.banner_bg {
position: relative;
min-height: 300px;
width: 100%;
}
.example_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
.const_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.inner_padding {
box-sizing: border-box;
padding: 0 20px;
}
.container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
}
.example1_bg {
background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}
.banner_bg {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
min-height: 100%;
background-position: center;
position: absolute;
}
.example_part {
position: absolute;
right: 50px;
top: 11%;
margin-top: auto;
margin-bottom: auto;
}
.note_part {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 470px;
box-sizing: border-box;
padding: 25px;
}
.const_part {
position: absolute;
left: 50px;
top: 15%;
}
.example1_bg .h_title h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 35px;
margin-top: 14px;
font-family: "Walsheim-Regular";
}
.h_title h2:after {
content: '';
border-bottom: 2px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 60px;
padding-top: 10px;
}
.repair_conent_title,
.repair_conent_text {
padding: 0 70px 0 20px;
}
.h_content p {
font-size: 18px;
}
#media only screen and (max-width:700px) {
.banner_bg {
position: relative;
min-height: 300px;
width: 100%;
}
.example_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
.const_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
}
<div class="container">
<div class="example1_bg banner_bg">
</div>
<!--example1_bg-->
<div class="example_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<div class="container">
<div class="example1_bg banner_bg">
</div>
<!--example1_bg-->
<div class="const_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
Im not at my pc atm. I'm sure I have code for this. But w3school has good examples in a css3 tag https://www.w3schools.com/css/css3_flexbox.asp
You could wrap them individually in a div. So background and content in their own div. Then same again for the other two. And have both background and content divs float left. Then set the container div to margin-left: 0 auto, and margin-right: 0 auto.
Or in an code
<div class="container">
<div class="background"></div>
<div class="content"></div>
</div>
.container{ margin-right:auto;
margin-left:auto;
height: 1%;
overflow: hidden;
}
.background { display: table;
margin: 0 auto;
widht:400px;
Height: 500px ;
}
.content { display: table;
margin: 0 auto;
widht:400px;
Height: 500px ;
}
So I want to achieve this using css and html
So I wrote this code that sets the width of each box to 33.33%
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
div > div {
background-color: gray;
border: 1px solid;
float: left;
}
.dummy_text {
clear: right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="chiken">Chicken
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="beef">Beef
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<p id="sushi">Sushi
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
And the result is this:
The thing is that I need spacing between paragraphs, so what I though was to add some margin-left to the boxes, the thing is that when I add 10px, the result is that one of the three boxes goes to a new line, but I need the three in the same line.
This is what I did to add the margin, I modify the div > div part like this:
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-left: 10px;
}
And then result:
Use % values for all your layout widths.
Use :last-child to set the margin of the right div to zero.
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-right: 2%
}
div > div:last-child {
margin-right: 0;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 32%;
}
}
Here's a codepen:http://codepen.io/prime8/pen/LRympm
Use calc for with
.col-dsk-3 {
float: left;
width: calc(33.33% - 20px);
margin-right: 10px;
}
.col-dsk-3:last-child {
margin-right: 0px;
}
But I suggest you use flexbox instead
When adding the margin-left: 10px to each paragraph you are making their widths larger than 33.33% which results in being greater than 100% pushing the last paragraph down.
Like all things in CSS, there is a couple of different ways you can solve this, but the easiest and most direct answer to your question is using the calc CSS function. The calc function calculates a numerical value in CSS using basic math operations.
Using the calc function you can then set the width of each paragraph to be:
width: calc(33.33% - 10px);
Which will result in a 100% fit.
There are a number of things you can do about this.
1 - Use calc to reduce the width of elements currently set to 33.33% by 10px, and use 10px margin:
.col-dsk-3 {
float: left;
width: calc(33.33% - 10px);
margin-right: 10px;
}
2 - Wrap the content of your columns in another element, and apply a padding to your columns:
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div class="column-content">
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit....</p>
</div>
</div>
.column-content {
background-color: gray;
}
.col-dsk-3 {
float: left;
width: 33.33%;
padding: 10px;
background: none;
}
3 - use flexbox instead of floats for your columns. Remove the floats and the width: 33.33%, and add:
.row {
display: flex;
flex-direction: row;
}
.col-dsk-3 {
margin: 10px;
}
You use percentages to define the width, but add absolute values to the margins. Your widths add up to (almost) 100%, yet you add more margins, resulting in more than 100%, therefore to a value that is bigger than the space that is available.
Adjust your margins to use percentages as well and make sure you end up with 100% or less.
Try this. To use additional div wrapper in HTML.
This way has a good compatibility.
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
/* NOTE: `.row > div > div` is better than `div > div > div` */
div > div > div { /* changed */
background-color: gray;
border: 1px solid;
float: left;
}
.row > div > div { /* changed */
margin: 0 10px;
}
.dummy_text {
clear:right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="beef">Beef<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<div>
<p id="sushi">Sushi<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
So here is what i was trying to do
i wanted to have a div with z-index -1 somewhere between 2 other divs to test the parallax effect on it i put everything on the center with margin : 0 auto . but when i changed the parallax div position to absolute, it moved to the left side of the page . next i tried moving it back to center with left :50% it didn't work so what i changed it to left :12.5% and it worked !
But here is my question : could i do it in any other way ?! and is what i did now right or is it gonna cause some problems in the future ?!
here are the codes :
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meaningless Pap</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="content1">
<h1>Welcome! </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="breaker" data-0="background-position:0px 0px;" data-700="background-position:0px -300px;">
<h2> this is a text </h2>
</div>
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
Css :
body {
font-family: 'lato';
background: url("http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg") #000;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-size: 100%;
line-height: 1.7;
color: #000;
}
.container {
width: 100%;
margin: 0 auto;
}
.content1 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px 7px 15px #333;
padding: 10px;
z-index: 1;
}
.content2 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px -7px 15px #333;
padding: 10px;
z-index: 1;
margin-top: 200px;
}
.breaker {
position: absolute;
left: 12.5%;
width: 75%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}
.breaker h2 {
padding-top: 50px;
text-align: center;
color: #fff;
}
There is nothing wrong with your approach. The width percentage and the left percentage are calculated in the same way when absolutely positioned - relative to the first parent element that has a position other than static.
An alternative method for an absolutely positioned element would be to specify both left and right positions. This has the advantage of being unaffected by any borders or padding.
.breaker {
position: absolute;
left: 12.5%;
right: 12.5%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}
As you can see on the picture below and on this JSFiddle http://jsfiddle.net/w2Njv/, my issue is that my text won't stay aligned to the right of the picture and at the same level when I reduce the width of my webbrowser window. It actually moves below the picture.
I don't understand why because .pt-intro-text has a width of 60% no matter what the size of the screen is so to me it should always look good as on the first picture and never move below the picture.
Thanks for your help
Looks OK with wide width:
Looks bas when resizing window (text won't stick to the right of the picture):
http://jsfiddle.net/w2Njv/
HTML
<div class="wrapper">
<section class="intro-personal-training clearfix">
<div class="pt-intro-header clearfix">
<h2 class="_text">Nous fdfds en place un dfdsfdsfds qui vous dfds</h2>
<h3 class="_text">dfsf soit votredfdsd dfds</h3>
</div>
<div class="intro-pic-container"></div>
<div class="pt-intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</div>
CSS:
section {
position: relative;
}
.wrapper {
width: 90%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(255, 255, 255);
}
.intro-personal-training img {
float: left;
clear: both;
width: 120px;
margin-top: 21px;
margin-left: 75.02759%;
}
.pt-intro-header h3 {
margin-top: 3px;
font-size: 26px;
color: #3a7cdb;
}
.pt-types-de-coaching-header h3,
.restons-en-contact h3 {
max-width: 700px;
font-size: 18px;
color: rgb(45, 125, 223);
}
.intro-personal-training {
margin-top: 70px;
margin-right: auto;
margin-left: auto;
}
.intro-pic-container {
float: left;
clear: both;
width: 329px;
height: 262px;
margin-top: 59px;
margin-left: 2.88%;
background-image: url('http://lorempixel.com/output/fashion-q-g-329-262-5.jpg');
background-repeat: no-repeat;
background-size: auto auto;
background-position: center center;
}
.pt-intro-text {
display: inline-block;
float: right;
width: 60%;
margin-top: 59px;
margin-right: 4.6671699999%;
padding-left: 15px;
border-left-width: 1px;
border-left-color: rgb(0, 0, 0);
border-left-style: dotted;
text-align: justify;
letter-spacing: 1px;
color: #1a1a1a;
}
._text {
margin-right: auto;
margin-left: auto;
}
.pt-intro-text has a width of 60%, but .intro-pic-container has in small resolution more than 40% and then text won't stay aligned to the right.
Put img element into this div and give him max width 40% (or 37% width + 3% margin).
.intro-pic-container {
float: left;
width: 329px;
max-width:37%;
height: auto;
margin-top: 59px;
margin-left: 2.88%;
}
.intro-pic-container img{
width: 100%;
}
And element .pt-intro-text must have 60% width (or width + margin + padding = 60%).
If you want responsive design dont use size (width, margin and padding) in pixels only percentage.
Fiddle: http://jsfiddle.net/w2Njv/10/
PS: Sorry for my bad english
Actually, if you set up the pt-intro-text div with a float:left it would more "responsive" as it allows for a nicer view when seen on a smaller device for instance.
if you really want to avoid that behaviour, use a fixed min-width like:
.wrapper{ min-width: 1100px; ... }
See http://jsfiddle.net/zHVHL/1/