I recently wrote some code for a pop-up sign in and sign up. But I am having trouble as I want to hide overflow-y when someone is signing up using my pop-up.
#Login {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
#okno1 {
width: 400px;
height: 200px;
text-align: center;
padding: 15px;
border: 2px solid #3A5156;
color: Black;
font-family: Ubuntu;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
font-size: 22px;
}
#Login:target {
display: block;
}
<div id="Login">
<div id="okno1">
Вход<br>
<img src="Krest.png" id="Krestik1">
</div>
</div>
Try using overflow-y: hidden:
:root,
html,
body {
overflow-y: hidden;
}
Related
I have seen many answers on this but doesn't seem to work for me. I have code like this which creates two boxes red colored:
.redboxes-horz {
width: 100%;
margin-bottom: 50px;
height: auto;
top: 0;
right: 0;
}
.redbox-horz-lg {
width: 76.05%;
background: rgba(200, 16, 46, 1);
padding: 17px 20px;
top: 0;
right: 0;
left: calc(23.95%);
position: relative;
height: auto !important;
text-align: left !important;
}
.redbox-horz-sm {
position: absolute;
width: 22px;
height: 22px;
background: rgba(200, 16, 46, 1);
position: absolute;
bottom: -22px;
left: calc(23.95% - 22px);
}
.redbox-horz-lg h1 {
color: #fff;
padding: 0;
margin: 0;
font-size: 31px;
font-weight: normal;
line-height: 1.1;
}
<div class="redboxes-horz">
<div class="redbox-horz-sm"></div>
<div class="redbox-horz-lg">
<h1>Structural Discovery Branding Standards Heading</h1>
</div>
</div>
This is how it looks right now
The issue is that I want my heading to be left aligned. For some reason when I make the display as inline-block the whole CSS gets disturbed and stops working.
For .redbox-horz-lg try using align-content: justify; or align-content: left;. If not try align-items.
Use left:0; for the class .redbox-horz-lg in css.
.redbox-horz-lg {
left:0;
}
.redboxes-horz {
width: 100%;
margin-bottom: 50px;
height: auto;
top: 0;
right: 0;
}
.redbox-horz-lg {
width: 76.05%;
background: rgba(200, 16, 46, 1);
padding: 17px 20px;
top: 0;
right: 0;
left:0px;
position: relative;
height: auto !important;
}
.redbox-horz-sm {
position: absolute;
width: 22px;
height: 22px;
background: rgba(200, 16, 46, 1);
position: absolute;
bottom: -22px;
left: calc(23.95% - 22px);
}
.redbox-horz-lg h1 {
color: #fff;
padding: 0;
margin: 0;
font-size: 31px;
font-weight: normal;
line-height: 1.1;
}
<div class="redboxes-horz">
<div class="redbox-horz-sm"></div>
<div class="redbox-horz-lg">
<h1>Structural Discovery Branding Standards Heading</h1>
</div>
</div>
I did some changes, you are expect like this?:
.redboxes-horz {
width: 100%;
margin-bottom: 50px;
border: solid;
background-color: white;
height: 80px;
position: relative;
}
.redbox-horz-lg {
width: 76.05%;
background: rgba(200, 16, 46, 1);
padding: 27px 10px;
position: absolute;
top:0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
.redbox-horz-sm {
width: 22px;
height: 22px;
background: rgba(200, 16, 46, 1);
position: absolute;
bottom: -22px;
left: calc(23.95% - 22px);
}
.redbox-horz-lg h1 {
color: #fff;
padding: 0;
margin: 0;
font-size: 1em;
font-weight: normal;
line-height: 1.1;
}
<div class="redboxes-horz">
<div class="redbox-horz-sm"></div>
<div class="redbox-horz-lg">
<h1>Structural Discovery Branding Standards Heading</h1>
</div>
</div>
I'm trying show a modal in middle of the page with a width or hight dyç
I have a div with style absolute inside div with position relative, and the button not show completely,
I try to change z-index.
link of my code https://jsfiddle.net/renatoclt/qhn9v2py/3/
Here is my HTML & CSS
.ngx-utilitario-modal {
display: table;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1000;
overflow-y: auto;
margin-top: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-body {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
width: fit-content;
height: fit-content;
overflow-y: auto;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content {
background: #fff;
margin: 0 auto;
width: fit-content;
height: fit-content;
max-height: 100%;
overflow-y: auto;
padding: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content .ngx-utilitario-modal-cerrar {
opacity: 1;
font-size: 18px;
position: absolute;
top: -30px;
right: -30px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
-moz-border-radius: 100%;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
padding: 0px;
}
.ngx-utilitario-modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
animation-delay: 2s;
}
<div class="ngx-utilitario-modal">
<div class="ngx-utilitario-modal-body">
<div class="ngx-utilitario-modal-content">
<div style="position: relative;">
<button type="button" class="ngx-utilitario-modal-cerrar" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
este es ng-content
</div>
</div>
</div>
</div>
<div class="ngx-utilitario-modal-background" [#openClose]="showModal"></div>
<div class="ngx-utilitario-modal-open"></div>
The result actually shows half of the button. I expect to show the button completely
On your .ngx-utilitario-modal .ngx-utilitario-modal-content class, you should remove overflow-y: auto;
Then you'll likely need to adjust the width of the modal to make it not be 100% so the close button isn't cut off on the sides.
Something like this:
.ngx-utilitario-modal{
display: table;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1000;
overflow-y: auto;
margin-top: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-body {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
width: fit-content;
height: fit-content;
overflow-y: auto;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content{
background: #fff;
margin: 0 auto;
width: fit-content;
height: fit-content;
max-height: 100%;
padding: 15px;
width: 80%;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content .ngx-utilitario-modal-cerrar{
opacity: 1;
font-size: 18px;
position: absolute;
top: -30px;
right: -30px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
-moz-border-radius:100%;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
padding: 0px;
}
.ngx-utilitario-modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
animation-delay: 2s;
}
<div class="ngx-utilitario-modal">
<div class="ngx-utilitario-modal-body">
<div class="ngx-utilitario-modal-content">
<div style="position: relative;">
<button type="button" class="ngx-utilitario-modal-cerrar" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
este es ng-content
</div>
</div>
</div>
</div>
<div class="ngx-utilitario-modal-background" [#openClose]="showModal"></div>
<div class="ngx-utilitario-modal-open"></div>
You can't use overflow: auto if you want this to work. Overflow would have to be set to visible.
I just fooled around with HTML/CSS to build me a page with a youtube-video with a button on top of it.
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.btn-wrapper {
width: 290px;
height: 110px;
position: relative;
margin: 40px auto 0;
}
.btn-wrapper:hover .btn-inner {
top: -4px;
transform: scale(1, 1);
cursor: pointer;
}
.btn-wrapper__container {
border-bottom: 2px solid #15b5e2;
position: absolute;
width: 100%;
height: 80px;
}
.btn-wrapper__container:before, .btn-wrapper__container:after {
border-bottom: 2px solid #15b5e2;
width: 96%;
left: 2%;
bottom: -8px;
content: "";
position: absolute;
}
.btn-wrapper__container:after {
width: 92%;
left: 4%;
bottom: -14px;
}
.btn-wrapper__container .btn-inner {
width: 104.2%;
height: 100%;
position: absolute;
top: 20px;
left: -2.1%;
border: 2px solid #15b5e2;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro', monospace;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 18px;
background: #10131c;
transform: scale(0.96, 0.96);
transition: all 0.3s;
z-index: 4;
}
.btn-wrapper__container .btn-inner__text {
text-decoration: none;
color: #15b5e2;
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/TMzouTzim0o?controls=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="btn-wrapper">
<div class="btn-wrapper__container">
<div class="btn-inner">
<a class="btn-inner__text" href="#">Hover Me</a>
</div>
</div>
</div>
While without the button added, the video is shown in background, responsive and fullscreen, with control-elements enabled. If i add the hover-button, I am no longer able to control the video in background (360 video).
How can I enable the controls of the video and still have the button usable?
I am unfortunately not a coding expert, I've puzzled these pieces together of code I found in tutorials.
Remove css property z-index: -99 from class .video-background {...}, that will fix the issue.
* {
box-sizing: border-box;
}
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
/* z-index: -99; */ /* Remove this line */
}
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.btn-wrapper {
width: 290px;
height: 110px;
position: relative;
margin: 40px auto 0;
}
.btn-wrapper:hover .btn-inner {
top: -4px;
transform: scale(1, 1);
cursor: pointer;
}
.btn-wrapper__container {
border-bottom: 2px solid #15b5e2;
position: absolute;
width: 100%;
height: 80px;
}
.btn-wrapper__container:before,
.btn-wrapper__container:after {
border-bottom: 2px solid #15b5e2;
width: 96%;
left: 2%;
bottom: -8px;
content: "";
position: absolute;
}
.btn-wrapper__container:after {
width: 92%;
left: 4%;
bottom: -14px;
}
.btn-wrapper__container .btn-inner {
width: 104.2%;
height: 100%;
position: absolute;
top: 20px;
left: -2.1%;
border: 2px solid #15b5e2;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro', monospace;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 18px;
background: #10131c;
transform: scale(0.96, 0.96);
transition: all 0.3s;
z-index: 4;
}
.btn-wrapper__container .btn-inner__text {
text-decoration: none;
color: #15b5e2;
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/TMzouTzim0o?controls=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="btn-wrapper">
<div class="btn-wrapper__container">
<div class="btn-inner">
<a class="btn-inner__text" href="#">Hover Me</a>
</div>
</div>
</div>
My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>
Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}
I'm making a webpage as a product for my presentation in school. Now, this isn't the first time I've experienced this problem, but my scrollbars seems to cut a little off the top and on the side. On top of that the scrollbar is only HALF visible.
(Note that the black task bar in the top should fill out all the way from left to right and should be right up against the top.)
<head>
<style type="text/css">
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
left: -0.5%;
top: -8px;
width: 100.9%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #111;
}
textarea {
resize: none;
position: fixed;
left: 35%;
top: 1%;
width: 30%;
font-size: 160%;
height: 35px;
padding: 3px;
}
p {
font-size:20px;
font-family: arial;
position: absolute;
}
.underline {
border-bottom: 0.5px solid black;
display: inline-block;
line-height: 0.85;
}
</style>
<script type="text/javascript">
function clearContents(element) {
element.value = '';
}
</script>
</head>
<body>
<ul>
<li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li>
</ul>
<img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box -->
<textarea placeholder="Search for jobs"></textarea>
<img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;">
<p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p>
<img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;">
<p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p>
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;">
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;">
</body>
You probably just need to reset the margin on in you body tag.
So try changing:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
To:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
margin: 0px;
}
From the CSS, remove
html, body {
**overflow-x: hidden;**
}
The overflow-x part. This fixes the problems you mentioned. Let me know if this helped.