Can't make a div overlap another specific div - html

I have two elements a nav div and a slide controller div, but I just cannot make the nav div overlap the slide controller div. Here is my code (1. Nav code 2. Slide controller code):
nav {
position: absolute;
width: 200px;
height: 100vh;
background-color: white;
margin-top: -20px;
z-index: 1;
}
nav ol {
margin-top: 100px;
width: 190px;
}
nav li{
display: block;
margin: 0px;
padding: 15px;
position: relative;
width: 170px;
border-bottom: 1px solid #bfbebe
}
nav a {
color: black;
}
#Slider_Control {
position: absolute;
z-index: 2;
width: 210px;
height: 40px;
background-color: #d51200;
margin-left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
margin-top: 574px;
}
.CircleControl {
width: 10px;
height: 10px;
display: inline-block;
background: white;
border-radius: 100%;
margin-right: 5px;
margin-left: 5px;
}
#Circles {
text-align: center;
height: 40px;
line-height: 40px;
}
#Arrow_1, #Arrow_2 {
position: absolute;
width: 20px;
height: 0 auto;
margin-top: -40px;
padding: 10px;
background: #ed1602
}
#Arrow_2 {
margin-left: 170px;
transform: rotate(180deg);
}
#Triangle_1 {
width: 0;
height: 0;
border-bottom: 14px solid transparent;
border-left: 20px solid #7d0b00;
margin-left: 210px;
margin-top: -14px;
}
#Triangle_2 {
position: absolute;
width: 0;
height: 0;
border-bottom: 14px solid transparent;
border-right:20px solid #7d0b00;
margin-top: -14px;
margin-left: -20px;
}
I hope someone could solve this problem that the slider controller keeps overlapping the nav div, which sould be the other way around.
(Let me now if you need some more information)

Well from what i'm seeing, if you want the nav tag to overlap #Slider_Control, since they both have position:absolute, all you have to do is put an higher z-index on your nav tag. Right now your nav is at 1 and your Slider_Control is at 2, so the Slider_Control will always be on top.
But again, I could be wrong, providing the html context of this would help.

Related

How can i add smooth triangle bottom of div

