I have coded concentric circles as my menu bar and I am trying to use a:hover to effect the z-index of each circle. I have given each circle a display:block; property so that each circle is a link itself (not just the text within). Unfortunately, the a:hover z-index command isn't working at all. I have read the other threads on stackoverflow relating to this but none of those solutions seem to be my problem. Does anyone know what is going on?
Here is the CSS:
a:hover{
z-index:90000;
}
#container {
position: relative;
width: 500px;
height:500px;
}
#circle {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
border-radius: 50%;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
display: block;
z-index: 5;
}
#circle1{
position: absolute;
width: 85%;
height: 85%;
background-color: #e5e5e5;
border-radius: 50%;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
display: block;
padding-top: 100px;
margin-top: 7.5%;
margin-left: 7.5%;
z-index: 6;
}
#circle2{
margin-top: 15%;
margin-left: 15%;
position: absolute;
width: 70%;
height: 70%;
background-color: #0C9;
border-radius: 50%;
box-sizing: border-box;
color: #00F;
display: block;
z-index: 7;
}
#circle3{
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 50%;
height: 50%;
background-color: #C33;
border-radius: 50%;
box-sizing: border-box;
background-image: url(Sunset.jpg);
text-align: center;
vertical-align: middle;
color: #FFF;
display: block;
padding-top: 100px;
z-index: 8;
}
Here is the HTML:
<div id="container">
<div id="circle"></div>
<a style="display:block" a href="p1.html">
<div id="circle1">PHOTOGRAPHS</div>
</a>
<div id="circle2"></div>
<a style="display:block" a href="p1.html">
<div id="circle3">BED TIME</div>
</a>
</div>
Related
Safari has full support for FlexBox according to caniuse.
I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari:
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
position: absolute;
}
.inner-one {
width: 13rem;
height: 13rem;
border-radius: 50%;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
border-radius: 50%;
background-color: purple;
}
See JSFiddle here: https://jsfiddle.net/19n95exf/3/
Because position: absolute; break display: flex, use transform: translate instead
.container {
position: relative;
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
}
.container div {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inner-one {
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
Or give the inner elements a left/top value
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
border-radius: 50%;
position: absolute;
}
.inner-one {
left: 1.5rem;
top: 1.5rem;
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
left: 2.5rem;
top: 2.5rem;
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
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>
I want a heading, a logo and a button to all be in line where the heading is centered, the logo is offset to it's right and the button is small on the right hand side.
I can hack this together if I fix the margins but this is not scalable and therefore don't want it as a final solution. What's a better way to do this?
My code is below and I also have it posted here as well: http://codepen.io/blueduckyy/pen/RpKoMJ .
HTML:
<div class="top-bar username-heading">
<img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
<h1>blueduckyy</h1>
<a class="button user-edit-button" href="/users/edit">Edit</a>
</div>
CSS:
.username-heading img {
float: right;
width: 100px;
height: 100px;
margin-left:-250px;
margin-right:150px;
}
.username-heading h1 {
position: relative;
top: 18px;
left: 10px;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
float: right;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
You can place the items with 'position: absolute' inside the container:
.username-heading {
vertical-align: top;
position: static;
}
.username-heading img {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.username-heading h1 {
position: absolute;
top: 18px;
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
display: inline-block;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
position: absolute;
right: 0;
top: 120px;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
}
Keep in mind that the '.username-heading' position must be other than 'static'.
Just use positioning,
position: relative;
top: 25px;
This is the only css youll need.... Here is the pen
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: orangered;
}
img{
height: 40px;
border-radius: 50%;
}
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>
This is the Lightbox CSS sheet:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
But using it I get my pictures like this :
Pic1:
in other words - on the whole width of my page, I want to customise it in a way to get this result :
Pic2 :
I want to get 3-4 pics on each row, I tried by simply doing this:
<body style="width: 500px;">
<img src="pic/1.jpg" width="110" height="90" alt="image" />
<img src="pic/2.jpg" width="110" height="90" alt="image" />
</body>
But this leads to a bug when I go to large view for a single picture...
Thanks
Leron
use responsive image gallery plugins which display your images, when they are clicked by resizing them according to the width and height of your screen. a good one would be shadowbox or yoxview.