I have the following code:
<body>
<div id="boarder">
<div id="player-time"></div>
.
.
.
</body>
#player-time{
background-color: green;
height:30px;
width: 150px;
position:absolute;
top: 0px;
left:100px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: #5FBAAC;
height: 350px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
padding-top: 30px;
border-radius: 30px;
z-index: 10;
}
The id #player-time is being displayed in front of the boarder element. Can someone explain me why the z-index property is not working?
check the two example I posted:
1st child/parent z-index not same level, by default child will above parent. but if you use negative z-index at child and do not define z-index at parent, your child can go below parent.
2nd same level z-index at same level, z-index indicate how it stack
#player-time{
background-color: green;
height:100px;
width: 300px;
position:absolute;
top: -50px;
left:-50px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: red;
height: 50px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
text-align: center;
padding-top: 30px;
border-radius: 30px;
}
#player-time-test{
background-color: green;
height:100px;
width: 300px;
text-align: center;
color: white;
z-index: -10;
}
#boarder-test{
top: -50px;
left: 50px;
background-color: red;
height:100px;
position: relative;
width: 300px;
text-align: center;
border-radius: 30px;
z-index: 10;
}
<h2>child/parent z-index</h2>
<div id="boarder">
<div id="player-time">[child] Player-time(z-index: -10)</div>
[parent] boarder (no z-index)
</div>
<h2>same level z-index</h2>
<div>
<div id="player-time-test">Player-time(z-index: -10)</div>
<div id="boarder-test">boarder(z-index: 10)</div>
</div>
z-index has only an effect on siblings (i.e. on the same level), not children...
Just remove the z-index of the parent element --> duplicate question
#player-time{
background-color: green;
height:30px;
width: 150px;
position:absolute;
top: 0px;
left:100px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: #5FBAAC;
height: 350px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
padding-top: 30px;
border-radius: 30px;
}
<div id="boarder">
<div id="player-time"></div>
</div>
Related
How do I crop the parts of the "Today" red div that are not on the special div in order to make it look like a bookmark? Desired result is shown on the second image.
Thank you!
Actual image:
Desired image:
Html:
<div class="panel">
<div class="special">Special $120.00</div>
<div class="pr2">Today</div>
</div>
CSS
.special {
text-align: center;
margin-top: 20px;
}
.panel {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
height: 70px;
}
.pr2 {
background-color: #d13a2f;
color: #ffffff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
line-height: 35px;
text-align: center;
letter-spacing: 1px;
top: 5px;
right: -48px;
left: auto;
position: absolute;
padding-top: 20px;
width: 140px;
overflow: hidden;
display: block;
opacity: 0.6;
}
JSFiddle overlapping
Add overflow: hidden and position: relative to the .panel div:
.panel {
overflow: hidden;
position: relative;
}
Then adjust positioning values to your needs.
Updated fiddle
im making header for html. and this is the code
<html>
<head>
<style type="text/css">
body{
background-color: yellow
}
.atas{
background-color: red;
width: 700px;
border-radius: 50px;
top:0px;
height: 190px;
position: fixed;
left:200px;
}
.one{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
margin-left: 50px;
position: static;
}
.two{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.three{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.upermain{
opacity: 0.9;
background-color: black;
top:200px;
width: 100%;
position: relative;
text-align: center;
left: 0px;
}
.article{
opacity: 0.7;
background-color: lightgray;
width:100%;
height:500px;
top:280px;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div><div class="atas"><div class="one"><br/><font style="arial" color="green">HOME</font></div>
<div class="two"><font style="arial" color="green"><br/>Contact</font></div>
<div class="three"><font style="arial" color="green"><br/>Article</font></div>
</div> <div class="upermain"><h1>Articles</h1></div>
<div class="article">Text <br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
</body>
how to make the black background under the red background when scrolling?
im using opacity.if i delete the opacity it will become what i want.but i need the opacity
and how to make home contact and article to margin to the right?
here's the jsfiddle
http://jsfiddle.net/mhFxf/5015/
thanks before!
i think you need z-index in css.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
<style type="text/css">
body{
background-color: yellow
}
.atas{
background-color: red;
width: 700px;
border-radius: 50px;
top:0px;
height: 190px;
position: fixed;
left:200px;
z-index:99;
}
.one{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
margin-left: 50px;
position: static;
}
.two{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.three{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.upermain{
opacity: 0.9;
background-color: lightblue;
top:200px;
width: 100%;
position: relative;
text-align: center;
left: 0px;
}
.article{
opacity: 0.7;
background-color: lightgray;
width:100%;
height:500px;
top:280px;
position: relative;
left: 0px;
}
</style>
<body>
<div><div class="atas"><div class="one"><br/><font style="arial" color="green">HOME</font></div>
<div class="two"><font style="arial" color="green"><br/>Contact</font></div>
<div class="three"><font style="arial" color="green"><br/>Article</font></div>
</div> <div class="upermain"><h1>Articles</h1></div>
<div class="article">Text <br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
.header{
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
}
.subTitle{
width: 100px;
line-height: 70px;
float: right;
margin-right: 20px;
color: white;
font-size: 50px;
}
.content{
width: 2000px;
height: 3000px;
}
<div class="header">
<div class="subTitle">
hello
</div>
</div>
<div class="content">
</div>
Here is the code. The hello element should appear in the right when I scroll to the very right side. Please help!
Simply add
position: fixed;
right:0;
to .subTitle
Job done!
Add z-index:1; to .header, and position:absolute; z-index:2;left: 64%;/* or whatever spacing you want*/ to .subTitle. Don't forget to remove the float since it's no longer needed. Here is a pretty good article on z-index from MDN. So the CSS would look like this:
.header {
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
z-index: 1;
}
.subTitle {
width: 100px;
line-height: 70px;
/* float: right; */
/* margin-right: 20px; */
color: white;
font-size: 50px;
z-index: 2; /*z-index of 2 to overlay the .header element*/
position: absolute; /*absolute positioning*/
left: 64%; /*change this if needed*/
}
I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>
I am trying to let the width of a div to be expanded according to its content horizontally
the content is a floating divs , I want them to appear as one row
I used white-space: nowrap; but it is not working on IE and FF ( It works very fine on google chrome )
here is my HTML code :
<div class="floating_menu_container">
<div class="floating_menu">
<div class="floating_menu_item account">
<div class="sub_floating_menu">
<div class="sub_floating_menu_item"></div>
<div class="sub_floating_menu_item"></div>
</div>
</div>
</div>
</div>
and this is the CSS code :
.floating_menu_container{
position: absolute;
top: 25px;
left: 5px;
height: 50px;
z-index: 5;
}
.floating_menu_container .floating_menu{
height: 0px;
width: 40px;
background: #4D75A6;
z-index: -1;
position: absolute;
top: 35px;
left: 7px;
}
.floating_menu_container .floating_menu .floating_menu_item{
width: 30px;
height: 30px;
background: #94acc9;
border: 1px solid #6991c2;
margin: 7px 0px 4px 4px;
cursor: pointer;
position: relative;
}
.floating_menu_container .floating_menu .floating_menu_item .sub_floating_menu{
height: 30px;
position: absolute;
top: 0px;
background: #4D75A6;
left: 42px;
border: 1px solid #003980;
z-index: 10;
cursor: default;
white-space: nowrap;
}
.floating_menu_container .floating_menu .floating_menu_item .sub_floating_menu .sub_floating_menu_item{
width: 20px;
height: 20px;
background: #94acc9;
margin: 5px;
float: left;
cursor: pointer;
}
and here is the example on jsfiddle
I want to expand the div with class='sub_floating_menu' according to its content
Removing width: 20px; from your .sub_floating_menu_item, height: 30px; from .sub_floating_menu, and replacing float: left; with display: inline-block; should fix the issue, little demo: little link.