I'm trying to make a page like this and I've tried border radius but i just can't get it right. My border becomes too round and always looks off when the middle portion of the div starts to see the effects of border radius.
Pic below of What I want
How would I achieve this?
What I have
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
css:
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
you also have the option to use an extra class and a pseudo to hide partially the image:
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
.rounded {
position:relative;
overflow:hidden;
}
.rounded:before {
content:'';
position:absolute;
top:-15vh;
bottom:-15vh;
right:0;
width:30vw;
border-radius:0 50% 50% 0/ 100%;
box-shadow:
15vh 0 white,
inset -3px 0 2px white /* inset is optionnal and buggy at screen .. tiny gap shows image in between both shadows */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class=" rounded hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
well you could start with this :) off course different browser have different css for border
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 800px;
object-fit: cover;
border-bottom-right-radius: 300px;
border-top-right-radius: 323px;
}
.box{
border: 1px solid green;
width: 500px;
background: white;
height: 200px;
display: inline-block;
position: absolute;
top: 190px;
left: 90px;
}
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6 box" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
Related
in my HTML code, I have some rows and div, but one div is shown before another, even if in the code is after. Div with class "contact" is shown before div with class "photos"
Photo: https://imgur.com/a/Y8BGQIM
<div class="photos">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Galerie Foto</div>
</div>
<div class="gallery">
<img src="background1.jpeg" alt="Cinque Terre">
</div>
<div class="gallery">
<img src="galerie1.jfif" alt="Forest">
</div>
<div class="gallery">
<img src="galerie2.jfif" alt="Northern Lights">
</div>
<div class="gallery">
<img src="galerie3.jfif" alt="Mountains">
</div>
</div>
<div class="contact">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Contact</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 section-subheading">
<h1><br>
<br>
</h1>
</div>
</div>
</div>
And the css code that I applied to the divs:
.photos{
width: 100%;
position: absolute;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
position: absolute;
background-color: black;
}
Hope deleting or commenting position: absolute in both the places will give you expected result.
Give a try. to below CSS
.photos{
width: 100%;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
}
Position absolute will position both divs on top of one another at the top of the page if no other styling positions then differently. Remove the position absolute it is not needed here and add a float left to your photos class and your contact class so that the divs fall in order under one another because your gallery has a float left set.
.photos{
width: 100%;
float:left;
background-color: green;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
float:left;
}
I need to scroll parts of a div and ignore scrolling on other parts.
In my example I need to scroll blue and green but want red to stay on its place.
JSFiddle
<div style="width: 100px;
height:200px;
border: solid black 1px;
overflow-x: auto">
<div style="width: 120px; height: 50px;background-color:blue">
</div>
<div style="width: 100px; height: 30px;background-color:red">
</div>
<div style="width: 120px; height: 50px;background-color:green">
</div>
</div>
Does anyone has an idea how to solve my problem?
You can use position: fixed:
#wrapper {
width: 100px;
height:200px;
border: solid black 1px;
overflow-x: auto;
}
#blue {
width: 120px;
height: 50px;
background-color:blue;
}
#red {
width: 100px;
height: 30px;
background-color:red;
position: fixed;
}
#green {
width: 120px;
height: 50px;
background-color:green;
}
<div id="wrapper">
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
Do this change.It worked for me:
<div style="width: 100px; height:200px; border: solid black 1px;overflow-x: auto">
<div style="width: 120px; height: 50px;background-color:blue">
</div>
<div style="width: 100px; height: 30px;background-color:red;position:fixed;">
</div>
<div style="width: 120px; height: 50px;background-color:green">
</div>
</div>
Hope this is what you want.
I have the following html where I want the left div to show an image about 20% and the second div to contain text and take up the rest of the width. The problem I have is the second div gets pushed to the button when the image is added:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
This example as you can see pushes the text to the bottom. But if I remove the image then all is well:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; ">
No Image
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
If I float the image to the left, it behaves properly but the table is not taking the whole width of the browser now
<div style="display:table; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
Here is my demo
I've tried different things but nothing seems to work. So if anyone can give me any tips, it would be appreciated.
You forget to add width:100% on the bottom div.
See this JSFiddle.
It should be like this:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</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 have two Div Tag
I want Make them Side by side
right div fixed at width 200 and left div fill remained area but code dont work
here is my code
<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red; position: fixed;" ></div> </div>
You should probably not float and position:fixed your elements. Also inline css is BAD. Here is a working JSFiddle. Have a look at position:absolute; inside a position:relative;
Also I added box-sizing to make borders go inside their containers.
HTML
<div id="div_cont">
<div id="div2"></div>
<div id="div3" ></div>
</div>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#div_cont{
position:relative;
width:100%;
height:100px;
padding-left:200px;
}
#div2{
border: 5px dashed blue;
position:absolute;
top:0;
left:0;
width:200px;
bottom:0;
}
#div3{
border: 5px dashed red;
min-height:100px;
}
you need to use margin property in css
see here
i have change some properties in your css
<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="height: 100px; border: 5px dashed red; position: fixed; margin-right:200px;" ></div>
<div style="clear:both;"></div>
</div>
chk it and have a nice day
<div style="width: 100%;">
<div style="float: right; min-width: 200px; width:20%; height: 100px; border: 5px dashed blue; "></div>
<div style="float:left; width:79%;">
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red;" ></div>
</div>
</div>
in CSS3 is possible. But be careful with the position:fixed
<div style="width: 100%; height: 100px; border: solid thin green; ">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue; "></div>
<div style="float: left; width: calc(100% - 220px); height: 100px; border: 5px dashed red; ">
</div>