i have one class row in my web page and in that class i have one division but i want to display that division in center however m not able to done this.
this is my simple row class.
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin" class="col-md-6"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
and my css
#left
{
height: 150px;
}
#leftin
{
background: url(news_image_04.jpg) no-repeat;
background-size: 100% 100%;
height: 150px;
margin: 0 auto;
}
#right
{
background: url("news_image_03.jpg") no-repeat;
background-size: 100% 100%;
height: 150px;
}
i want to center leftin division under left division
Just make the float none of this.
#leftin {
background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
border: 1px solid black;
float: none; /* make the float none */
height: 150px;
margin: 0 auto;
}
#left
{
height: 150px;
border:1px solid red;
}
#leftin {
background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
border: 1px solid black;
float: none; /* make the float none */
height: 150px;
margin: 0 auto;
}
#right
{
background: url("news_image_03.jpg") no-repeat;
background-size: 100% 100%;
height: 150px;
border:1px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin" class="col-md-6"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
For leftin remove class="col-md-6" and add width 50%
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
#leftin
{
background: url(news_image_04.jpg) no-repeat;
background-size: 100% 100%;
height: 150px;
margin: 0 auto;
width:50%;
}
add class to col-md-offset-3 div with id leftin
like below
<div id="leftin" class="col-md-6 col-md-offset-3"> </div>
Updated to your example
#left
{
height: 150px;
}
#leftin
{
background: url(news_image_04.jpg) no-repeat;
background-size: 100% 100%;
height: 150px;
margin: 0 auto;
}
#right
{
background: url("news_image_03.jpg") no-repeat;
background-size: 100% 100%;
height: 150px;
}
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin" class="col-md-6 col-md-offset-3"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
Related
I want the max width of the "circlecontainer" to be 300px.
but when the browser exceeds 1200px in width, I want my 4 child divs (with max width 300px) to stay centered in the browser.
They are currently positioned on the left side.
Here is my html and css.
any tips would be appreciated :)
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
text-align: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .66);
}
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
Just replace text-align: center; with justify-content: center; for .getstartedcirclescontainer.
HTML:
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
CSS:
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
justify-content: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.66);
}
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>
So I have this code:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
width: 200px;
height: 200px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
background: red;
}
.img-circular1{
background-image: url('/Images/learn.jpg');
}
.img-circular2{
background-image: url('/Images/watch.jpg');
}
.img-circular3{
background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px;
position: relative;
margin-left:auto;
margin-right:auto;
width:70%;
background-color: green;
overflow: auto;
bottom: 0;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>
I have no managed to get 2 of them to show in a green box. But the third (which I duplicated before and after the other 2) will not show for some reason?
Also, they are not equidistant apart - how can I get them an equal spacing apart?
Please help
NOTE: Instead of images there are red circles, just for visibility reasons.
Apply float: left on images themself, not on container:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
/*width: 200px;*/
/*height: 200px;*/
width: 100px;
height: 100px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
}
.img-circular1{
background-image: url('/Imageslearn.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
background-image: url('/Images/watch.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
background-image: url('/Images/practice.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.container1{
left: 15%;
width: 70%;
/* float: left; */
height: 300px;
position: relative;
}
<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>
To answer your second question:
wrap circles in some other div
make their width be some percentage value and float them left
set margin on circles to margin: 0 auto.
Here is prototype for you to study:
#green {
background: green;
padding: 10px;
overflow: auto;
}
#blue {
background: blue;
width: 50%;
float: left;
border: 1px solid #fff;
box-sizing: border-box; /*good for when there is border or padding*/
}
#red {
background: red;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
<div id="green">
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
</div>
I updated your code to use FlexBox. Since you want your circles to be equally spaced across the row, float: left won't help much. I had to add a wrapper div around each circle div so that it could expand to fill the space without distorting the circles.
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap {
flex-grow: 1;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
<div class="wrap">
<div class="img-circular1"></div>
</div>
</div>
I want to achieve the following:
layered div
rows are working, but I can't put the top layer div (the one with the class map) in the right place, it always pushes some of the rows to the side. how can I achieve the desired result using bootstrap?
/* my css: (index.css) */
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
position: relative;
z-index:9999;
background:red;
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map"> <!-- top layer div -->
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
Something like this?
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
position:relative;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
position: absolute;
background:red;
top:50%;
left:50%;
z-index:9999;
transform:translate(-50%,-50%);
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map"> <!-- top layer div -->
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
Check this out:
If you want that top level div stay where it is, you can make .map > position:absolute
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
height:150px;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
z-index:9999;
background:red;
left:-50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map">
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
</div>
I would like to find out how can i repeat div till | centered div | and repeat div again (like a table). As i understand, i have to use responsive condition, but i have no idea how can i use it.
here is my code sample (HTML):
<!-- Slider -->
<div id="slider">
<div class="big"><img class="opt" src="images/urban1.jpg" width="930" height="367" alt="big_thumb"></div>
<div id="wrap">
<div class="line"></div>
<div id="thumbs">
<div id="button_left"></div>
</div>
<div class="line"></div>
</div>
</div>
CSS:
#slider #wrap {
width: 100%;
height: 87px;
border: 1px #666 solid;
}
#slider #wrap .line {
background:url(../images/dotted_line.png) top repeat-x;
width: ??;
height: 15px;
float: left;
}
#slider #wrap #thumbs {
width: 940px;
height: 87px;
margin: 0px auto;
border: 1px #000 solid;
}
Thanks for help.