I am trying to place my leftbody and rightbody over top of my MidBody but it doesnt seem to work. I thought placing the Midbody to relative and the left and right bodies to absolute with a z-index would help but it doesnt. So i am clueless right now. Any help would be greatly appreciated.
.Header {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: calc(50%-16px);
height: 425px;
float: left;
margin-left: 3px;
position: absolute;
z-index: 1;
}
#rightbody {
background-color: #F1F1F1;
width: calc(50%-16px);
height: 425px;
float: right;
position: absolute;
z-index: 1;
}
<div class="Header"></div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
</div>
<div class="footer"></div>
I changed
float:left; -> left:0;
float:right; -> right:0;
and
width:calc(50%-16px); -> width:50%;
Final css :
.Header {
background-color:#CCCCCC;
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
}
.MidBody {
background-color:#141414;
width: calc(100%-16px);
height: 850px;
margin-top:3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color:#CCCCCC;
width:calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color:#F1F1F1;
width:50%;
height:425px;
left:0;
margin-left: 3px;
position: absolute;
z-index: 9999;
}
#rightbody {
background-color:#F1F1F1;
width:50%;
height:425px;
right:0;
position: absolute;
z-index: 9999;
}
<div class="Header"></div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
</div>
<div class="footer"></div>
Use position: fixed; instead of position: absolute;
Related
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
I am new to Asp.Net and CSS
i want div header fixed and Bottom left div fixed. And right side two div width based on percentage. So i tried like this
CSS
left: 0px;
position:fixed ;
z-index: 2;
border-bottom: 1px solid #00e5e6;
}
#DivLogo
{
height: 80Px;
width: 350px;
position:fixed;
margin-left: 20px;
margin-top: 10px;
border:1px solid #aaac62;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-color:Blue
}
#DivShow
{
height: 30Px;
width: 350px;
position:fixed;
float:left;
margin-left: 20px;
margin-top: 95px;
}
#DivRight
{ height: 70px;
width: 150px;
position:fixed;
left: 85%;
margin-top: 10px;
top: 0px;
}
#DivMenuRight
{
height: 30Px;
width: 500px;
position:fixed;
right:15%;
margin-top: 95px;
}
#DivBody
{
width: 100%;
height: 380px;
position: fixed;
margin-top: 155px;
margin-bottom: 20px;
top: 4px;
left: -2px;
margin-left: 0px;
margin-right: 0px;
}
#DivLeft
{
width: 200px;
height: 100%;
position: fixed;
float: left;
border-right: 1px solid #00e5e6;
}
#DivBodyRight
{
height: 100%;
position:absolute;
float: left;
right:0px;
left:200px;
top: 156px;
}
#DivVersion, #DivRelease, #DivUserAccount, #DivOther
{
width:70%;
height: 100%;
position:absolute;
float: left;
top:0px;
left:0px;
border-Right: 1px solid #00e5e6;
}
#grdVersions, #grdRelease, #grdUserAccount, #grdOther
{
width:100%;
height:100%;
}
#DivUserDetail
{
width: 30%;
height: 100%;
position:absolute;
float: right;
right:0px;
top:0px;
border-Left: 1px solid #00e5e6;
}
ASP.Net
<div id="DivMain">
<div id="DivHeader">
<div id="DivLogo">
</div>
<div id="DivShow">
</div>
<div id="DivRight">
</div>
<div id="DivMenuRight">
</div>
</div>
<div id="DivBody">
<div id="DivLeft">
</div>
<div id="DivBodyRight">
<div id="DivVersion" runat=server>
</div>
<div id="DivUserDetail">
</div>
</div>
</div>
</div>
Fiddle https://jsfiddle.net/fsp1vw2u/
Bottom right side div not showing properly. Its Start from middle.
What am doing wrong here?
am using visual studio 2008 and CSS 2.1
Change Position absolute to fixed
#DivBodyRight {
float: left;
height: 100%;
left: 200px;
position: fixed;
right: 0;
}
https://jsfiddle.net/fsp1vw2u/9/
I'm putting design into html+css - the question is - how do i draw curved lines on the sides, so that it would be scalable and responsive? What's the best way to do it
you can try this one:
section{
margin: 0 auto;
width: 600px;
text-align: center;
}
h1 {
position: relative;
//margin-top: 20px;
}
h1.one {
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px black;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
/* method 2*/
button
{
padding:8px;
background-color: gray
color:white;
border: 2px solid;
border-radius: 15px;
margin-top:2px;
position: relative;
z-index: 5;
}
.circle
{
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row
{
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
DEMO FIDDLE
Check as per the description this answer get your perfectly needs.
body {
background:#007DAD;
}
section {
text-align: center;
}
h1.one {
position: relative;
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px #FFF;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #007DAD;
padding: 0 20px;
position: relative;
z-index: 5;
}
.row {
height: 100px;
margin: 10px;
}
.circle {
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
margin:10px auto;
display:inline-block;
}
button {
padding:10px;
background-color: gray;
color:white;
border: 2px solid;
border-radius: 5px;
margin-top:-10px;
position: relative;
z-index: 5;
}
<section>
<h1 class="one">
<span>It Has Naver Been Easier</span>
</h1>
<div class="row">
<div class="circle"><p>1</p></div>
<div class="circle"><p>2</p></div>
<div class="circle"><p>3</p></div>
</div>
<button type="button">Order Now</button>
</section>
The following is my markup:
.play-controls {
.fa-play, .fa-pause {
font-size: 25px;
}
}
.volume-controls {
display: inline-block;
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 100px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
.player {
#album-artwork {
width: 80px;
height: 80px;
vertical-align: middle;
display:inline-block;
margin-right: 10px;
}
.wrapper {
display:inline-block;
.information {
margin-bottom: 5px;
#song-title {
font-size: 22px;
font-weight:bold;
margin-right: 5px;
}
#artist-album {
font-size: 18px;
}
}
.progress-bar {
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 600px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
}
}
<div class="play-controls">
<i class="fa fa-play" id="playpause"></i>
</div>
<div class="volume-controls">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
<div class="player">
<img id="album-artwork" src="build/images/guero.jpg">
<div class="wrapper">
<div class="information">
<span id="song-title">Go It Alone</span>
<span id="artist-album">Beck - Guero</span>
</div>
<div class="progress-bar">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
</div>
</div>
The divs with classes background, circle, and overlay in volume-controls are all position: absolute; with volume-controls as position: relative;.
Upon making play-controls, volume-controls, and player inline, play-controls is inline with volume-controls, but volume-controls is overlapping the player.
How would I be able to set everything in one line, without any overlapping?
EDIT: JSFiddle
You could float:left; the 3 main parts or display:inline-block; them the issue the player is over the volume-controls is because of the absolute positioned elements in the volume-controls. You could add a width to volume-controls.
.volume-controls {
display: inline-block;
position: relative;
width:150px;
}
Here is the fiddle