I'm having a lot of trouble trying to make a layout. I'm trying to make a box overlap an image, I'm trying to use absolute/relative positions but I think I'm doing it wrong. here is the layout
here is the code i have so far:
.trabalhos{
position: relative;
margin-top: 100px;
width: 100%;
max-width: 960px;
}
.caixa{
position: absolute;
left: 0%;
top: auto;
right: auto;
bottom: 10%;
overflow: visible;
width: 30%;
height: auto;
padding: 25px;
border-radius: 10px;
background-color: #333;
color: white;
}
#trabalhos-img-right{
float: right;
}
#trabalhos-img-left{
float: left;
}
#esquerda{
text-align: right;
}
#direita{
text-align: left;
right: 0%;
left: auto;
}
<div class="section-trabalhos">
<div class="container">
<h1>blablablablabla</h1>
<div class="trabalhos">
<div><img id="trabalhos-img-right" src="img-01.png"></div>
<div class="caixa" id="esquerda">
<h2>Lorem ipsum</h2>
<p>blablabla</p>
</div>
</div>
<div class="trabalhos trabalhos_2">
<div><img id="trabalhos-img-left" src="img-01.png"></div>
<div class="caixa" id="direita">
<h2>Lorem ipsum</h2>
<p>blablabla</p>
</div>
</div>
I'll have to make 8 of those, what is the best way?
Thanks in advance
I hope that I have solved this problem
<html>
<head>
<style>
.trabalhos{
width:100%;
max-width: 960px;
height: 60%;
margin-top: 100px;
position: relative;
}
.img{
width:80%;
height: 100%; /*Do not change it*/
}
.caixa{
position: absolute;
bottom:10%;
overflow: visible;
width: 30%;
height: auto;
padding: 25px;
border-radius: 10px;
background-color: #333;
color: white;
}
#trabalhos-img-right{
float: right;
}
#trabalhos-img-left{
float: left;
}
#esquerda{
text-align: right;
left: 0px
}
#direita{
text-align: left;
right: 0px;
}
#trabalhos-img{
width: 100%; /*Do not change it*/
height: 100%; /*Do not change it*/
}
</style>
</head>
<body>
<div class="trabalhos">
<div id="trabalhos-img-right" class="img">
<img id="trabalhos-img" src="img-01.png" /></div>
<div class="caixa" id="esquerda">
<h2>Lorem ipsum</h2>
<p>blablabla</p>
</div>
</div>
<div class="trabalhos">
<div id="trabalhos-img-left" class="img">
<img id="trabalhos-img" src="img-01.png" /></div>
<div class="caixa" id="direita">
<h2>Lorem ipsum</h2>
<p>blablabla</p>
</div>
</div>
</body>
This CodePen could be the solution. Just replace the svg element in the html and css code with your image and you're all set.
Also, this website can help you understanding the position property.
HTML
<div class="container">
<svg width="400" height="110">
<rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
</svg>
<div class="description">
<h1>Lorem Ipsum</h1>
<h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>
<div class="containersecond">
<svg width="400" height="110">
<rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
</svg>
<div class="description">
<h1>Lorem Ipsum</h1>
<h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>
CSS
svg {
position: relative;
left: 30px;
}
.description {
background-color: red;
width: 300px;
position: absolute;
top: 70px;
}
.containersecond {
position: absolute;
top: 300px;
}
Related
I am using only CSS and Flexbox to build a responsive page. I have a child element that should "overflow" outside the parent element as shown here:
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="assets/image-1.jpg">
</div>
</div>
CSS
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
background-color: #D64C31;
color: #FFFFFF;
align-self: flex-end;
width: 50%;
position: absolute;
bottom:0;
left:0;
padding: 40px 60px;
}
Any help would be appreciated!
Like that?
<html>
<head>
<style>
.container {
background: #ccc;
width: 50%;
margin: 0 auto;
position: relative;
height: 700px;
}
.overflowing-element {
background: red;
width: 200px;
height: 200px;
position: absolute;
right: -200px;
top: 0;
}
</style>
</head>
<body>
<div class="container">
test
<div class="overflowing-element">
bla
</div>
</div>
</body>
</html>
Just works with fixed width of that overflowing element, or with JavaScript.
EDIT: You just edited your images and now I don't know really what you mean :D
I figure it out, thank you for your help!
My parent element had an overflow: hidden I disabled it and adjusted the child element as follows:
bottom: -40px
If you have any feedback or this is considered a bad practice please let me know. I am just starting out here :)
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
/* overflow-x: hidden; */
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
position:absolute;
background-color: #D64C31;
color: #FFFFFF;
width: 50%;
padding: 40px 60px;
bottom: -20px;
left:0;
}
</div>
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://source.unsplash.com/800x300">
</div>
</div>
The property you are looking for is CSS Position.
Reference: CSS Position
.parent{
width:250px;
height: 20px;
background: yellow;
position:relative;
}
.child{
width:80px;
height: 100px;
background: purple;
position:absolute;
bottom: 0;
right:0;
}
<div class="parent">
<div class="child"></div>
</div>
Use the CSS positioning properties.
.container-hero {
position: relative; /* creates the container for absolutely positioned children */
}
.hero-content {
position: absolute;
bottom: -20px; /* use this offset to align vertically */
left: 20px; /* use this offset to align horizontally */
background-color: #D64C31;
color: #FFFFFF;
width: 225px;
padding: 40px 60px;
}
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://via.placeholder.com/500x250.png?text=hero image">
</div>
</div>
I have a problem, and I want to make #left be the same height as #right, I have set height: 100%; but it only works if there is content.
the HTML & CSS code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: #cfcfcf;
margin: 0;
}
#wrapper {
width: 900px;
height: 100%;
background: white;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#left
{
width: 200px;
min-height: 100%px;
background: blue;
overflow: hidden;
height: 100%;
float: left;
}
#leftbottom
{
width: 200px;
height: 30px;
background: red;
float: left;
}
#right
{
width: 800px;
background: cyan;
height: 100%;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<div id="leftbottom"></div>
</div>
<div id="right">
<h1>Content ipsum</h1>
<h2>Lorem ipsum</h2>
<h2>Lorem ipsum</h2>
<h2><- White space</h2>
</div>
</div>
</body>
</html>
I've also tested with position: absolute but it does not work either, how can I solve this?
also, I do not need to establish fixed height
If you put %, the words that can use the 100 of its size, not that it is of such size, if you want to assign size, use px
#left
{
width: 200px;
/*min-height: 100%px;*/ % before px? really?
background: blue;
overflow: hidden;
height: 100px;
float: left;
}
#right
{
width: 800px;
background: cyan;
height: 100px;
float: right;
}
body {
background-color: #cfcfcf;
margin: 0;
}
#wrapper {
width: 1000px;
height: 300px;
background: white;
}
#left
{
width: 200px;
background: blue;
float: left;
height: 100%;
}
#right
{
width: 800px;
background: cyan;
height: 100%;
float: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<div id="leftbottom"></div>
</div>
<div id="right">
<h1>Content ipsum</h1>
<h2>Lorem ipsum</h2>
<h2>Lorem ipsum</h2>
<h2>White space</h2>
</div>
</div>
</body>
</html>
Well the solution is not big for it. You need to use bootstrap column with equal height.
<div class="row row-eq-height">
<div class="col-6">Hello</div>
<div class="col-6">World</div>
</div>
Know more read this
http://getbootstrap.com.vn/examples/equal-height-columns/
I am trying to achieve the following layout (except with a straight line obviously)
But I'm unsure how to, I tried adding a right border to the left element, but it isn't centred. How do I go about it?
This is what I have at the moment
div.contentswrapper {
text-align: center;
margin: 0 auto;
max-height: 720px;
}
div.pageleft, div.pageright {
display: inline-block;
vertical-align: top;
overflow: auto;
}
div.pageleft, div.pageright {
width: 40%;
margin-left: 3%;
margin-right: 3%;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
Change your margins to paddings, and then set the border
div.contentswrapper {
text-align: center;
margin: 0 auto;
max-height: 720px;
}
div.pageleft,
div.pageright {
display: inline-block;
vertical-align: top;
overflow: auto;
}
div.pageleft,
div.pageright {
width: 40%;
padding-left: 3%;
padding-right: 3%;
}
div.pageleft {
border-right: 2px solid red;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
</div>
Option 2, use a pseudo element and its border
div.contentswrapper {
position: relative;
text-align: center;
margin: 0 auto;
max-height: 720px;
}
div.contentswrapper::after {
content: '';
position: absolute;
top: 0;
left: calc(50% - 2px);
bottom: 0;
width: 0;
border-right: 2px solid red;
}
div.pageleft,
div.pageright {
display: inline-block;
vertical-align: top;
overflow: auto;
}
div.pageleft,
div.pageright {
width: 40%;
margin-left: 3%;
margin-right: 3%;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
</div>
You don't really need to use inline-block, you can just float them and set the right border of the left div.
Changing the margin settings to paddings instead will correct the slight center misalignment because your total widths don't add up to a perfect 100%.
Also, you don't need 2 style rules with the same selectors, you can combine them.
div.contentswrapper {
text-align: center;
margin: 0 auto;
max-height: 720px;
}
.pageleft { border-right:2px solid black;}
div.pageleft, div.pageright {
float:left;
vertical-align: top;
width: 42%;
padding-left: 3%;
padding-right: 3%;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>sdfff</p>
<p>sdfsdfsd</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>sdfff</p>
<p>sdfsdfsd</p>
</div>
I have a question about floating 2 divs inside of a position relative div. They should float left, but it does not work. I tryed it a few times by rewriting the CSS in developer tools. I hope someone can help me. I use the MDL (Material Design Lite) responsive framework from Google Inc. The result should look like in the screenshot. Thanks in advance for your help.
Final result
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
h4 {
font-size: $card-title;
color: $dark-text;
margin-left: 12px;
margin-top: 3px;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: absolute;
width: 117px;
img {
height: 100%;
position: absolute;
width: 100%;
}
.circle-check {
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="../assets/cards/card-img-10.png" alt="sera">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
I couldn't really run your code, there are too many missing variables to be able to work off of that. So I redid the code. I hope this can help. You just need to manage your widths and float everything left:
Take a look at this jsFiddle.
EDIT: The jsFiddle link was incorrect at first. Reclick this link if code relates to something else entirely.
EDIT 2: Fixed padding error in code. And replaced jsfiddle link.
html:
<div class="header-area">
<div style="padding: 20px; ">
Yellow header
</div>
</div>
<div class="container">
<div class="element" style="background-color: green; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: red; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: orange; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
<div class="text">
This is the description
</div>
</div>
</div>
</div>
css:
.header-area{
background-color: yellow;
height: 100px;
width: 100%;
}
.container{
height: 100%;
width: 100%;
float: left;
background-color: lightblue;
}
.element{
float: left;
width: 50%;
height: 150px;
}
img{
float: left;
}
.description{
text-align: center;
}
.text{
padding-top: 50px;
}
I've made some modifications in your code, hope it can help you to completely achieve your goal:
To position your text over the img, you need to relative position their parent, and absolute position the text. Then you can move it over the img.
To easily align the img with the other elements, I think is useful to wrap these elements and give them an inline-block display. Then you can adjust them at the position you want.
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
}
h4 {
font-size: $card-title;
color: $dark-text;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: relative;
width: 117px;
}
.circle-check {
position: absolute;
top: 0;
left: 0;
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
.info-wrapper{
display: inline-block;
vertical-align: top;
}
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="http://sweetclipart.com/multisite/sweetclipart/files/ff0000%20Color%20Square%20RGB%20Red.png" alt="sera" width="100px">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="info-wrapper">
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
</div>
I am trying to align to divs parallel from each other, but it is not lining up properly.
I have already tried a number of the solutions posted on the site, but none of them are working.
Any ideas on how to resolve this issue would be appreciated.
<section class="section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="content">
<div class="wrapper">
<p class="content-media left">
<img src="http://lorempixel.com/g/400/200/" alt="">
</div>
<div>
<div class="col-xs-12">
<div class="float:right;width:45%;">
<p>Lorem Ipsum <em>Lorem</em>, Lorem impsum Lorem Ipsum Lorem Ipsum</em>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
body {
font-family: georgia, "times new roman", times, serif
}
.container {
width: 100%;
}
.container p,
.container div img {
display: inline-block;
}
.container p {
width: 60%;
float: right;
}
.container div img {
width: 38%;
float: right;
}
.logo {
position:fixed;
bottom: 25px;
left: 0px;
height: 100px;
width: 300px;
}
p {
font-size: 18px;
line-height: 22px;
margin-right: 360px;
right: 100px;
}
.dropcap {
float: left;
font-size: 76px;
line-height: 76px;
margin: 0 15px 5px 0;
}
.section {
background-color: #fff;
position: relative;
z-index: 10;
}
.section-header {
margin-top: 50px
!important;
z-index: 1;
}
.section-header-content {
position: fixed;
bottom: 400px;
left: 200px;
color: white;
}
.main-title {
position: fixed;
bottom: 400px;
left: 200px;
color: white;
}
.section-header-content2 {
position: fixed;
bottom: 50px;
left: 200px;
color: white;
}
.main-title2 {
position: fixed;
bottom: 400px;
right: 200px;
color: white;
}
.section-video-bg {
margin-top: -10px;
}
.content {
padding: 40px 0 25 ;
}
.content h3 {
font-size: 27px;
line-height: 27px;
margin: 70px 0 30px 0;
}
.content .content-media {
width: 40%;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding: 30px 0;
}
.content .content-media.right {
float: right;
margin-left: 20px;
}
.content .content-media.left {
float: right;
margin-right: 800px;
bottom: 600px;
}
.content .content-media img {
max-width: 100%;
}
.column {
float: left;
width: 50%;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container video {
position: relative;
z-index: 0;
top: 0;
bottom: 0;
}
.video-container video.fixed {
position: fixed;
top: 50px;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.wrapper {
margin: 0 auto;
width: 960px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
}
You have a lot of stray divs on your html as well as a lot of css properties not needed (e.g. float property) which are already done by bootstrap's default css.
Here is the correct way to nest your div columns within a row:
<section class="section">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="content">
<div class="wrapper">
<img src="http://lorempixel.com/g/400/200/" class="img-responsive" alt=""/>
</div>
</div>
</div>
<div class="col-xs-6">
<p>Lorem Ipsum <em>Lorem</em>, Lorem impsum Lorem Ipsum Lorem Ipsum.</p>
</div>
</div>
</div>
</section>
Here is a jsfiddle with the above code: http://jsfiddle.net/AndrewL32/623ftfc2/
Your HTML is not properly formatted
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-6">
<img class="img-responsive" src="http://lorempixel.com/g/400/200/">
</div>
<div class="col-xs-2 col-sm-2 col-md-6">
<p>Lorem Ipsum</p>
</div>
</div>
https://jsfiddle.net/j0m6ddpo/1/