I've used flexbox to stick a form to the bottom of a page. The submit button is supposed to be the footer of the page. This does work in Chrome and Safari, however in mobile Safari, when the textarea is in focus and the keyboard pops out, there is a white space under the button and you can scroll a little bit down.
Normal
When textarea is focused
How can I prevent this? This is the code I'm using
* {
margin: 0;
padding: 0;
}
.Site {
background-color: green;
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
.text-wrapper {
padding: 0 15px;
}
.text {
resize: none;
border: none;
border-radius: 0;
width: 100%;
height: 160px;
}
.footer {
background-color: red;
height: 60px;
width: 100%;
font-size: 16px;
border-style: none;
border-width: 0;
border-radius: 0;
-webkit-appearance: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="Site">
<div class="main">
</div>
<div>
<form class="footer-form" action="index.html" method="post">
<div class="text-wrapper">
<textarea class="text"></textarea>
</div>
<input class="footer" type="submit" name="" value="Submit">
</form>
</div>
</div>
</body>
</html>
Related
I've created a grid, and it's just supposed to be 4 rows at the moment, so to see the rows I added a border to them, however I'm only seeing a line, not borders of different divs in my grid.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
When you run the code, you can see a white line at the top but that's it. I'm not sure why this is happening, but it's possible it has something to do with the article? I'm fairly new to HTML and CSS so I'm not sure.
Any ideas?
The problem you described is caused by your main not having a set height. Give it a height: 100vh to fix this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
height: 100vh;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
main > article> .article-section:nth-child(odd) {
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
Because the row blocks are empty, and at the same time do not have a given min-height. Shows only the borders, and the height of the content is 0. Accordingly, they are superimposed on each other, and it looks like a white line.
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
I have a css stylesheet that successfully changes the background color of the page. However, the properties I have set on my and tags do not work.
{% block body %}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<form class='formclass' action='/' method='post'>
<div class='input'>
<input name='link' placeholder='Enter YouTube URL' type ='text'>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
{% endblock %}
and my css stylesheet
body
{
background-color: #252C3E;
text-align: 'center';
font-family: 'Courier'
}
.formclass
{
border-radius: 8px;
}
.input
{
font-size: 2em;
height: 90px;
width: 190px;
}
#title
{
color: white;
}
Why is the background color the only property being applied?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- || METADATA || -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- || STYLESHEETS || -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<!--
Page
title
--
/>
<title>Wtitle</title>
<!-- || CSS || -->
<style>
body {
padding: 20px;
display: inline-block;
background-color: #252c3e; /* Works | Changes background color */
/* text-align: "center"; Invalid Property Value */
font-family: "Courier"; /* Works | Changes font family */
}
.formclass {
padding: 5px;
border: 2px solid #73ad21;
background-color: white;
border-radius: 8px;
width: 405px;
text-align: left; /* Changes position of "Next" button */
}
.input {
font-size: 2em;
height: 90px;
/* width: 195px; Don't need this */
}
#title {
color: white;
width: 410px;
text-align: center;
}
</style>
</head>
<body>
<!-- || BODY || -->
<div id="title">
<h1>
VISUALIZER2D
</h1>
</div>
<form class="formclass" action="/" method="post">
<div class="input">
<input name="link" placeholder="Enter YouTube URL" type="text" />
</div>
<div>
<button type="submit">Next</button>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- || METADATA || -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- || STYLESHEETS || -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<!--
Page
title
--
/>
<title>Wtitle</title>
<!-- || CSS || -->
<style>
body {
padding: 20px;
display: inline-block;
background-color: #252c3e; /* Works | Changes background color */
/* text-align: "center"; Invalid Property Value */
font-family: "Courier"; /* Works | Changes font family */
}
.formclass {
padding: 5px;
border: 2px solid #73ad21;
background-color: white;
border-radius: 8px;
width: 405px;
text-align: left; /* Changes position of "Next" button */
}
.input {
font-size: 2em;
height: 90px;
/* width: 195px; Don't need this */
}
#title {
color: white;
width: 410px;
text-align: center;
}
</style>
</head>
<body>
<!-- || BODY || -->
<div id="title">
<h1>
VISUALIZER2D
</h1>
</div>
<form class="formclass" action="/" method="post">
<div class="input">
<input name="link" placeholder="Enter YouTube URL" type="text" />
</div>
<div>
<button type="submit">Next</button>
</div>
</form>
</body>
</html>
Not sure exactly what you're going for, but I think this should help you get going in the right direction. It looks like you're trying to modify values that don't exist. You can round the edges of a border if there is no border. You have to create one for your form.
I got a little problem with a website I'm currently working on. The background color/image I declare in an extern css file wont shown in my page.
Never had this issue before and I really can't figure out why this is not working..
My Code:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 1em;
font-family: 'Calibri', sans-serif;
}
#navigation {
width: 100%;
height: 5%;
padding-top: 2%;
padding-left: 60%
background-image: url(./img/nav_bg.png);
}
#nav-ul {
list-style-type: none;
display: inline;
}
#navi-li {
float: left;
margin-left: 2%;
}
#server {
width: 100%;
height: auto;
background-color: #336699;
}
#evocity {
width: 100%;
}
<!DOCTYPE html>
<html lang="DE-de">
<head>
<title>DIAMOND DarkRP</title>
<meta charset="utf-8">
<meta name="language" content="de">
<meta name="keywords" content="Garry's Mod, GMOD, DarkRP, Roleplay, Dimaond">
<meta name="description" content="DIAMOND DarkRP - Forum, Teamspeak und weitere Informationen zum Diamond DarkRP Server">
<meta name="robots" content="index,follow">
<meta name="audience" content="alle">
<meta name="page-topic" content="Gameserver">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="navigation">
<ul id="nav-ul">
<li id="navi-li">Home</li>
<li id="navi-li">Server</li>
<li id="navi-li">TeamSpeak</li>
</ul>
</div>
<div id="server">
<img src="./img/evocity.jpg" id="evocity" alt="EvoCity v33x">
</div>
</body>
</html>
I am trying to prevent the header element from scrolling, so I gave it position: fixed but that changes it size as per the second image below.
I am after a css to maintain the look of the first image and prevent the header from scrolling. Thanks
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>
Just give width:100% to header.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>
Simply add width:100%; to the header, like the following solution:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width:100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>
Add width:100%; in the .header .You can see working demo in JSFIDDLE
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width: 100%;
}
<header>
<button class="menuLeft" type="button">☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>