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>
Related
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;
}
I have some centered content on a web page for a small project that I am working on. The username and password text should be next to their corresponding input boxes, and only drop down into the position they are in right now if the screen is too slim. When I inspect the problematic text in chrome, it says that the padding is 100%, even though it is set to 0 in the css.
Here is the problem area:
<div id = 'log in stuff' class = 'logInContainer' hidden>
<h1>Log In:</h1>
<div class = 'small'>Username: </div> <input id = 'username'>
<br>
<div class = 'small'>Password: </div> <input id = 'password'>
<br>
<button id = 'create account'>create account</button>
<button id = 'log in'>log in</button>
<br>
<div id = 'log in problem'></div>
</div>
And here is the css:
.small{
color:#0071a5;
font-size: 3em;
width:50%;
margin:0;
height: 12%;
padding:0;
border:0px;
}
input{
width:40%;
margin: 0;
height: 7%;
border:0.5em solid blue;
border-radius: 0.5em;
background-color: #5d6f72;
}
.logInContainer{
margin: auto;
width: 100%;
position: absolute;
top:1%;
text-align: center;
left:0%;
height: 100%;
}
Currently It looks like this:
I would like the input boxes to be next to the text, not below it, and have the text and the input centered horizontally. This is my first real HTML project, so i'm relatively new to css. Is there a way to do this?
You can use the label tag to make sure that your text falls next to your input tag. This code below worked perfectly fine for me try it yourself :-). And i even added the form tag so you know why the input field is smaller.
<div id = 'log in stuff' class = 'logInContainer' hidden>
<h1>Log In:</h1>
<form>
<label class="small" for='username'>Username: </label>
<input name="username" id = 'username'>
<br>
<label for="password" class="small">Password: </label>
<input name="password" id = 'password'>
</form>
<br>
<button id = 'create account'>create account</button>
<button id = 'log in'>log in</button>
<br>
<div id = 'log in problem'></div>
</div>
Because "div" is a block element so add
display: inline-block;
to "small" class in your code to be as follow:
.small{
color:#0071a5;
font-size: 3em;
width:50%;
margin:0;
height: 12%;
padding:0;
border:0px;
display: inline-block;
}
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.
I have this code of popup.htlm file:
HTML
<body>
<select style="width: 100%;"
multiple id="HLSlist">
</select>
<span style="display:inline">
<button type="button" id="Deletebut">Delete</button>
<button type="button" id="OpenAllbut">Open All</button>
<t id='VFlagged'>0</t>
</span>
<hr>
<input type="checkbox" id="BlurThumbs">
<t>Blur Thumbnails</t>
</body>
CSS
body {
overflow-x: hidden;
min-width: 200px;
}
t {
font-size: 10pt;
}
I want that the text goes to the right side, like appear on the picture:
You can simply float it.
jsFiddle here - it has the results you expect.
#VFlagged {
float: right;
padding-right: 10px;
}
Some padding might be necessary - I added 10px..
Also.. I changed the t element to a span..