Related
I made a "button" well... not really, I made a link that redirects the user to my 'whatever' page or whatever.
problem is, it has an annoyying underline that cannot be removed even when i try puttin in CSS text-decoration: none;
why is it happening?
how can i remove it?
also, whenever i click on the button, the LinkedIn icon turns red.. the button is purple and it makes it ugly.. how can i remove the red color when clicked?
when i am hovering next to the box in the 'peticide' chrome extention, i noticed a red line is it related somehow?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title h1 {
font-size: 36px;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 860px;
margin-right: 10px;
text-align: center;
/* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
/* Make sure text is infront of background images */
display: block;
position: relative;
z-index: 3;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(twinkling.png) repeat top center;
z-index: 1;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(clouds.png) repeat top center;
z-index: 2;
opacity: 0.4;
animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
font-size: 63px;
font-weight: 500;
letter-spacing: 5px;
cursor: pointer;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 705px;
margin-right: 10px;
text-align: center;
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
z-index: 3;
}
body {
display: flex;
min-height: 100vh;
}
.secondarytitle,
h2 span {
transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
margin-right: 10px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
content: "";
margin-left: 10px;
}
.secondarytitle,
h2:hover span {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
0 0 120px #fff;
}
table,
tr,
td,
th{
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
font-family: "Lato", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
position: absolute;
font-size: 24px;
font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.button{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 1233px;
width: 248px;
height: 46px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
display: inline-block;
cursor: pointer;
}
.button:hover
{
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
transition-delay: 0.05s;
}
.secondaryButton{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 236px;
width: 197px;
height: 50px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webki
<div class="button">
<a href="/project2/contact.html">
<span></span>
<span></span>
<span></span>
<span></span>
contact me
</div>
<div class="secondaryButton">
<a href="https://www.linkedin.com/in/blah-blah/">
<span></span>
<span></span>
<span></span>
<span></span>
linkedIn<ion-icon name="logo-linkedin"></ion-icon>
</div>
your underline is on a link so you have to remove text-decoratuon on a tag. then on a tag :focus change your color. Look at code below if thats help you.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title h1 {
font-size: 36px;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 860px;
margin-right: 10px;
text-align: center;
/* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
/* Make sure text is infront of background images */
display: block;
position: relative;
z-index: 3;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(twinkling.png) repeat top center;
z-index: 1;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(clouds.png) repeat top center;
z-index: 2;
opacity: 0.4;
animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
font-size: 63px;
font-weight: 500;
letter-spacing: 5px;
cursor: pointer;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 705px;
margin-right: 10px;
text-align: center;
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
z-index: 3;
}
body {
display: flex;
min-height: 100vh;
}
.secondarytitle,
h2 span {
transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
margin-right: 10px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
content: "";
margin-left: 10px;
}
.secondarytitle,
h2:hover span {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
0 0 120px #fff;
}
table,
tr,
td,
th{
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
font-family: "Lato", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
position: absolute;
font-size: 24px;
font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.button{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 1233px;
width: 248px;
height: 46px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
display: inline-block;
cursor: pointer;
}
.button a, .secondaryButton a {text-decoration: none; }
a:focus {color: gray;}
.button:hover
{
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
transition-delay: 0.05s;
}
.secondaryButton{
font-size: 27px;
font-weight: 800px;
top: 10px;
left: 236px;
width: 197px;
height: 50px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 4;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
display: inline-block;
cursor: pointer;
}
.secondaryButton:hover
{
color: rgb(165, 70, 254);
background: rgb(188, 123, 248);
box-shadow: 0 0 10px rgb(165, 70, 254), 0 0 40px rgb(165, 70, 254), 0 0 80px rgb(165, 70, 254);
transition-delay: 0.05s;
}
<div class="button">
<a href="/project2/contact.html">
<span></span>
<span></span>
<span></span>
<span></span>
contact me</a>
</div>
<div class="secondaryButton">
<a href="https://www.linkedin.com/in/blah-blah/">
<span></span>
<span></span>
<span></span>
<span></span>
linkedIn<ion-social-icon name="logo-linkedin">
</div>
Set the CSS of your tag like this
For example:
<a href='xyx.com' class='style'>
CSS
.style{
text-decoration:none
}
Just add your child selector a to the button classes so your button classes are targeting the anchor element...
.button a{
...
}
.button a:hover
{
...
}
.secondaryButton a{
...
}
A better solution is to remove the div wrappers and move your class into the anchor tag directly and also beef up your anchor CSS selectors with pseudo-classes as shown below so you have more granular control of your links.
.button,
.button:link,
.button:visited,
.button:focus,
.button:active{
...
}
.button:hover
{
...
}
.secondaryButton,
.secondaryButton:link,
.secondaryButton:visited,
.secondaryButton:hover,
.secondaryButton:focus,
.secondaryButton:active{
...
}
<a class="button" href="/project2/contact.html">contact me</a>
<a class="secondaryButton" href="https://www.linkedin.com/in/blah-blah/">linkedIn</a>
'''
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title h1 {
font-size: 36px;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 860px;
margin-right: 10px;
text-align: center;
/* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
/* Make sure text is infront of background images */
display: block;
position: relative;
z-index: 3;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(twinkling.png) repeat top center;
z-index: 1;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(clouds.png) repeat top center;
z-index: 2;
opacity: 0.4;
animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
font-size: 63px;
font-weight: 500;
letter-spacing: 5px;
cursor: pointer;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 705px;
margin-right: 10px;
text-align: center;
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
z-index: 3;
}
body {
display: flex;
min-height: 100vh;
}
.secondarytitle,
h2 span {
transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
margin-right: 10px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
content: "";
margin-left: 10px;
}
.secondarytitle,
h2:hover span {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
0 0 120px #fff;
}
table,
tr,
td,
th{
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
font-family: "Lato", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
position: absolute;
font-size: 24px;
font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.button{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 1233px;
width: 248px;
height: 46px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
display: inline-block;
cursor: pointer;
}
.button:hover
{
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
transition-delay: 0.05s;
}
.button a{
text-decoration : none;`
}
.secondaryButton{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 236px;
width: 197px;
height: 50px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webki
/* remove the underline and red color when the button is clicked */
/* .button > a {
text-decoration: none;
}
.button > a:focus{
color: black;
}
.secondaryButton > a{
text-decoration: none;
}
.secondaryButton > a:focus{
color: black;
} */
<div class="button">
<a href="/project2/contact.html">
<span></span>
<span></span>
<span></span>
<span></span>
contact me
</div>
<div class="secondaryButton">
<a href="https://www.linkedin.com/in/blah-blah/">
<span></span>
<span></span>
<span></span>
<span></span>
linkedIn<ion-icon name="logo-linkedin"></ion-icon>
</div>
<!-- I suggest like this to make a button or link, just style it -->
<!-- <div class="button">
Contact me
</div>
<div class="secondaryButton">
LinkedIn
</div> -->
I suggest that if you create a button it's better to use the <button></button> tag, if you want to remove the underline, give the <a> element a style text-decoration:none,and your <a> tag has no closing tag </a>
I'm looking to make div.box and button.navBtn responsive.
Currently when the page is resized to 871px width, the buttons instantly stack on top of each other and the long div.box is squished until it clashes into the buttons. The "final look" (around 500px wide) doesn't even look that bad honestly and is the ideal way this window would look on smaller screens. I'm just trying to make the transition to that size nicer.
Preferably I'd like the buttons to resize themselves gradually with div.box until they hit a certain width and then stack on top of each other however I can't figure out how to apply the correct media query to do this. I feel as if my divider is causing some type of issue a well with spacing but I'm not entirely sure. It does have some whitespace I can't get rid of and is set to 2em width.
I'm also not sure why div.main stops resizing once you hit around 495px width. I'm gonna make sure I use Bootstrap or something next time to avoid this...
Any help would be appreciated. Here's a big snippet of code:
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
display: inline-block;
position: relative;
margin-top: 15px;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
width: 25em;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
For the buttons to resize themselves you can't give them an explicit width like you do in .navBtn. You need to make them have a certain percentage of the parent and when they hit their minimal witdh they wrap.
Without that change the best that can be done is making the parent smaller when the elements wrap like so:
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
margin-top: 15px;
display: inline-block;
position: relative;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
/* max-width: 25em; */
width: 25em;
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
I have instituted a flex-grid in my code, however its not functioning as expected in ie11 (i unfortunately need to have it work there too)—Chrome and Firefox both work fine. What seems to happen is when I load in IE11—the flex boxes only load 1 per line and are no longer hovering appropriately.
I am honestly at a loss here... anything I change breaks Chrome and Firefox.
.flex_row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.flex_col{
flex: 1;
margin: 10px;
}
.circle_shape {
position: relative;
display: flex;
padding: 50% 0;
border-radius: 50%;
overflow: hidden;
border: 1px solid gray;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.circle_shape:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
z-index: 2;
}
.circle_shape:hover{
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);
}
.circle_shape img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.circle_shape i{
position: absolute;
text-align: center;
font-size: 4vw;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape h2 {
position: absolute;
bottom: 10%;
font-size: 1vw;
font-weight: 800;
text-align: center;
}
.circle_text{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,51,102, 0.9);
border-radius: 50%;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.circle_text p {
color: #fff;
padding: 4px;
text-align: center;
font-size: calc(7px + .5vw);
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape:hover .circle_text{
transform: scale(1);
opacity: 1;
}
<div class="flex_row">
<a class="flex_col" href="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>Load me some CNN!</p>
</div>
</div>
<div>
<h2>Beep!</h2>
</div>
</a>
<a class="flex_col" href="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>Load me some ABC!</p>
</div>
</div>
<div>
<h2>BIP!</h2>
</div>
</a>
<a class="flex_col" href="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>Load me some BBC!</p>
</div>
</div>
<div>
<h2>BOOP!</h2>
</div>
</a>
</div>
JSFiddle link
IE 11 partially support flex box. Partial support due to large amount of bugs.
Visit the link for more information.
I try to test with the code in IE 11 and try to modify it for testing purpose. I tried many variations in the code but nothing worked so far.
As a work around, I suggest you to refer example below which is working properly in IE and other browsers.
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 2;
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
li {
position: relative;
overflow: hidden;
border-radius: 100%;
}
li img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#import url('normalize.css');
/* General Demo Style */
body{
font-family: Cambria, Georgia, serif;
background: #f9f9f9 url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main{
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1{
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h2{
font-size: 14px;
font-weight: 300;
font-style: italic;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
/* Header Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.1);
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover{
background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos{
text-align:center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a{
display: inline-block;
font-style: italic;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover{
color: #333;
background: #fff;
}
.codrops-demos a:active{
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255,255,255,0.7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
display: block;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
<section class="main">
<ul class="ch-grid">
<li>
<img src="http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg" alt="Vision">
<div class="ch-item">
<div class="ch-info">
<h3>Brainiac</h3>
<p>by Daniel Nyari View on Dribbble</p>
</div>
</div>
</li>
</ul>
</section>
Output in IE:
References:
(1) JSFiddle link
(2) Circle Hover Effects with CSS Transitions
Further, you can try to modify the code example as per your requirement.
I just wanted to follow up on this. Rather than rewrite my code -- I decided to hack around it to define a solution.
First step was to identify this is IE 10+ code in my CSS -- i did that through:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
I then redefined my flex_container and flex_item as block (using column code as follows) inside the #media query
[class*="flex_item"] {
float: left;
padding: 15px;
}
.flex_container{
display: block;
overflow: hidden;
box-sizing: border-box;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: none;
font-size: 16px;
}
.flex_item {width: 8.33%;box-sizing: border-box;}
I then went through my code and changed any reference to flex to block within that code. Its a lot of duplication but it essentially got me back to #deepak-MSFTs response.
This effectively resolves my issue.
This question already has an answer here:
Vertically align a flexbox
(1 answer)
Closed 5 years ago.
I'm currently having issues vertically centering the wrapper. I attempted to create a div that displays flex and aligns items center as suggested by another post and it didn't work. Any ideas why and how to resolve it?
body {
font-family: Arial, sans-serif;
background: #ddd;
}
h1 {
text-align: center;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #333;
text-shadow: 0 1px 0 #fff;
margin: 50px 0;
}
#center {
display: flex;
align-items: center;
}
#wrapper {
width: 100px;
margin: 0 auto;
background: #fff;
padding: 20px;
border: 10px solid #aaa;
border-radius: 15px;
background-clip: padding-box;
text-align: center;
}
.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
background-image: linear-gradient(top, #fff, #f0f0f0);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
color: #666;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
transition: all 0.2s ease-out;
}
.button:hover {
border-color: #999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.button:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay.light {
background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
}
.light .popup {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
}
.popup .close:hover {
opacity: 1;
}
.popup .content {
max-height: 400px;
overflow: auto;
}
.popup p {
margin: 0 0 1em;
}
.popup p:last-child {
margin: 0;
}
iframe {
border: none;
}
<div id="center">
<div id="wrapper">
<p><a class="button" href="#popup1">Click Me</a></p>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Drop Day</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
</div>
Your main wrapper (div#center) must have its height defined:
body {
font-family: Arial, sans-serif;
background: #ddd;
}
h1 {
text-align: center;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #333;
text-shadow: 0 1px 0 #fff;
margin: 50px 0;
}
#center {
display: flex;
align-items: center;
/* or any other height you want */
height: 100vh;
}
#wrapper {
width: 100px;
margin: 0 auto;
background: #fff;
padding: 20px;
border: 10px solid #aaa;
border-radius: 15px;
background-clip: padding-box;
text-align: center;
}
.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
background-image: linear-gradient(top, #fff, #f0f0f0);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
color: #666;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
transition: all 0.2s ease-out;
}
.button:hover {
border-color: #999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.button:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay.light {
background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
}
.light .popup {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
}
.popup .close:hover {
opacity: 1;
}
.popup .content {
max-height: 400px;
overflow: auto;
}
.popup p {
margin: 0 0 1em;
}
.popup p:last-child {
margin: 0;
}
iframe {
border: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<div id="center">
<div id="wrapper">
<p><a class="button" href="#popup1">Click Me</a></p>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Drop Day</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
</div>
</body>
</html>
So here's the code:
html:
<!DOCTYPE html>
<html >
<script src="main.js"></script>
<head>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>בנה את המחשב שלך בצורה אוטומטית!</title>
<meta name="description" content="Build your PC Generator - Israel.">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="hint.css">
<script>
window.addEventListener("load", function(){
var slider = document.getElementById("slider");
slider.addEventListener("mousemove", function(){
document.getElementById("output").innerHTML = this.value + "₪";
});
});
</script>
</head>
<body >
<div id="welcome"> <div id="welcome-message-box"> <img src="images/logo.png" id="logo"> <h1 dir="rtl" style="text-align:center; color:#fff;font-weight: 100;">ChooseYourPc.com</h1> <p dir="rtl" style="text-align:center; color:#fff; ">
האתר נוצר על מנת לתת מענה למתחילים אשר רוצים לבנות מחשב משל עצמם. המחירים והחלקים מעודכנים באופן קבוע בהתאם למצב הנוכחי, האתר יהפוך את החיים שלכם לקלים יותר על ידי מתן רשימת חלקים שאיתה תוכלו להתחיל ולאחר מכן לשנות לפי הצרכים והעדפות שלכם. <br><br>
האתר פותר את הבעיה הכי קשה שבה אנו נתקלים כאשר בונים מחשב: לדעת אילו חלקים לבחור ולוודא שכל החלקים מתאימים ב-100%. תהנו ממאגר של מפרטי מחשב מומלצים לכל תקציב באשר הוא, כולם מאוזנים היטב ומהווים תמורה טובה למחיר.
</p> <button class="myButtonwhite" id='btnscrl' onclick="smoothScroll(document.getElementById('content'))" style=" margin-left:39%; position: relative; ">!בואו נתחיל</button></div> <div style="cursor: pointer;" class="arrow bounce" onclick="smoothScroll(document.getElementById('content'))"> </div></div>
<div id="content" style=" max-width: 800px; margin-left:auto;margin-right:auto; position:relative;">
<h1 align='center'> !בנה את מחשב הגיימינג שלך</h1>
<div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- auto ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9838071461609147"
data-ad-slot="2078936312"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<h2 align='center'> ?כמה תרצה להוציא</h2>
<p dir="rtl" align='center'>
זה מה שישפיע על ביצועי המחשב שלך, מן הסתם.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> בדיוק כמו שחשוב להמנע מהוצאות יתר על המחשב, חשוב גם לדאוג שהתקציב לא יהיה נמוך מידי בהתאם לדרישותך, שים לב. <br>
תוכל למצוא מבחני ביצועים של כרטיסי המסך המופיעים במפרטים כדי לראות את הביצועים המשוערים של המפרט שקיבלת.
</p>
<input type="range" id="slider" value="2000" onchange="bla()" step='25' min='2000' max="6000"> <div style="margin-left:100%; border: 0px solid #f5f5f5; height: 37px; width: 60px; border-radius: 0px; background: #6b6b6b; cursor: pointer; -webkit-appearance: none; margin-top: -44px; z-index:'9999';"><div id='output' style="text-align: center; color:white;line-height: 37px;;">2000₪</div></div>
<br>
<h2 align='center' dir="rtl"> תרצה לבצע Overclock על המעבד?</h2>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<p dir="rtl" align='center'>
Overclocking הוא התהליך של כוונון רכיבי המחשב כדי לגרום להם לעבוד קשה יותר. לכל רכיב חומרה שנמצא במחשב שלכם יש מהירות שעון המשמשת כברירת מחדל ובמהירות זו יוצא הרכיב מהמפעל. Overclocking הוא התהליך של הגדלת מהירות השעון של הרכיב מעבר למהירות ברירת המחדל.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> אל תחשבו שזה הכרחי, לפעמים ניתן לקבל מחשב טוב יותר עבור הכסף שאותו תצטרכו לבזבז על מנת להתאים את המחשב שלכם לOverclocking. תבחרו את האופציה הזאת אך ורק אם אתם יודעים מה אתם עושים ואתם נלהבים מהנושא.
</p>
<div id="choices">
<button class="hint--bottom" data-hint="בקרוב ..." dir="rtl" id='ChoiceButton' >אני לא מעוניין </button>
<button class="hint--bottom" data-hint="בקרוב ..." id='ChoiceButton' dir="rtl">אולי בעתיד</button>
<button class="hint--bottom" data-hint="בקרוב ..." id='ChoiceButton' dir="rtl">אני מעוניין לעשות Overclock</button>
</div>
<h2 align='center' dir="rtl" id="moreoptions">אפשרויות נוספות</h2>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<p dir="rtl" align='center'>
כאן אתם יכולים להתאים אישית מספר דברים נוספים כמו האם להוסיף Windows אם אתם צריכים מערכת הפעלה, או האם לכלול כונן אופטי.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> שימו לב שכמובן שככל שתבחרו ביותר אופציות כך גם התקציב שילך על המחשב עצמו ירד, ומן הסתם הביצועים לא יהיו זהים.
</p>
<div id="choices2">
<button id='windowsAdd' dir="rtl" value="0" onclick="btnColor(this, 'rgb(107,107,107)');bla()" >הוספת Windows</button>
<button id='dvdburner' dir="rtl" value="0" onclick="btnColor(this, 'rgb(107,107,107)');bla()">הוספת צורב</button>
</div>
<br>
<div class="alert" id="alert" role="alert"></div>
<div style="border-bottom:1px solid #e6e6e6; margin-bottom:20px;"></div>
<div style="text-align:center;margin:auto;">
<button class="myButton" id='btn' onclick="show()" style=" position: relative;">בנה מחשב</button> </div>
<div id = "myDiv" align='center' style="display:none; margin"><img id = "myImage" src = "images/loading.gif"></div>
<br><br><br><br><br><br><br><br><br><br><br>
<p align="middle"> עדכון נתונים אחרון: 15/04/2016</p>
</div>
<div id="footer"> <p id="rights">כל הזכויות שמורות © 2016 BuildYourPc </p> <p id="creator">נוצר על-ידי א י ת י </p></div>
</body>
</html>
<!--
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ CODE THE WEB ]:::::]
[:::::[ http://brackets.io ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
-->
CSS:
html {
background-color: #fff;
-webkit-font-smoothing: antialiased;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
box-sizing: border-box;
overflow: scroll;
overflow-x: hidden;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
*,
*:before,
*:after {
box-sizing: inherit;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
#footer{
max-height: 0%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1.5rem;
color: white;
background-color: #333333;
text-align: center;
}
#rights{
position: inherit;
bottom: -6px;
right: 0;
left: 0;
direction: rtl;
}
#creator{
position: inherit;
bottom: -2px;
font-size: 12px;
right: 10px;
direction: rtl;
}
#bottom{
direction: rtl;
word-wrap: break-word;
width: 350px;
}
#startingimage{
background: url("http://cwsmgmt.corsair.com/media/Blogs/how-to-build-a-pc/Motherboard-Selection/mobo.jpg");
background-size: cover;
background-position: center center;
text-align: center;
}
#welcome-message-box{
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
border-radius: 10px;
background: rgba(0,0,0,.7);
display: block;
z-index: 2;
}
#welcome {
top: 0; right: 0; bottom: 0; left: 0;
height: 100vh;
width: 100%;
background: url("http://i.imgur.com/fmKShVl.jpg");
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
background-attachment: fixed;
position: relative;
}
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:0px;
border:#eaebec 1px solid;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
/*
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
*/
}
table span{ text-shadow: 0px 0px 0px 0px #000;}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #fafafa;
}
table th:first-child{
text-align: center;
padding-left:20px;
}
table tr:first-child th:first-child{
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child{
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr{
text-align: right;
padding-left:20px;
}
table tr td:first-child{
text-align: center;
padding-left:20px;
border-left: 0;
}
table tr td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr.even td{
background: #fafafa;
}
table tr:last-child td{
border-bottom:0;
}
table tr:last-child td:first-child{
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td{
background: #f2f2f2;
cursor: pointer;
}
#spanInfo{
max-width: 310px;
margin-right:22px;
font-weight: lighter;
font-weight:normal;
text-align: right;
direction: rtl;}
.myButton {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding: 10px 90px;
text-decoration:none;
}
.myButton:hover {
background-color:#3d3d3d;
}
.myButtonwhite {
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:10px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#333;
font-family:Arial;
font-size:17px;
padding: 13px 20px;
}
.myButtonwhite:hover {
background-color:#333;
color: white;
border:1px solid #333;
}
/*
.myButton:active {
position:relative;
top:1px;
}
*/
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: -0.5px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 37px;
cursor: pointer;
-webkit-box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
background: #f5f5f5;
border-radius: 0px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
height: 37px;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
-webkit-appearance: none;
margin-top: 0px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #f5f5f5;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 37px;
cursor: pointer;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
background: #f5f5f5;
border-radius: 0px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
height: 36px;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 37px;
cursor: pointer;
background: transparent;
border-color: transparent;html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
}
/*
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
a {
color: #0083e8;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border: 10px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
#-webkit-keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
}
}
#keyframes colorize {
0% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0%);
}
}
*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #e8e8e8;
border: 0px solid #010101;
border-radius: 0px;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
}
input[type=range]::-ms-fill-upper {
background: #f5f5f5;
border: 0px solid #010101;
border-radius: 0px;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
}
input[type=range]::-ms-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
height: 36px;
}
input[type=range]:focus::-ms-fill-lower {
background: #f5f5f5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
}
span {display: none;position: absolute; font-weight: normal;}
a span {display: none; position: relative; color: #000; background: #fff; width: 350px; height: auto;font-weight: normal;}
a {position: relative;font-weight: normal;}
a:hover span {position:absolute;bottom:-70; display: block;z-index: 9999; -webkit-box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); -moz-box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); display: block;text-align:center;font-weight: normal; right:0; }
a:hover span:after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top:0.5%;
right: 5%;
box-sizing: border-box;
border: 7px solid black;
border-color: transparent transparent #ffffff #ffffff;
transform-origin: 0 0;
transform: rotate(135deg);
-webkit-box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
-moz-box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.arrow {
position: absolute;
bottom: 0;
right: 49.25%;
width: 35px;
height: 35px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#choices{
max-width: 800px ;
position: relative;
text-align:center;margin:auto;
}
#choices2{
max-width: 800px ;
position: relative;
text-align:center;margin:auto;
}
#ChoiceButton {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:#A2A2A2;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#windowsAdd {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:white;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#dvdburner {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:white;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#dvdburner:hover{
background-color:#3d3d3d;
}
#windowsAdd:hover{
background-color:#3d3d3d;
}
#ChoiceButton:hover {
background-color:#3d3d3d;
}
button:focus {outline:0 !important;}
#popup{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
}
#popup:after{
content:'';
position:absolute;
bottom:-10px;
z-index: 5;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#btn1:hover #popup{
display:block;
}
#logo{
display: block;
margin-left: auto;
margin-right: auto;
}
.alert{
background-color:
rgb(252, 248, 227);
border-bottom-color:
rgb(138, 109, 59);
border-bottom-left-radius:
4px;
border-bottom-right-radius:
4px;
border-bottom-style:
none;
border-bottom-width:
0px;
border-image-outset:
0px;
border-image-repeat:
stretch;
border-image-slice:
100%;
border-image-source:
none;
border-image-width:
1;
border-left-color:
rgb(138, 109, 59);
border-left-style:
none;
border-left-width:
0px;
border-right-color:
rgb(138, 109, 59);
border-right-style:
none;
border-right-width:
0px;
border-top-color:
rgb(138, 109, 59);
border-top-left-radius:
4px;
border-top-right-radius:
4px;
border-top-style:
none;
border-top-width:
0px;
box-sizing:
border-box;
color:
rgb(138, 109, 59);
display:
block;
font-family:
'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
font-size:
15px;
height:
51px;
line-height:
21.4286px;
margin-bottom:
20px;
padding-bottom:
15px;
padding-left:
15px;
padding-right:
15px;
padding-top:
15px;
text-align:
center;
text-shadow:
none;
width: 800px;
position: relative;
left:0;
right:0;
margin-bottom: -20px;
margin-top: -5px;
height: auto;
display: none;
border:1px solid #F7E5C6;
direction: rtl;
}
https://jsfiddle.net/gLxefxbf/2/
If you enter this jsfiddle from chrome the gray div next to the slider will be at the same height as the slider. but if you enter from Firefox the div will be positioned slightly higher. I really don't know what is causing that problem, Thanks for the help!
Whenever trying to style something I would always recommend trying to use a % marker instead of pixels, as different devices or browsers can display things in different ways;
<div id="content" style=" max-width: 800px; margin-left:auto;margin-right:auto; position:relative;">
Change to something like
<div id="content" style=" max-width: 50%; margin-left:auto;margin-right:auto; position:relative;">
If you wanted a blank space on the right simply create another div that would allow for that.
Hope that helps.