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/
Related
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
I am new at CSS positioning but could not understand of positioning the boxes.
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
position:absolute;
top:70px;
left:30px;
}
Demo
If I do not set the .box position, third box is appearing up front.
If I set the .box position as relative, third box is appearing under box
If I set set third box position as relative, it goes right.
What is the inner div position rule?
Remove position:absolute; from .third and it will look like This
Snippet:
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
top:70px;
left:30px;
}
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
hi just remove the third box position absolute and check it and it will be look like this then
I need to know how to cut that gray part from the blue box.
The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>
Can you see this approach:
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 100%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
Are you looking for this?
.father {
height:400px;
width:400px;
margin:150px auto;
position:relative;
background:green;
}
.border {
position:relative;
bottom:50px;
margin:auto;
border-radius:50%;
width:96%;
height:30%;
background-color:#DDD;
z-index:-9;
}
<div class="father">
<div class="border"></div>
</div>
.father
{
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: #04aada;
border-radius: 50px 50px 0 0;
}
.border
{
position: relative;
bottom: 25px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #fff;
z-index: 1;
box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
<div class="border"></div>
</div>
I have in my design a fixed head and sidebar and in the content area which is able to scroll I have a 3 column layout.
Now I want the 2 sidebars in my content area scrolling when there is enough content but then when its at bottom then the sidebars should be fixed and only the content in the middle should then scroll.
Here for a better understanding a high quality concept
.
Is this possible without JS and if yes how ?
Thanks for every help :)
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
overflow-y: scroll;
padding-bottom: 10px;
}
.one {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100px;
float: left;
padding-top: 10px;
background:green;
}
.three {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:orange;
}
.clear {
clear:both;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
</div>
If you the remove padding from your three colomns, add a child div to each for padding, give them a height of 100%, an overflow-x of scroll and give content a fixed position, all 3 columns will have a height of 100% and scroll independently.
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
top: 0px;
left 0px;
position: fixed;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
height:100%;
max-height:100%;
min-height:100px;
}
.one {
width: 22%;
min-width: 150px;
float: left;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100%;
float: left;
background:green;
}
.three {
width: 22%;
min-width: 150px;
float: left;
background:orange;
}
.column {
height:100%;
max-height:100%;
min-height:100px;
overflow-x: scroll;
}
.column .inner {
padding-top: 10px;
}
.clear {
clear:both;
}
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;