I am doing a popup image with close button and dimmed background. When the popup is displayed and users click outside of it, it supposes to close the popup. It works fine on other browser, but not safari. I found on Z-index problems on ipad that I need to put -webkit-transform: translate3d(0,0,0) to the same DOM level but I am not really sure about the concept. Can someone help me, please?
Here is my code:
/**********************HTMl*********************/
<body id="price">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<?php include('header.php')?>
<div id="content-border" >
<div id="content">
<h1><strong>Packages</strong></h1>
<P id="package-p"></P>
<div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn1" onClick="openPopup(1)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal1" class="popup">
<div class="popup-content">
<img src="images/The-Apprentice_low.jpg" id="popup-content1"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn2" onClick="openPopup(2)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal2" class="popup">
<div class="popup-content">
<img src="images/The-Celebrity-Chef_low.jpg" id="popup-content2"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
</div>
</div>
</div>
<?php include('footer.php')?>
</div>
</div>
</div>
<?php include('html-body-end.php')?>
</body>
/*************************CSS***********************/
#package-p{
background-color: #fff;
color: #000;
padding: 10 20;
text-shadow: none;
}
#price-col{
margin:0 auto;
width:50%;
float: left;
text-align: center;
}
#price-circle{
margin: 30 auto;
background: #ffffff;
padding: 35px;
text-align: center;
height: 250px;
width: 250px;
display: table;
color: #222222;
box-shadow: 0px 0px 10px 5px rgba(206, 44, 44, 0.5);
border: 0;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
}
#price-circle > div{
display: table-cell;
vertical-align: middle;
}
#currency{
font-size: 30px;
}
#price-circle:hover{
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
background-color: #ce2c2c;
color: #fff;
}
/*Popup*/
.popup {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
/* padding-top: 300px; Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
.popup-content {
margin: auto;
color: #ffffff;
display: inline-block;
position: relative;
}
.popup::after, .popup::before{
display: block;
content: "";
height: 5%;
}
.popup-content img{
max-height: 90vh;
max-width: 90vw;
min-height: 170px;
min-width: 240px;
z-index: 10;
}
/* The Close Button */
.closeBtn{
color: rgba(255,255,255,5);
font-size: 36px;
font-weight: bold;
position: absolute;
margin-top: -2.1vh;
right: 0;
display: inline-block;
z-index: 10;
}
.closeBtn:hover, .closeBtn:focus{
color: #000;
cursor: pointer;
}
Thanks.
Related
I do not want to use anything except css and html. What can be changed to fix the text from coming outside of the card? My text keeps overflowing outside of my card. I want it all to fit in without compromising the card size as well. I have tried resizing. I am also new to coding. I would accept all and any feedback. If you have links or videos please share those also.
* {
margin:0;
padding: 0;
}
body {
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
header p {
color: #b4b4b4;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 50px;
}
.highlight {
color: blue;
-webkit-font-smoothing: antialiased;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 25px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
/* navigation Start */
nav {
background: blue;
border-bottom: solid 2px;
border-bottom-color: white;
}
nav li {
display: inline-block;
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* Navigation End */
/* Section About Start */
section {
box-align: center;
}
section h2 {
text-align: center;
margin-top: 100px;
/* border-bottom: solid 3px; */
color: black;
position: relative;
left: 50%;
transform: translateX(-50%)
}
section h2::after {
content:"";
height: 3px;
width: 70px;
position: absolute;
background: #000000;
margin: auto;
bottom: -5px;
left: 0;
right: 0;
}
section p {
padding: 20px;
text-align: center;
position: relative;
margin: auto;
}
/* Section About End */
/* Section Portfolio Start */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backgrace-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
transform: rotateY(180deg);
}
/* #media screen and (max-width: 600px){ */
/* .column {
width: 100%;
display: block;
margin-bottom: 20px;
}
} */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<!-- Header Start -->
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex" id="Home">
<p>
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web developer.
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</p>
</h1>
</header>
</div>
</header>
<!--Header End-->
<!-- Navigation Start -->
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
RESUME
</li>
</ul>
</nav>
<!--Navigation End-->
<!--Section About-->
<section>
<h2 id="About">ABOUT</h2>
<p>
I'm a full stack developer seeking employment.
I have a passion developing webpages that are responsive, dynamic, and accessbile.
Animations and UI effects are skills I hope to sharpen. I will continually expand my knowledge in different platforms such as Python, JavaScript, and React.
</p>
</section>
<!--Section Portfolio-->
<section>
<h2 id="Portfolio">PORTFOLIO</h2>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="assets/images/run-buddy-card.png" alt="Webpage" style="width:100%" height="100%">
</div>
<div class="flip-card-back">
<h1>Run Buddy</h1>
<p class="highlight"> HTML / CSS</p>
<p>A webpage for Run Buddy. They are a company that matches runners with personal trainers. </p>
<button class="flex" style="vertical-align:middle"><span> View</span></button>
</div>
</div>
</div>
</section>
<!--Section Blog-->
<section>
<h2 id="Blog">BLOG</h2>
<p>Under Construction</p>
</section>
<!--Section Contact-->
<section>
<h2 id="Contact">CONTACT</h2>
</section>
<!--Section Resume-->
<section>
<a id="resume" href="https://drive.google.com/file/d/1uVWXW7AULRBQBeXEblFfHNawPX-pHrJC/view?usp=sharing"></a>
</section>
<!--script for header background Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
<!--script for header background End-->
</body>
</html>
You can use overflow: hidden or overflow: scroll properties in the .flip-card-back class to either hide the content that isn't fitting or make it scrollable. You should also keep in mind the size of the content, it's too much for the card's dimensions. Styling properly the text inside the card would be the best approach.
I changed your code. Please check. the important point is to use font-size: 6vmin in here for #vanta-canvas. I used that instead of h1. It causes a font-size based on screen size.
Note: https://css-tricks.com/viewport-sized-typography/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
/* Header Start */
#vanta-canvas {
width: 100%;
height: 50vh;
display: flex;
align-items: center;
border: solid;
font-weight: bold;
font-size: 6vmin; /* here */
}
.inner_header {
width: 100%;
margin: 0 auto;
text-align: center;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.inner_header p {
color: #b4b4b4;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
.highlight {
color: blue;
-webkit-font-smoothing: antialiased;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 25px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover,
button:focus {
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
/* Header End */
/* navigation Start */
nav {
background: blue;
border-bottom: solid 2px;
border-bottom-color: white;
}
nav li {
display: inline-block;
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* Navigation End */
/* Section About Start */
section {
box-align: center;
}
section h2 {
text-align: center;
margin-top: 100px;
/* border-bottom: solid 3px; */
color: black;
position: relative;
left: 50%;
transform: translateX(-50%)
}
section h2::after {
content: "";
height: 3px;
width: 70px;
position: absolute;
background: #000000;
margin: auto;
bottom: -5px;
left: 0;
right: 0;
}
section p {
padding: 20px;
text-align: center;
position: relative;
margin: auto;
}
/* Section About End */
/* Section Portfolio Start */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backgrace-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
transform: rotateY(180deg);
}
/* #media screen and (max-width: 600px){ */
/* .column {
width: 100%;
display: block;
margin-bottom: 20px;
}
} */
<!-- Header Start -->
<div id="vanta-canvas">
<div class="inner_header" class="flex" id="Home">
<p>
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br> I'm a full-stack web developer.
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</p>
</div>
</div>
</header>
<!--Header End-->
<!-- Navigation Start -->
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
RESUME
</li>
</ul>
</nav>
<!--Navigation End-->
<!--Section About-->
<section>
<h2 id="About">ABOUT</h2>
<p>
I'm a full stack developer seeking employment. I have a passion developing webpages that are responsive, dynamic, and accessbile. Animations and UI effects are skills I hope to sharpen. I will continually expand my knowledge in different platforms such
as Python, JavaScript, and React.
</p>
</section>
<!--Section Portfolio-->
<section>
<h2 id="Portfolio">PORTFOLIO</h2>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="assets/images/run-buddy-card.png" alt="Webpage" style="width:100%" height="100%">
</div>
<div class="flip-card-back">
<h1>Run Buddy</h1>
<p class="highlight"> HTML / CSS</p>
<p>A webpage for Run Buddy. They are a company that matches runners with personal trainers. </p>
<button class="flex" style="vertical-align:middle"><span> View</span></button>
</div>
</div>
</div>
</section>
<!--Section Blog-->
<section>
<h2 id="Blog">BLOG</h2>
<p>Under Construction</p>
</section>
<!--Section Contact-->
<section>
<h2 id="Contact">CONTACT</h2>
</section>
<!--Section Resume-->
<section>
<a id="resume" href="https://drive.google.com/file/d/1uVWXW7AULRBQBeXEblFfHNawPX-pHrJC/view?usp=sharing"></a>
</section>
<!--script for header background Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
<!--script for header background End-->
On larger screen size:
On smaller screen size:
I'm trying to obtain the same result that is located here where the user can mouse over the layer icon in the upper right-hand corner and a div expands/transitions with information.
I created two divs, one for the icon and one for the information but I'm not sure how to create the mouseover effect.
Here is my JSFiddle if anyone is interested in helping me out. Thanks! https://jsfiddle.net/prime90/vwqs38gL/20/
HTML
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
</div>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
CSS
.icon{
height: 48px;
width: 48px;
}
.img{
width:48px;
height:48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background:#f5f5f5;
font-size: 14px;
}
You can move .card-body inside .icon and have
.icon:hover .card-body {
opacity: 1;
}
Example: https://jsfiddle.net/7vdq89g0/
To cover the image up, use positive: relative for the container and position: absolute; top: 0; left: 0 for the box that shows up. Example: https://jsfiddle.net/7vdq89g0/1/
To make hovering not effective to the right of the image (because the box that shows up makes the "hover" event fire up when user hovers on that box that is wider), just make it visibility: hidden and to visible when hover: https://jsfiddle.net/7vdq89g0/2/
.icon {
height: 48px;
width: 48px;
position: relative;
}
.img {
width: 48px;
height: 48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background: #f5f5f5;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s;
width: 200px;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
/* display: none */
}
.card-header {
text-align: center;
}
.icon:hover .card-body {
opacity: 1;
visibility: visible;
/* display: block; */
}
.layer-text {
display: block;
text-indent: 40px;
}
.btn {
color: #f5f5f5 !important;
}
.layer-fill {
float: left;
width: 25px;
height: 15px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
position: absolute;
}
.one-mile {
background: #76d7c4;
opacity: .5;
}
.half-mile {
background: #f7dc6f;
opacity: .5;
}
.onehun-yrds {
background: #ec7063;
opacity: .5;
}
/* line icons for legend */
.layer-line {
border: 0;
width: 25px;
height: 1px;
cursor: pointer;
margin-top: 11px;
margin-left: 5px;
display: inline-block;
position: absolute;
}
.tracks {
background-color: #000;
}
.hclanes {
background-color: #3498db;
height: 2px;
}
.lclanes {
background-color: #3498db;
}
.paved {
background-color: #138d75;
height: 2px;
}
.natural {
/*10px color then 2px transparent -> repeat this for dash lines!*/
background: repeating-linear-gradient(to right, #138d75 0, #138d75 11px, transparent 11px, transparent 14px)
}
<!DOCTYPE html>
<html>
<body>
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
<b>Bike Lane Layers</b>
<div class='bike-layer-options'>
<div class="layer-line hclanes"></div>
<span class="layer-text">High Comfort Lanes<br></span>
<div class="layer-line lclanes"></div>
<span class="layer-text">Low Comfort Lanes<br></span>
</div>
<b>Multiuse Trail Layers</b>
<div class='bike-layer-options'>
<div class="layer-line paved"></div>
<span class="layer-text">Paved Trails<br></span>
<div class="layer-line natural"></div>
<span class="layer-text">Natural Trails<br></span>
</div>
</div>
</div>
</body>
</html>
If you just need a more width on div when hover, try this
<div class="default"></div>
.default {
width: 150px;
height: 100px;
background-color: teal;
transition: all 0.5s ease;
::hover {
width: 200px;
transition: all 0.5s ease;
}
}
.icon {
height: 48px;
width: 48px;
}
.icon:hover~.card-body {
display: block;
}
.img {
width: 48px;
height: 48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background: #f5f5f5;
font-size: 14px;
display: none;
}
I'm trying to obtain the same result that is located here where the user can mouse over the layer icon in the upper right-hand corner and a div expands/transitions with information. I created two divs, one for the icon and one for the information but
I'm not sure how to create the mouseover effect. Here is my JSFiddle if anyone is interested in helping me out. Thanks! https://jsfiddle.net/prime90/vwqs38gL/20/ HTML
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
</div>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
I am trying to build a page and I want the last div to be at the bottom but the one on top of it (second to the last) to have a vertical scrollbar on resize or when the elements don't fit. Here is a link to my jsfiddle (https://jsfiddle.net/tgz98s6w/) where you can see that the second to the last div overlaps with the last one sometimes and I want to avoid that.
I tried setting:
#windowsStoreBox {
position: absolute;
bottom: 0;
}
But it does not seem to work.
Thank you
/*
CSS File for Sharebox
*/
html,body {
margin: 0;
padding: 0;
background-color: #000000;
color: #FFFFFF;
overflow: hidden;
width:auto;
font: 15px "Segoe UI", "Tahoma";
border: 0.05em solid #535353;
cursor: default;
-webkit-user-select: none;
}
/* SCROLLBAR */
::-webkit-scrollbar {
width: 10px;
background-color: #747474;
opacity: 0.93;
}
::-webkit-scrollbar-track {
background: #171717;
}
::-webkit-scrollbar-thumb {
background: #454545;
}
::-webkit-scrollbar-thumb:hover {
background: #747474;
}
::-webkit-scrollbar-button:start {
height: 10px;
width: 10px;
background-color: #171717;
background-image: url('../buttons/angle_up.svg');
background-repeat: no-repeat;
background-size: 10px 6px;
background-position: center center;
border: none;
}
::-webkit-scrollbar-button:start:active {
background-color: #A2A2A2;
background-image: url('../buttons/angle_up_active.svg');
}
::-webkit-scrollbar-button:end {
height: 10px;
width: 10px;
background-color: #171717;
background-image: url('../buttons/angle_down.svg');
background-repeat: no-repeat;
background-size: 10px 6px;
background-position: center center;
border: none;
display: block;
}
::-webkit-scrollbar-button:end:active {
background-color: #A2A2A2;
background-image: url('../buttons/angle_down_active.svg');
}
/* END SCROLLBAR */
/* TITLEBAR */
.titlebar {
display: block;
position: relative;
height: 32px;
width: 100%;
overflow: hidden;
padding: 0;
-webkit-user-select: none;
cursor: context-menu;
background-color: #000000;
color: #CCCCCC;
}
.titlebar.titlebarLight {
background-color: #E6E6E6;
color: #2A2A2A;
}
.titlebarDarkBlur {
background-color: #3B3B3F;
}
.titlebarLightBlur {
background-color: #CCCCCC;
}
.titlebar.draggable {
-webkit-app-region: drag;
}
.titlebar-title {
float: left;
text-align: left;
font-size: 12px;
font-weight: light;
margin-left:36px;
margin-top:8px;
-webkit-user-select: none;
width: 70%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.titlebarTitleDarkBlur {
color: #CCCCCC;
}
.titlebarTitleLightBlur {
color: #838487;
}
.titlebar-controls {
float: right;
text-align: left;
}
.titlebar:after,
.titlebar-controls:after {
content: ' ';
display: table;
clear: both;
}
.titlebar-minimize,
.titlebar-resize,
.titlebar-close {
float: left;
width: 45px;
height: 31px;
margin: 1px 1px 0 0;
text-align: center;
line-height: 29px;
-webkit-transition: background-color .2s;
}
span.titlebar-icon {
font-family: "Segoe MDL2 Assets";
font-size: 10px;
color: #FFF;
}
span.titlebar-icon-light {
color: #000;
}
.titlebar.draggable .titlebar-close {
-webkit-app-region: no-drag;
}
.titlebar-close:hover {
background-color: rgba(232, 17, 35, 0.9);
}
/* END TITLEBAR */
/* SHAREBOX */
#shareBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 1em;
padding-top: 0em;
height: 60px;
max-height: 60px;
overflow: none;
}
#shareBox div {
padding-bottom: 0.3em;
}
#shareBoxText {
font-size: 1.05em;
/* font-weight normal is 400, and bold is 700, so we want something in between */
font-weight: 600;
}
#shareBoxFileName {
font-size: 0.87em;
}
#shareBoxSubText {
color: #A2A2A2;
font-size: 0.87em;
}
div.shareBoxSeparator {
padding-top: 0.25em;
padding-bottom: 0;
margin-bottom: 0;
}
.shareBoxSeparator.padded {
padding-left: 15px;
padding-right: 15px;
}
div.shareBoxSeparator hr {
height: 1px;
background-color: #A2A2A2;
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
/* END SHAREBOX */
/* SERVICES BOX */
#servicesBox {
/* Add scrolling. The window will be of a fixed height */
position: fixed;
padding-top: 0.3em;
padding-bottom: 0;
overflow-y: auto;
overflow-x: none;
height: calc(100% - (32px + 60px + 33px));
max-height: calc(100% - (32px + 60px + 33px));
}
#servicesBoxSocial {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
/*flex-direction: row;*/
}
.shareService {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 66px;
height: 84px;
}
.shareServiceLogoBox {
background-color: #6A68D6;
width: 40px;
height: 40px;
margin-bottom: 0.25em;
/* Align logos to the center */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.shareServiceLogoImage {
width: 20px;
height: 20px;
}
.shareServiceDescription {
font-size: 0.825em;
}
.shareService:hover {
background-color: #2E2E2E;
}
/* END SERVICES BOX */
/* WINDOWS STORE BOX */
#windowsStoreBox {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0.25em 0;
font-size: 0.81em;
border-bottom: 0.05em solid #535353;
height: 32px;
max-height: 32px;
overflow: none;
}
#windowsStoreBox:hover {
color: #A2A2A2;
}
#windowsStoreBox:hover g {
fill: #A2A2A2;
}
svg.windowsStoreLogo {
padding: 0 3px;
vertical-align: middle;
position: relative;
top: -2px;
}
/* END WINDOWS STORE BOX */
<!DOCTYPE html>
<html>
<head>
<title>Share</title>
<link rel="stylesheet" href="static/css/sharebox.css">
</head>
<body >
<!-- TITLEBAR -->
<div id="titlebar" class="titlebar draggable">
<div id='titlebar-title' class="titlebar-title"></div>
<div id='titlebar-controls' class="titlebar-controls">
<div id='titlebar-close' class="titlebar-close" title='Close'>
<span class='titlebar-icon'></span>
</div>
</div>
</div>
<!-- END TITLEBAR -->
<!-- DESCRIPTION BOX -->
<div id='shareBox'>
<div id='shareBoxText'>Share</div>
<div id='shareBoxFileName' data-attr-filelocation='static/img/blank.svg'>tutankhamun.jpg</div>
<div id='shareBoxSubText'>This item will be shared.</div>
</div>
<!-- END DESCRIPTION BOX -->
<!--<div class='shareBoxSeparator padded'><hr /></div>-->
<!-- SERVICES BOX -->
<!-- This box allows you to share on facebook, twitter e.t.c -->
<div id='servicesBox'>
<!-- Add links to social media services and mail, onenote e.t.c -->
<div id='servicesBoxSocial'>
<!-- All services here -->
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/CopyFileLogo.svg' /></div>
<div class='shareServiceDescription'>Copy file</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/CopyLinkLogo.svg' /></div>
<div class='shareServiceDescription'>Copy link</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Instagram</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Mail</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Feedback</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/OneNoteLogo.svg' /></div>
<div class='shareServiceDescription'>OneNote</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Snip & Sketch</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/SkypeLogo.svg' /></div>
<div class='shareServiceDescription'>Skype</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/FacebookLogo.svg' /></div>
<div class='shareServiceDescription'>Facebook</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/TwitterLogo.svg' /></div>
<div class='shareServiceDescription'>Twitter</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/RedditLogo.svg' /></div>
<div class='shareServiceDescription'>Reddit</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/PinterestLogo.svg' /></div>
<div class='shareServiceDescription'>Pinterest</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/FacebookMessengerLogo.svg' /></div>
<div class='shareServiceDescription'>Messenger</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/WhatsAppLogo.svg' /></div>
<div class='shareServiceDescription'>WhatsApp</div>
</div>
</div>
</div>
<!-- END SERVICES BOX -->
<!--<div class='shareBoxSeparator' style='padding:0;'><hr /></div>-->
<!-- WINDOWS STORE BOX -->
<div id='windowsStoreBox'>
<p>
<svg class='windowsStoreLogo' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 210 210" width="18px" height="18px"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,210v-210h210v210z" fill="none"/><g fill="#ffffff"><g id="surface1"><path d="M90.36255,26.32691c-1.56372,0.10254 -3.15307,0.43579 -4.7168,0.94848l-13.125,4.35791c-8.02368,2.69165 -13.45825,10.25391 -13.45825,18.68774v21.58447l-26.25,3.69141v98.18116l118.125,16.53442l26.25,-8.66455v-113.15186l-26.25,-9.43359l-13.125,1.8457v-8.4082c0,-9.92066 -7.51098,-17.81616 -16.56006,-19.37988c-3.02491,-0.5127 -6.20362,-0.33325 -9.35669,0.71777l-3.74267,1.2561c-3.05054,-4.46045 -7.8186,-7.61352 -13.15063,-8.53638c-1.51245,-0.25634 -3.05054,-0.33325 -4.6399,-0.23071zM91.43921,39.375c3.76831,-0.35888 6.99829,2.48657 6.99829,6.5625v20.48218l-26.25,3.66577v-19.76441c0,-2.84546 1.7688,-5.3064 4.48609,-6.22925l13.125,-4.35791c0.56396,-0.20508 1.1023,-0.30762 1.64063,-0.35889zM117.68921,45.9375c3.76831,-0.33325 6.99829,2.48657 6.99829,6.5625v10.25391l-13.125,1.82007v-16.79077l4.48609,-1.48681c0.56396,-0.20508 1.1023,-0.30762 1.64063,-0.35889zM149.52759,72.49512l14.53491,5.22949v94.43848l-14.32984,4.7168l-103.79516,-14.53491v-75.31494zM124.6875,89.23462l-32.8125,4.61426v24.27612h32.8125zM85.3125,94.74609l-26.25,3.69141v19.6875h26.25zM59.0625,124.6875v19.6875l26.25,3.69141v-23.37891zM91.875,124.6875v24.27612l32.8125,4.61426v-28.89038z"/></g></g></g></svg>
Get apps in store
</p>
</div>
<!-- END WINDOWS STORE BOX -->
<!-- clearing div -->
<div id='styleRuleDiv' style='display:none;'></div>
<script src='static/js/sharebox.js'></script>
</body>
</html>
I'm not sure if I've misunderstood, but you because you are using fix and absolute they are excluded from the normal document flow.
So you can easily restrict the height of #servicesBox. to prevent it from touching the bottom.
See fiddle: https://jsfiddle.net/16sn87pa/
I want the webdsn-drop to be behind the #navbuttons-container but I can't get it to work. For some reason #navbuttons-container div is behind it #webdsn-drop and I want these layers reversed.
body {
background-color: #0f0f0f;
width: 980px;
margin: 0 auto;
}
/*-----NAVIGATION-BAR-----*/
#navbuttons-container {
background-color: #303030;
width: 100%;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
padding: 0;
z-index: 10;
}
#web-name {
color: #f7f7f7;
font-family: 'calibri light';
padding: 4.5px 0 0 10px;
float: left;
font-size: 30px;
margin: 0 auto;
letter-spacing: 10px;
}
#navigation {
max-width: 980px;
min-width: 854px;
margin: 0 auto;
}
.navbuttons {
float: right;
font-size: 20px;
font-family: 'calibri';
display: flex;
}
.navbuttons a {
color: #f7f7f7;
text-decoration: none;
padding: 12.5px 20px;
background-color: #303030;
transition: background-color 0.5s ease;
}
.navbuttons a:hover {
background-color: #5b5b5b;
transition: background-color 0.5s ease;
}
#webdsn-drop {
position: fixed;
left: 0px;
background-color: red;
width: 100%;
z-index: 9;
}
<div id="navbuttons-container">
<div id="navigation">
<h1 id="web-name">PORTFOLIO</h1>
<div class="navbuttons-container">
<div class="navbuttons">
Logo Design
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Art & Misc.
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Posters & Flyers
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div id="webdsn-menu" class="navbuttons">
Website Design
<div id="webdsn-drop">
<h1 class="subname">WEBSITE DESIGN
<h1>
</div>
</div>
</div>
</div>
</div>
Apply z-index: -1; to .webdsn-drop- since it's a child element of #navbuttons-container, you need to use a negative z-index in order to move it behind the parent.
I'm using Twitter bootstrap for an application that makes a CSS football field. I had originally built the application by downloading and dropping in Twitter bootstrap into my application. However, to take advantage of LESS, I then created a new application where I installed Twitter bootstrap with the gem for Rails applications. In this new application, if I change the size of the browser, the football fields dimensions will change (and it looks awful). In the old application, I could resize the browser and the field would stay the same. So far, the CSS I'm using is exactly the same (i.e. I haven't included any LESS into this new application) and the HTML is also the same, therefore, I'm not really sure what code if any to include in this question. From what I've told you can you tell me what has happened and how I can prevent the resizing?
Here's the code for the football field, although since it worked in my original application I don't know if changing anything with this markup will make a difference, but the layout hasn't otherwise changed either.
Note, I like the idea of a responsive website, however, I need the football field to stay the same size, so if there's something that can be done to it with css to ensure that it doesn't resize I'd be satisfied.
<div class="span3 field">
<div class="row endzonenorth">
</div>
<div class="row field">
<span class="qb"></span>
<div class="horizontalRule">
<span class="funnyzone"> END ZONE</span>
</div>
<div class="horizontalRule">
<div class="number right">10</div>
<div class="number left">10</div>
</div>
<div class="horizontalRule">
<div class="number right">20</div>
<div class="number left">20</div>
</div>
<div class="horizontalRule">
<div class="number right">30</div>
<div class="number left">30</div>
</div>
<div class="horizontalRule">
<div class="number right">40</div>
<div class="number left">40</div>
</div>
<div class="horizontalRule">
<div class="number right">50</div>
<div class="number left">50</div>
</div>
<div class="horizontalRule">
<div class="number right">40</div>
<div class="number left">40</div>
</div>
<div class="horizontalRule">
<div class="number right">30</div>
<div class="number left">30</div>
</div>
<div class="horizontalRule">
<div class="number right">20</div>
<div class="number left">20</div>
</div>
<div class="horizontalRule">
<div class="number right">10</div>
<div class="number left">10</div>
</div>
<div class="horizontalRule">
<span class="funnyzonesouth">END ZONE</span>
</div>
</div>
<div class="row endzonesouth">
</div>
</div>
CSS:
div.horizontalRule
{
clear:both;
width:100%;
background-color:#fff;
height:1px;
margin-top:30px;
margin-bottom:30px;
display: block;
opacity: .75;
}
.number.right{
color: #fff;
position: absolute;
right: 40px;
margin-top: -10px;
}
.number.left{
color: #fff;
position: absolute;
left: 40px;
margin-top: -10px;
}
.funnyzone{
opacity: .75;
/*top: 7px;*/
position: absolute;
color: #fff;
font-size: 22px;
margin-top: -25px;
margin-left: 15px;
}
.funnyzonesouth{
font-size: 22px;
color: #fff;
opacity: .75;
margin-top: 4px;
margin-left: 40px;
/*bottom: -3px;*/
position: absolute;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.span3.field{
background-color: rgb(96, 211, 43);
}
.row.field{
width: 90%;
background-color: #56a636;
position: relative;
margin-left: auto;
margin-right: auto;
}
.row.endzonenorth{
width: 90%;
height: 25px;
background-color: #56a636;
color: #fff;
font-size: 22px;
margin-left: auto;
margin-right: auto;
}
.row.endzonesouth{
width: 90%;
height: 25px;
background-color: #56a636;
color: #fff;
font-size: 24px;
margin-left: auto;
margin-right: auto;
}
.row.endzone{
height: 30px;
background-color: #56a636;
}
.line {
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
opacity: 0.55,
}
.linea{
padding-top: 10px;
padding-bottom: 10px;
color: white;
display:block;
}
.leftvertical {
width:1px;
height:410px;
background-color:#fff;
opacity: .55;
position: absolute;
left:50px;
}
.rightvertical {
width:1px;
height:410px;
background-color:#fff;
opacity: .55;
position: absolute;
right:50px;
}
.number.left
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.number.right
{
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
.row.endzone{
width: 90%;
}
.row.endzone2{
width: 90%;
}
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url('/assets/qb.png');
/*background-color: #fff;*/
left: 75px;
top: 300px;
visibility:hidden;
}
.span4.offset4{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 25px;
font-weight: bold;
min-height: 30px;
text-align: center;
/*width: 100%;*/
display: inline-block;
}
.row.main{
padding-top: 20px;
}
.span6.offset2{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/*font-size: 25px;*/
padding-top: 10px;
font-size: 16px;
font-weight: bold;
min-height: 30px;
text-align: center;
/*width: 100%;*/
display: inline-block;
}
you seem to be using relative width sizes, ie 100%. instead try using absolute widths ie 500px; alternatively, try setting a width for your container.
.span3.field{
width:500px;
background-color: rgb(96, 211, 43);
}
hope this is of some help..