Hello i cant make this work, im making an embed sender with my bot on dashbaord, and i cant make color input good, when i put height auto its broken. I want it to look like a discord embed.
The color on embed isnt going to the bottom. The color cant be fixed cause theres textarea and if it we resize it then its not gonna go to the bottom. Also textarea must be resiable.
Image
HTML (ejs):
<html>
<body>
<div class="mainBoxDash">
<div class="settings">
<form method="POST">
<div class="customEmbed2">
<p class="changeEmbedSettings">Change all embed settings down below</p>
<div class="lineWelcome"></div>
<img class="embedImageBot" src="<%= bot.user.avatarURL()%>" alt="">
<p class="botName"><%= bot.user.username%></p>
<img class="botTag" src="https://cdn3.emoji.gg/emojis/bot.png" alt="">
<div class="embed">
<input type="color" id="embedColor" class="embedColor" accept="hex" name="embedColor" value="#0076ff">
<%- guild.icon ? `<img src="https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}" class="authorImage">` : `<img src="https://maki.gg/static/app-assets/images/portrait/default.png" class="authorImage">` %>
<input class="authorName" name="authorName" maxlength="100" value="<%= guild.name %>">
<textarea name="descriptionBot" id="descriptionBot" class="descriptionBot" maxlength="4096" required="required">Embed Description</textarea>
<input class="footerName" name="footerName" maxlength="32" value="<%= bot.user.username %> • <%= new Date().getFullYear();%>">
</div>
<div class="invisibleEmbed"></div>
</div>
<button type="submit" class="saveSettings">
<p class="saveText">Send Embed</p>
</button>
</form>
</div>
<%- include('footer'); -%>
</div>
</body>
</html>
CSS:
.embed{
background-color: #2f3136;
width: 70%;
height: auto;
margin-left: 85px;
margin-top: 5px;
border-radius: 5px;
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 3px;
height: auto;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
Related
So I am making an HTML sidebar in Google Sheets using Apps Script. I am also using the Skeleton CSS framework.
So I'd like the submit button here to be centered:
I've tried this: making an align class in CSS, and then applying it to the button. I forgot to mention that all my other elements are aligned except the buttons.
<style>
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
</style>
Here is my HTML code:
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
Thanks!
All of these 3 solutions should work, I would choose the second or third one.
If you make the div full-width and add align to it, it should work
<div class="u-full-width align">
<button type="submit" class="button-primary">Submit</button>
</div>
You can also make the div a flex, like so (Use classes instead of inline style)
<div class="u-full-width" style="display:flex; justify-content: center">
<button type="submit" class="button-primary">Submit</button>
</div>
You can also add margin:auto and float:none to the button (Use classes instead of inline style)
<button type="submit" class="button-primary"
style="margin:auto; float:none">Submit</button>
The code is:
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
And here it is in action:
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
/*new code from here*/
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
css:
h1{
font-size: 20pt;
width:100%;
}
h2{
font-size: 16pt;
width:100%;
}
html:add all text content within span tag:
<h1 class = "align "><span>Welcome to the clothing expense custom menu bar! </span></h1>
I would like to make the form on my web page larger on my screen. I have searched up ways to do this but none of the properties I set work. HTML:
{% block body %}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<div id='subheading'>
<h2>
Enter a YouTube URL below to start!
</h2>
</div>
<form action='/' method='post'>
<div id='input'>
<input name='link' placeholder='Enter YouTube URL' type ='text'>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
{% endblock %}
CSS:
{% block style %}
body
{
background-color: #252C3E;
text-align: center;
font-family: 'Courier';
}
#input
{
font-size: 20px;
}
#title
{
color: white;
font-size: 40px;
}
#subheading
{
color: white;
}
{% endblock %}
What am I missing? If I set a height to me #input tag the invisible box around the form gets larger but not the form itself.
You can simply use textarea instead of an input field. It work the same way as input works
Also, you can increase the number of rows and col to increase it size as you want to.
Run snippet below
body {
background-color: #252C3E;
text-align: center;
font-family: 'Courier';
}
#title {
color: white;
font-size: 40px;
}
#subheading {
color: white;
}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<div id='subheading'>
<h2>
Enter a YouTube URL below to start!
</h2>
</div>
<form action='/' method='post'>
<div id='input'>
<textarea placeholder='Enter YouTube URL' id="link" rows="4" cols="50">
</textarea>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
I've set the pixel size in my CSS to 50px but in the browser when expand my navigation menu the it sets the px size to 55.15.. etc. This same problem affects the Log Action, View Action and Keysystem pages. It doesn't affect the facilities info page. There is a gap below the first link on the drop down menu as well. I image the pixel size of the text is causing this because, again, it doesn't happen on my main index page.
I've tried changing the px to an rem value that will scale it to 50px from the page default of 38px. It also doesn't solve the problem.
CSS is as follows. .nav_main a is where I have set the px size to 50px.
* {
font-family: Arial;
margin: 0px;
}
html,body
{
height: 100%;
margin: 0px;
padding: 0px;
font-size: 38px;
overflow: visible;
}
h1 {
display: block;
}
.nav_main {
display: block;
position: relative;
width: 100%;
background-color: #282828;
overflow: auto;
}
.nav_main a {
width: 100%;
text-decoration: none;
padding-top: 32px;
padding-bottom: 32px;
margin: 0;
text-align: center;
font-size: 50px;
color: #fff;
}
.nav_main .icon {
display: inline;
float: right;
width: auto;
padding: 27.5px;
}
.nav_main .icon_clicked {
position: absolute;
right: 0px;
top: 0px;
width: auto;
padding: 27.5px
}
This is the log action page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilities Portal - Log Action</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" class="activeNav" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<form action="#" id="logActionForm">
<p>Your Name: </p><input type="text" name="FullName" placeholder="Type your name here...">
<p>Email: </p><input type="email" name="EmailAddress" placeholder="Type your email here...">
<p>Issue: </p>
<select>
<option value"" disabled selected hidden>Please choose...</option>
<option value="hnf">Health and Safety</option>
<option value="comfort">Comfort</option>
<option value="other">Other</option>
</select>
<p>Description: </p><input type="text" name="Desc" placeholder="Brief description of issue...">
<p>Details: </p><input type="text" name="Details" placeholder="Extra details here...">
<p>Upload Picture</p><input type="file" name="pic" accept="image/*">
<button type="submit" form="logActionForm" value="submit">Submit</button>
<button type="reset" value="reset">Clear</button>
<button type="button" value="viewPrevActions">View Previous Actions</button>
</form>
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script src="js/common.js"></script>
</body>
</html>
This is the index page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilites Portal Main</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" class="activeNav" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<img class="portal-img" src="images/spanners-tools.jpg" alt="Log Action Img">
<img class="portal-img" src="images/clipboard.jpg" alt="View Actions Img">
<img class="portal-img" src="images/batch-books.jpg" alt="Facilities Infomation Img">
<img class="portal-img" src="images/close-up-keys.jpg" alt="Key System Img">
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
Browser picture for log action page (the error is on this page). Highlighted yellow is the problem. This occurs on the log action, view action and key system pages.
https://imgur.com/qDvZj8T
Browser picture for index page (it works correctly)
https://imgur.com/e9jVCSg
I would like for the browser to follow the CSS i've set like on the index page. The other pages don't follow suit for some reason.
I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other.
The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:
First attempt (code without the Dot after <):
<.input type="text" id="username">submit
Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file.
In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.
The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.
HTML CODE:
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS CODE:
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
Would really love if someone could help me out here.
Im terrible at it but i would Hope someone can help me.
Thanks Guys.
There were some errors in your code, one of which ".logsec [id=button]" was stopping the button lining up. I removed the float and used inline-block instead. Google it, I'm sure the W3C has some tutorials. Anyway, here's the working code:
CSS
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
#subinput {
display: inline-block;
}
HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
Here it is working in a fiddle (I hope, not sure how long the code saves for)
FIDDLE
I am trying to make a small box where people can log in to my site, but im not the best at CSS. I want to have it like this
paragraph "username"
input(text)
parargraph "password"
input (password)
button(submit)
with small spaces between but I cant understand how to make them stay under each other :(
could a nice codegod help me?
CSS:
.login {
float: right;
height: 300px;
width: 300px;
background-color: white;
}
.login p{
float: left;
margin: auto 0;
clear: both;
}
.login input{
float: left;
}
.login button{
float:
}
.login input{
text-align: center;
}
button.loginBtn{
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matombrining</title>
<link rel="stylesheet" type="text/css" href="Css/Stil.css"/>
</head>
<body>
<header class="banner">
</header>
<nav>
<ul>
<li>Hjem</li>
<li>Info</li>
<li>Hvorfor</li>
<li>Login</li>
</ul>
</nav>
<main class="mainContent">
<h1>Hovedinfo</h1>
<div class="login">
<h1>login boks</h1>
<p>Brukernavn</p>
<input type="text" class="userIn" id="userIn"></input>
<p>Passord</p>
<input type="password" class="passIn" id="passIn"></input>
<button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
</div>
</main>
Sorry if this code looks bad, havent played around with coding for a long time hehe.. Help is very much appreciated!!!
What you are asking is (almost) default behaviour, just the input and button need to be turned in to block elements to have them go onto their own line. have a look at the following example: http://jsfiddle.net/kr8cyobk/
<div class="login">
<h1>login boks</h1>
<label>Brukernavn
<input type="text" class="userIn" id="userIn" />
</label>
<label>Passord
<input type="password" class="passIn" id="passIn"></input>
</label>
<button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
</div>
And this is all the css you need for that login form:
input, button {
display: block;
}
Note that I took the liberty of making your inputs self closing (<input />) and turning those p tags in the semantically more correct labels so you have the added advantage of making them clickable, and things like screenreaders and crawlers can make more sense of your page.