I am working on a school project, and i need to place 4 buttons in the 4 quadrants of the screen. However, the first button has a little gap between it and the top of the screen as well as the side.
Code:
game.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Game</title>
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<div id="container">
<button class="button">A</button>
<button class="button">B</button>
<button class="button">C</button>
<button class="button">D</button>
</div>
</body>
</html>
game.css
body {
background-color: black;
overflow: hidden;
position: fixed;
}
h1, h2 {
color: white;
font-family: Ubuntu Mono;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
}
.button {
border: none;
color: white;
width: 50%;
height: 50vh;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Ubuntu Mono;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: fixed;
}
.button: nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
.button:nth-child(2) {
background-color: #001fbf;
top: 0;
right: 0;
}
.button:nth-child(3) {
background-color: #e6c52d;
bottom: 0;
left: 0;
}
.button:nth-child(4) {
background-color: #1fbf1f;
bottom: 0;
right: 0;
}
However, i get the output shown here:
How can I remove the gap at the first button?
(and if you want, help me with the color :D)
Any help is appreciated! :D
It's a typo within CSS.
.button:nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
Remove the space after .button:
Related
I have 2 blocks that are each 50% of the page width. When I hover one of these 2 blocks, it then takes up 95% of the page and must go over the second (hence the increase in the z-index on hover).
When I switch my cursor from one block directly to another, we notice that from a certain point, the animation of the width is overwritten by the change of the z-index.
I'm looking for a solution to make the animation take priority over the width, not the z-index, smoother effect and ideally without using javascript.
Here is my code:
HTML :
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
z-index: 200;
width: 95%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
You can see it live here.
You can do that with omitting z-index when hover occurs. Instead you can use Adjacent Sibling Selector (+) in your CSS as the code below:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
/*z-index: 200;*/
width: 95%;
}
.horizontal__reveal__block:hover + .horizontal__reveal__block {
width: 5%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
</body>
</html>
My content in .box for some reason is going over my header, but not my footer when you resize the window. I was trying to make the footer/header fixed, so they don't move and have content go over them when the window is resized. But like I said it only works for the footer and the header allows content to go over it. So I'm wondering what can I do to fix this? Thanks.
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
Set a z-index for the header with a higher number than the .box which are both 0 by default. So, like try z-index: 999; You can decide to set a higher z-index value for the footer too, although, as it is added after the .box element in the html layout, it will show on top by default.
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
Also, in the example, I decided to change the .box css. Not positive why you have the other css styles. Guess you were working on something a bit different.
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
/* top: 50%; */
/* left: 50%; */
/* position: absolute; */
/* transform: translate(-50%, -50%); */
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
z-index: 10;
}
Using these updated classes you can achieve what you are looking for.
I'm practicing in using #media queries. Here is a part of my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/script.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="img/sprite.svg" type="image/svg+xml">
</head>
<body>
<header class="page-header">
<div class="page-header__logo-wrap">
<a href="/" class="page-header__logo-link">
<svg class="page_header__tablet-logo" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147 40" width="147" height="40" id="logotype-white-tablet" y="1948"><image id="logotype-white-tablet-logotype-white-tablet.svg" width="147" xlink:href="data:img/png;base64,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" height="40"/></svg>
</a>
<a href="/" class="page-header__logo-link">
<img src="img/logo_mobile.png" id="mobile-logo">
</a>
<a href="" class="main-nav__toggle">
</a>
</div>
<div class="page-header__nav-wrap">
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__items main-nav__item--active">Главная</li>
<li class="main-nav__items">Фотографии</li>
<li class="main-nav__items">Конкурс</li>
<li class="main-nav__items">Блог</li>
</ul>
</nav>
</div>
</header>
And here is a part of CSS:
.main-nav,
.promo-download__button,
.price-table__headers,
.phone__text,
.mail-text,
.map-block__text {
font-family: "Open Sans";
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
min-width: 700px;
font-family: "Open Sans";
background-image: url("../img/background.jpg.jpg");
background-repeat: no-repeat;
margin: 0;
}
.page-header {
position: relative;
width: 100%;
height: 114px;
display: flex;
justify-content: space-between;
background-color: rgba(30, 39, 50, 0.63);
}
.page-header #mobile-logo {
display: none;
}
.page-header__nav-wrap {
position: relative;
}
.page-header img {
margin-left: 40px;
margin-top: 34px;
}
#logotype-white-tablet {
transform: translateX(39px) translateY(32px);
}
.page-header::after {
content: "";
background-repeat: no-repeat;
background-image: url('icons/icons.svg');
background-position: 0 -2001px;
width: 59px;
height: 24px;
margin-top: 46px;
margin-right: 40px;
}
.main-nav {
display: flex;
display: none;
position: absolute;
top: 114px;
left: -431px;
width: 100%;
height: 255px;
background-color: #283645;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
line-height: 32px;
}
.main-nav__items {
list-style-type: none;
flex-grow: 1;
}
.main-nav__items a {
color: #ffffff;
text-decoration: none;
display: block;
margin-top: 14px;
}
.main-nav__items::before {
background-color: #283645;
}
.main-nav__toggle--close {
position: absolute;
top: 0;
font-size: 0;
border: 0;
cursor: pointer;
width: 22px;
height: 22px;
top: -66px;
left: 637px;
}
.main-nav__toggle {
position: absolute;
font-size: 0;
border: 0;
cursor: pointer;
width: 47px;
height: 31px;
display: block;
left: 601px;
top: 43px;
}
.main-nav__toggle--close::before,
.main-nav__toggle--close::after {
content: "";
position: absolute;
width: 26px;
height: 5px;
background-color: #ffffff;
border-radius: 1px;
}
.main-nav__toggle::before {
transform: rotate(226deg);
}
.main-nav__toggle::after {
transform: rotate(136deg);
}
.main-nav__list {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: space--around;
background-color: #1e2732;
margin: 0 auto;
width: 100%;
}
.main-nav__list li {
flex-grow: 1;
flex-shrink: 1;
margin-top: 2px;
background-color: #283645;
text-align: center;
width: 107%;
box-shadow: 0 0 2px #050505;
}
#media only screen and (max-width: 320px) {
html,
body {
margin: 0;
padding: 0;
}
body {
background-image: url("../img/background-mobile.jpg");
}
.page-header {
width: 100%;
height: 66px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
#mobile-logo {
display: block !important;
position: absolute;
top: -9px;
left: -15px;
z-index: 1;
}
#logotype-white-tablet {
display: none;
}
.promo-download__title {
display: none;
}
.os-nav {
display: none;
}
.os-nav__title {
display: none;
}
}
When I resize window to 320px (or using chrome toggle-device mode and set it to iphone) #media query works but it seems that viewport doesn't. I still can see horizontal scrollbar and parts of "big" header for 700px width. I have already read and tried most of decisions such as:
Adding meta tags (one by one) like in this question and others relative to this problem: My meta viewport doesn't work
Adding the specific width:
<meta name="viewport" content="width=320px, initial-scale=1.0">
Or maybe viewport is not the main problem and I have made something wrong in CSS grid construction?
Instead of fixing your HTML body to min-width: 700px;, use percentages for width. The media query rule content="width=device-width, initial-scale=1" will not have effect if you forcibly set page width:
For example:
body { min-width: 75%; }
You can also use variety of CSS frameworks, which handle all of those (and many other) problems, i.e. Bootstrap 3, Zurb Foundation, etc.
In your CSS, you are adding
body { min-width: 700px; }
This makes your section to fix at 700px even though your screen is at 320px. Try changing the width of body to smaller width or put them in percentages:
body { min-width: 320px; }
or
body { min-width: 90%; }
Im trying to make a loading page for my website but there is a white line along the top and one down the left side. Could someone please help me with this,
Thanks.
<DOCTYPE html>
<html>
<head>
<style>
html {
cursor: none;
}
.container {
background-color: black;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
}
p {
color: white;
text-align: center;
position: absolute;
top: 0; bottom:0; left: 0; right:0;
font-family: courier;
font-weight: bold;
}
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="progress.gif">
<p> Loading... Please wait </p>
</div>
It's the default margin, you can add
body {
margin: 0;
}
to your css.
I can't figure out why my nav bar is not going all the way across the top! I'm sure it's a super easy fix. This is for a full page slider. I only included the relevant html/css. hope that is enough!
HTML
<!DOCTYPE>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<head>
<title>Full Page Slider</title>
</head>
<nav>
<a id="home">Home</a>
<a id="">About</a>
<a id="">Contact</a>
<div class="sliderButtons"></div>
</nav>
<div id="full-slider-wrapper">
<div id="full-slider">
<div class="slide-panel active ">
Panel 1 content here
</div><div class="slide-panel">
Panel 2 content here
</div>
</div>
</div>
CSS
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
html {
min-width: 100%;
font-family: 'Lato', sans-serif;
}
nav {
text-align: left;
margin-left: 16%;
border-bottom-style:ridge;
background-color: FF7400;
}
nav a {
font-size:20px;
text-decoration:underline;
display: inline-block;
padding: 1em;
}
div.sliderButtons {
float: right;
margin-right: 20%;
}
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
}
#full-slider .slide-panel.active {
position: absolute;
visibility: visible;
}
#full-slider-nav {
position: relative;
top: 0;
right: 0;
}
#full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 20px solid transparent;
cursor: pointer;
}
Your nav element has margin-left: 16%;. Change or remove that rule.
jsFiddle example
You mean - why it does not take the full width? If so - look closely, your nav selector got a margin-left of 16%
remove margin-left: 16%; & change text-align: left; to text-align:center;
use Div forget about nav
hope it helps you. Enjoy.