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?
Related
This question already has an answer here:
How to use css triangle with after pseudo element and lower z-index?
(1 answer)
Closed 5 years ago.
I need to create a page using CSS triangle. My concern is that I can only use :after.
Image
Need CSS for this
HTML:
<div class="logo">
<!--<div class="down"></div>-->
</div>
CSS:
.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-
flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
z-index: 10 !important;
position: relative;
/*margin-right: 160px;*/
}
.logo::after {
content: '';
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
/*transform-origin: 0 100%;
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: 0 !important;
}
I want logo should be display above the triangle.
Thats because z-index is applied to logo class both the times which is the same class you need to remove z-index from .logo and add -ve z-index to .logo::after.
.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
position: relative;
/*margin-right: 160px;*/
}
.logo::after {
content: '';
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
/*transform-origin: 0 100%;
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: -1;
}
Here is a working link : https://jsfiddle.net/qk5u45Lv/
One more alternative:
HTML:
<div class="logo"><span>i</span></div>
Apply this css:
.logo {
background: #3498db none repeat scroll 0 0;
border-radius: 100%;
box-shadow: 0 5px 0 #2980b9;
height: 100px;
width: 100px;
text-align:center;
position:relative;
}
.logo > span {
color: #fff;
font-family: -moz-fixed;
font-size: 82px;
font-weight: 600;
text-align: center;
text-shadow: 1px 3px 1px #000;
}
.logo::after {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #f00;
bottom: -45px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
z-index: -1;
}
OUPUT:
For more go this link
Hope this will help you!!!
Let me know if there is any query.
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.
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; }
I'm trying to get the iframe the to the full page height, but it's not really working.
I already tried many ways to do it, but none of them would work for me...
I hope some of you know how to do it!
HTML:
<body>
<article>
<h1>Hello world</h1>
<p class="subtitle fancy ">
<span>Versie 1.0</span>
</p>
</article>
<iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe>
<footer>
<span class="arrow "></span>
<p>© Copyright 2015</p>
</footer>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #ECECEC;
margin: 0px;
color: #333;
font-family:'Cinzel Decorative', cursive;
}
h1 {
font-size: 3em;
text-align: center;
}
article {
max-width: 600px;
overflow: hidden;
margin: 0 auto 50px;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
text-align: center;
display: -webkit-flex;
}
.fancy:before, .fancy:after {
content:"";
border-bottom: 1px solid white;
border-top: 1px solid white;
-webkit-flex: 1;
margin: .45em 0;
}
.fancy:before {
margin-right: 15px;
}
.fancy:after {
margin-left: 15px;
}
footer {
background-color: #D7D7D7;
position: relative;
margin-bottom: 0px;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
font-family:'Montserrat', sans-serif;
border-top: 2px solid white;
}
footer p {
margin-left: 10px;
font-size: 15px;
color: #626262;
}
footer:before, footer:after, footer > .arrow {
content:"";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-bottom-color: #D7D7D7;
pointer-events: none;
}
footer:after {
margin-left: -8px;
border-width: 8px;
}
footer > .arrow {
margin-left: -11px;
border-width: 11px;
border-bottom-color: #fff;
}
.configurator {
width: 100%;
background-color: white;
position: absolute;
margin-top: -50px;
margin-bottom: -1000px;
}
So what I want is the iframe height all the way to the bottom against the top of the footer.
jsFiddle: http://jsfiddle.net/94d9tbLx/
Added script to find height .
var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight();
$('iframe').css('height', h);
Please check the fiddle - http://jsfiddle.net/afelixj/94d9tbLx/2/
Remove all styles from footer and .configurator and add the following:
footer {
background-color: #D7D7D7;
margin-bottom: 0px;
width: 100%;
height: 50px;
left: 0px;
font-family: "Montserrat",sans-serif;
border-top: 2px solid #FFF;
bottom: 0px;
position: relative;
float: left;
}
.configurator {
width: 100%;
background-color: #FFF;
height: 100vh;
float: left;
position: relative;
}
FIXED JSFIDDLE
(adjust the height to anything)
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.