i have a box and i need to put smooth triangle bottom of the div but i couldn't achieve as i want how can i do this like below image ?
.slide-box {
position: relative;
display: inline-block;
background: #e41113;
border: 1px solid #df2b2c;
border-radius: 6px;
}
.slide-box a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 10px;
}
.slide-box:after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #df2b2c;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
</div>
I'm not sure that you'll be able to complete what you want with ::after.
But probably you can use transition rotate and scale on absolute positioned element in the bottom.
Here's the concept:
.slide-box {
position: relative;
display: inline-block;
background: #e41113;
border: 1px solid #df2b2c;
border-radius: 6px;
width: 145px;
height: 70px;
}
.slide-box a {
display: block;
color: #fff;
background: #e41113;
display: block;
text-decoration: none;
padding: 12px 10px;
z-index:1000;
}
.slide-box .corner {
position: absolute;
top: 70px;
left: 0px;
width: 103px;
height: 103px;
background-color: #e41113;
transform-origin: top left;
transform: scale(1, 0.25) rotate(-45deg);
border-radius: 6px;
}
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
<div class="corner"></div>
</div>
Of course the main task will be positioning.
So there you need 2 prerequisitions:
With "transform-origin: top left;" you need to keep top of the .corner == height of your main container (don't know why, but bottom:0 not works, maybe youll resolve
this)
The .corner should be square (width=height), and to keep it smooth you need to maintain ratio width(.corner) = width(.slide-box)*sqrt(2). Means width of your corner`s diagonal should be equal to width of main container.
Here is a way to do:
.container {
width: 300px;
}
.slide-box {
height: 200px;
width: 100%;
position: relative;
background-color: #df2b2c;
text-align: left;
margin-left: 70px;
margin-bottom: -75px;
border-radius: 0 0 25% 25%;
}
.slide-box a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 10px;
}
.corner {
position: relative;
background-color: #df2b2c;
text-align: left;
margin-left: 95px;
}
.corner:before,
.corner:after {
content: '';
position: absolute;
background-color: inherit;
}
.corner,
.corner:before,
.corner:after {
width: 165px;
height: 165px;
border-top-right-radius: 30%;
}
.corner {
transform: rotate(-120deg) skewX(-30deg) scale(1,.866);
}
.corner:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.corner:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
<div class="container">
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
</div>
<div class="corner"></div>
</div>

Can't figure out some CSS styling

i have some CSS styling issues. first thing i have a from with 2 inputs and a button. the button is perfect positiond when i resize the window but the inputs dance around, why?
and het h2 this is appended when the button is pushed, the little arrow has to be always in the middle. Also the text needs to be always in the middle of the pop up, horizontal and vertical. Is this posible? and how?
here is the form:
#lname, #fname {
width: 90%;
height: 50px;
margin-top: 6%;
border-radius: 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
text-align: center;
}
#fname {
left: 40px;
top: 18px;
}
#lname {
left: 40px;
top: 84px;
}
#btn {
width: 100%;
height: 50px;
margin-top: 72px;
border-radius: 0 0 5px 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
left: 0px;
top: 128px;
}
here is the pop up window:
h2 {
margin: auto;
margin-top: 100px;
position: relative;
width: 50%;
height: 205px;
padding: 0px;
background: #2F3742;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
font-size: 2em;
color: #8092AA;
margin: 100px auto 0 auto;
padding-top: 6%;
}
h2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 20px 20px;
border-color: #2F3742 transparent;
display: block;
width: 0;
z-index: 1;
top: -20px;
left: 355px;
}
ofcourse you have to see this in action! here you go! http://codepen.io/shiva112/pen/dGMrWB
Why do you use absolute positioning? It's a really mess, but just add for your input elements margin-left:5%. For your heading arrow: h2:after{left:50%; margin-left:-20px; }And if you want to center the text vertical and horizontal, you need to wrap your h2 text content in span or any other element you like. Then set your h2 element style to: { display:table; width:100%; } and his child element to: { displat:table-cell; vertical-align:middle; }

How to make an arrow next to a pseudo:hover::before element

This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.

CSS diamond shape, in the middle of the nav bar

My code display correctly on local, with a diamond shape in the middle of the navigation bar, but the "plus" sign missing the bottom part.(It's what I want to know how to fix it)
However, the outlook changed significantly after I pasted code into JSfiddle and Codepen.io
http://codepen.io/yumikohey/pen/PwPYxN
http://jsfiddle.net/yumiko/ae1zmqpa/
CSS
body{
}
header{
width: 100%;
height: 80px;
}
#top{
width: 100%;
height: 50px;
background-color: #000;
border-bottom: 10px solid #C2973C;
}
#socialBar_top{
width: 25%;
height: 30px;
margin: 0 10px;
float: right;
}
ul {
list-style-type: none;
padding: 10px;
}
ul li {
display: inline;
}
#expandButton {
width: 100%;
padding-left: 46%;
margin-top: 10px;
}
.centerBox{
margin-top: -50px;
padding-top: -10px;
}
#diamondButton {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: #C2973C;
position: relative;
top: -30px;
}
#diamondButton:after {
content: '';
position: absolute;
left: -30px;
top: 30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #C2973C;
}
#plusSign {
margin: -30px 0 -0 -14px;
color: #fff;
font-size: 3em;
}
Thanks in advance for your generous help.
Try this :
#plusSign {
color: #fff;
font-size: 2em;
margin: 0 0 0 -9px;
position: absolute;
top: 29px;
z-index: 100000;
}
Fixed the issue with this code,
#plusSign {
margin-left: -14px;
color: #fff;
font-size: 3em;
position: absolute;
top: 0;
z-index: 100;
}
But can anyone explain why codePen and JSfiddle cannot display my code correctly?

How to display corresponding tag on hover for a div

Hi i have a circular div and i want some text to show up on hover and disappear on mouse out using only css
for example if have a circular div , i want the tag say home to appear on its right side on hover and disappear on mouse out
my code for the buttons is-
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 26px;
height: 26px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 4px solid #fff;
}
.no-touch .cbp-fbscroller > nav a:hover {
background: rgba(255,255,255,0.4);
}
.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #fff;
}
you can use this code.....
.circle {
width: 150px;
height: 150px;
border: 5px solid whitesmoke;
border-radius: 50%;
position: relative;
background:url('http://download.jqueryui.com/themeroller/images/ui- bg_flat_100_555_40x100.png');
}
.circle:before {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: whitesmoke;
border-radius: 50%;
content:"";
display: block;
}
.circle:hover span {
display:inline;
width: 0;
height: 0;
position: absolute;
top: 50%;
left:100%;
margin: -5px 0px -5px -25%;
padding: 5px 0px 5px 25%;
}
span
{
display:none;
}
For Demo:JSFIDDLE