I have the code which got me three circles connected by two lines. Have a look here: JSFIDDLE
Here is my code:
HTML
<div class="form-group">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle" style="float:left;"></div>
<div id="horizontal" style="float:left;"></div>
<div class="circle" style="float: right;"></div>
<div id="horizontal" style="float: right;"></div>
<div class="circle"></div>
</div>
<div class="col-md-4"></div>
</div>
</div>
CSS
#horizontal
{
width: 230px;
border-bottom: 2px solid #CCCCCC;
padding-top: 6px;
}
.circle {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
}
But this wont be responsive as i am setting width component to it. Is there anyway i can make it responsive using twitter bootstrap.
Using #media queries wont help for this case. Any help will be appreciated.
For info:
You could use a background-image or gradient too : DEMO
CSS revisited
.form-group {
background:linear-gradient(to top,#cccccc,#cccccc) repeat-x center;/* gradient can be replace for a 1pixel gray image */
background-size:2px 2px;
min-width:50px;/* keep those 3 15px boxes on one line */
}
.circle {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
margin:auto;
}
& less HTML
<div class="form-group">
<div class="circle" style="float:left"></div>
<div class="circle" style="float: right;"></div>
<div class="circle"></div>
</div>
The simplest solution contains two divs and two pseudo elements. position: absolute keeps the circles over the parents border and position: relative keeps the circles positioned relative to the parent.
Have an example!
HTML
<div class="parent"><div class="child"></div></div>
CSS
* {
margin:0;
padding:0;
}
.parent {
margin:100px 0 0;
width:100%;
border-bottom:2px solid #CCC;
position:relative;
z-index:-1;
}
.parent:before,.parent:after,.child {
background:#CCC;
width:15px;
height:15px;
border-radius:50%;
border:1px solid #CCC;
position:absolute;
content:'';
top:-8px;
}
.parent:before {
left:0;
}
.parent:after {
right:0;
}
.child {
left:50%;
margin-left:-8px;
}
Try this:
html:
<div class="responsive-circle"><i></i></div>
css:
.responsive-circle {
height: 2px;
background-color: #CCC;
overflow: visible;
position: relative;
}
.responsive-circle:before,
.responsive-circle:after,
.responsive-circle > i {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
position: absolute;
content: "";
top: -7px;
}
.responsive-circle:after {
right: 0;
}
.responsive-circle > i {
left: 50%;
left: calc(50% - 9px);
}
demo: http://jsfiddle.net/m787ydjz/
Related
When the browser window is resized, the borders are shifting away from the content?
How can I achieve a design where the border remains in one place, no matter the height of the window?
.story_header {
position: relative;
display: flex;
justify-content: center;
}
.story_header:before,
.story_header:after {
content: '';
width: 100px;
position: absolute;
border: 2px solid black;
margin-top: 20px;
left: 35%;
}
.story_header:after {
right: 35%;
left: auto;
}
<div class='section_1'>
<div class="grid-x">
<div class='large-12 cell'>
<h2 class='story_header'>Our Story</h2>
</div>
</div>
You need to wrap the 'Our Story' to an element let's say span then add the pseudo elements on that span. Try this:
CSS:
.story_header{
position:relative;
display:flex;
justify-content: center;
}
.story_title{
position:relative;
}
.story_title:before, .story_title:after{
content:'';
width:100px;
position:absolute;
border:2px solid black;
margin-top:20px;
}
.story_title:before{
right:100%;
}
.story_title:after{
left:100%;
}
HTML:
<div class="grid-x">
<div class='large-12 cell'>
<h2 class='story_header'> <span class="story_title">Our Story</span></h2>
</div>
</div>
How do I place an image on top of a button with html and css?
<div>
<img src="photo.jpg">
<button>Text</button>
</div>
I guess it should be something like
div {
position: relative;
}
img {
position: absolute;
top: 10px;
}
but it acts a bit weird.
Is it possible to just have a normal div and then set the img to float on top of everything else in the div element?
I don't know what's your purpose exactly, if you want the image to take the whole line, make the button lay beneath, why don't set the CSS display attribute of the image to display:block;?
hello see the below one its simple with a few line code
<div style="position:relative;" >
<img src="http://www.industrydynamics.ca/images/skype_icon.png" width="100" height="100" >
<input type="button" name="" value="Button" style="position:absolute;width:80px;left:10px;top:120px;" >
</div>
You can use position: absolute with transform: translate() on img.
This calc(-100% - 1px) means
-100% or - height of element (img in this case) that you are performing transform on, so it will translate for its own height up on Y axis
-1px is for top border on div element.
div {
position: relative;
display: inline-block;
border: 1px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 1px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
Just to demonstrate if you have border of 5px then you should use -5px in calc.
div {
position: relative;
display: inline-block;
border: 5px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 5px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
#bottom{
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
}
#bottom .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
<div id="bottom">
<div class="content">
<img src="http://placehold.it/182x121"/>
<button>Text</button>
</div>
</div>
May be you are trying to achieve something like this.
.userIcon {
background: url('https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png') no-repeat;
height:20px;
width:20px;
background-size:20px;
top: 8px;
}
.left {
float:left;
}
.right {
float:right;
}
.clear{
clear:both;
}
.button{
padding:10px;
color: #FFF;
background-color: #0095ff;
border:1px solid #07c;
box-shadow: inset 0 1px 0 #66bfff;
}
.btnText{
margin:2px 0px 0px 10px;
}
<div>
<button class="button">
<span class="left userIcon"></span>
<span class="right btnText">Create user account</span>
<span class="clear"></span>
</button>
</div>
If you just want to make the image to come over the button, you can make the display as block
check the following snippet
div img{
display:block;
}
button{
text-align:center;
margin:40px;
padding:10px;
}
<div>
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png">
<button>Text</button>
</div>
Hope this helps
Is there anyway to create similar to the attached with HTML/CSS, that works responsive? without using am image?
Unable to get the oragne border & content added in
CSS
.left {
border-bottom: 70px solid #3488b1;
border-right: 1000px solid transparent;
height: 0;
position: absolute;
bottom:0;
width: 1px;
opacity:.5;
}
.right {
border-bottom: 70px solid #3488b1;
border-left: 1000px solid transparent;
height: 0;
width: 1px;
position: absolute;
bottom:0;
}
.footer {height:100px;}
& HTML
<div class="footer">
<span class="left"> </span>
<span class="right"></span>
</div>
One way is to use transforms.
html, body {
height:100%;
width:100%;
}
#responsive {
position:relative;
height:25%;
width:80%;
overflow:hidden;
min-height: 80px;
}
#triOne {
position:absolute;
background-color:aqua;
height:300%;
width:300%;
transform: rotate(10deg);
top:55%;
left:-100%;
}
#triTwo {
position:absolute;
background-color:blue;
height:300%;
width:300%;
border: 5px solid orange;
transform: rotate(-10deg);
top:45%;
right:-100%;
}
#content {
position:absolute;
right:10px;
bottom:10px;
color:white;
}
<div id="responsive">
<div id="triOne"></div>
<div id="triTwo"></div>
<div id="content">content</div>
</div>
It's not really responsive, but I think with a few tweaks you should be able to get it the way you want it.
I need to align multiple DIVs horizontally and vertically inside my main DIV divBig. Each DIV should overlap one over the other but should be in the centre of the main DIV divBig.
This is my DIV structure:
<div id="divBig">
<div class="divBigInner">
<img class="innerSub1" src="image.png" />
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
This is what I tried so far. But Does not align correctly.
#divBig {
background-color: #ff6600;
text-align: center;
}
.divBigInner{
position:relative;
height: 100%;
}
.innerSub1{
position:absolute;
max-width:550px;
width:100%;
z-index: 1;
margin: auto;
pointer-events: none;
}
.innerSub2{
position:absolute;
z-index: 2;
top:10px;
display:inline;
}
.innerSub3{
position:relative;
max-width:550px;
width:100%;
z-index:0;
margin: auto;
pointer-events: none;
}
Thank you.
like this you are asking?
<div id="divBig">
<div class="divBigInner" align="center">
<div class="innerSub1"></div>
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
Css
<style>
#divBig {
background-color: #fff;
text-align: center;
}
.divBigInner{
height: 100%;
}
.innerSub1,.innerSub2,.innerSub3{
border:1px solid #f00;
padding:10px;
margin:10px;
width:100px;
}
</style>
Can you try this:
<div id="divBig">
<div class="divBigInner" align="center">
<div class="innerSub1"></div>
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
Css
<style>
#divBig {
background-color: #fff;
text-align: center;
}
.divBigInner{
height: 100%;
position:relative;
}
.innerSub1,.innerSub2,.innerSub3{
border:1px solid #f00;
padding:10px;
margin:10px;
width:100px;
height:100px;
position:absolute;
margin-left:-50px; /*formula to make div center horizontal (left 50% - width/2)*/
margin-top:-50px; /*formula to make div center vertical (top 50% - height/2)*/
}
</style>
I am stuck here. Please help.
I want to make the following through css.
But when I use CSS positioning, I am getting this output
The fourth(GREEN) layer should go under first layer(BLUE) which is not happening.
This is the code I used.
HTML:
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
CSS:
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}
JSFiddle: http://jsfiddle.net/rkubs/
Even I tried to use Z-index. But no use. Help me. Thanks in advance.
WORKING DEMO :before
senario:
Using only one pseudo-element :before you just need to set border-top and border-right then give it an absolute position on the bottom left of div2
With the same HTML code as OP all you need is a Pseudo-element :before or :after combine witn z-index. To make it easy i put numbers in your HTML.
Note: you habe to set position relative to the element with the pseudo, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.
HTML
<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div>
CSS
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO WITH BOX-SHADOW
Here you just need to change the width and height of .box2.
senario:
you choose one div in my case div2 you don't set the background-color then reset the the borders border:none; .
Since you have set div width, height and position relative you can now set :before and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for :before set border-top and for :after set border-bottom.
Now set for both of then border-left and border-right.
div{
height:100px;
width:100px;
border:solid 1px;
position:relative;
}
.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '';
position: absolute;
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO :BEFORE :AFTER FLEXIBLE
I'm not sure you can do that with normal way, a little hack may be help.
What i do is to add another box right under .box1 with z-index above of all, and with size 50% of the parent.
HTML:
<div class="box1">
<div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS:
.box1-fake{
background-color:#00d8ff;
position:absolute;
left: -1px;
top: -1px;
z-index: 1000;
width: 50%;
border-right: 0 none;
}
You could use clip on a pseudo element after the first box to get this working:
.box1:after {
content: "";
border:solid 1px;
background: #00d8ff;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
clip: rect(76px 32px 102px -1px);
}
FIDDLE
For more information about the css clip property see this mozilla page
It also has cross browser support
Split the left box in two sections, upper and lower section, and assign z-indexes accordingly.
How about somethign like this:
<div class="box2">
<div class="box-top"></div>
<div class="box-bot"></div>
</div>
## css ##
.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}
.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}
.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}
http://jsfiddle.net/a8fXP/30/