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
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 am trying to finish a project but I am stuck on the final step.
All I want to do is put some text on the side of an interactive google map. However so far no matter what I have tried the text stays underneath. Here is the HTML code:
<!--Reach out section begins-->
<section id="reach-out" class="contact">
<h2 class="section-title secondary-border">
<p>Reach Out</h2></p>
<div class="contact/info">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
>
</iframe>
</div>
<div>
<h3>Pump Buddy</h3>
<p>
Any questions or concerns before signing up? <br />
Let us know, and we will be happy to talk to you.
</p>
<address><!-- <address>: Defines the contact information
for the author or owner of the document or parent element.-->
55 Main Street<br />
Some Town, CA<br />
12345<br />
P: 555.PUMP.BUDZ (555.786.2839)<br />
E: info#pumpbuddy.io
<!-- Using the mailto: prefix in the anchor tag's href attribute
instructs the browser to open the default mail client application
upon clicking the link and then populates the address field with
the email address listed in the href value. -->
</address>
</div>
</section>
</body>
and this is the corresponding CSS:
/* REACH OUT STYLES START */
.contact {
text-align: center;
background: #024e76;
}
.contact h2 {
color: #fce138;
}
.contact-info iframe {
width: 400px;
height: 400px;
}
/* This is a potentially
dangerous choice due to possible side effects
(unless a global rule is needed). By using the
class (contact-info) as the CSS selector, also called a class
selector, we can safely target the <iframe> that
is a descendant or child of the element with this class.*/
.contact-info div {
width: 410px;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 30px 0 0 60px;
color: white;
}
.contact-info h3 {
color: #fce138;
font-size: 32px;
}
.contact-info p, .contact-info address {
margin: 20px 0;
line-height: 1.5;
font-size: 20px;
font-style: normal;
}
.contact-info a {
color: #fce138;
}
/* REACH OUT STYLES END */
Any kind of help would be greatly appreciated!
Try this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-5">Reach Out</h2>
<div class="row">
<div class="col">
<div class="text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
></iframe>
</div>
</div>
<div class="col">
<div class="">
<h3>Pump Buddy</h3>
<p>Any questions or concerns before signing up? <br> Let us know, and we will be happy to talk to you.</p>
<address>
55 Main Street<br>
Some Town, CA<br>
12345<br>
P: 555.PUMP.BUDZ (555.786.2839)<br>
E: info#pumpbuddy.io
</address>
</div>
</div>
</div>
</div>
</body>
</html>
Use z-index and set position property to absolute or fixed for the text you want to display over the map.
.intro h1{
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p{
font-family: 'Calibri';
font:italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content{
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1{
padding: 0px 1050px 0px 20px;
}
#para2{
padding: 0px 1099px 0px 20px;
}
.username-label, .username-textbox, .password-label, .password-textbox {
text-align:right;
}
<html>
<head>
<link href="~/Styles/Home.css" rel="stylesheet" />
<title>Final Project</title>
</head>
<body>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/Home.js"></script>
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records
in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<div class="content">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="username-label">Username: </div>
<div class="username-textbox">
<input class="existing username-input-textbox" type="text" value="" />
</div>
<div class="password-label">Password:</div>
<div class="password-textbox">
<input class="existing password-input-textbox" type="text" value="" />
</div>
<button id="button1">Log in</button>
<hr />
<p id="para2">New Users, please create a new account by providing us with some basic information.</p>
<div class="Username-label1">Username: </div>
<div class="username-textbox1">
<input class="username-new-input-textbox" type="text" value="" />
</div>
<div class="Password-label2">Password:</div>
<div class="password-textbox2">
<input class="password-new-input-textbox" type="text" value="" />
</div>
<div class="Email-label3">Email:</div>
<div class="email-textbox3">
<input class="email-new-input-textbox" type="text" value="" />
</div>
<div class="Repeat-Email-label4">Repeat Email Address:</div>
<div class="repeat-email-textbox4">
<input class="reenter-new-input-textbox" type="text" value="" />
</div>
<button id="button2">Create Account</button>
</div>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</body>
</html>
I am working on a web development project which consists of a login desktop screen that let's students at Tri-C (this is just for practice) enter their user name and password if they already have an existing account, but for the students who don't have an account, they can create an account. Also, I have not started to create any functionality on any of the buttons (that's coming later). I have been having trouble with trying to position the username and password labels and username and password textboxes to the right hand. I know I can use text-align property to get them to be on the right hand, but it doesn't do what I am trying to do in the picture. Here is my code so far and picture of what I am trying to accomplish.
Here is my desired outcome
Create new div elements inside the content div, one for the left side and one for the right side. Then set display: table-cell; and width: 50%. That should take care of it.
See a fiddle here
Edit: and get rid of that crazy padding!
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.
For some reason, the buttons on the page I'm working on won't center.
Here's what I've got for HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="chaos.css"/>
<script type="text/javascript" src="jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="Chaos.js"></script>
<title>MTG Chaos Roller</title>
</head>
<body>
<div class="button">
<input type="submit" value="Roll Chaos">
<input type="submit" value="Roll EnchantWorldLand">
<input type="submit" value="Roll PersonaLand">
<input type="submit" value="Roll WackyLand">
</div>
</body>
</html>
CSS:
body {
background-color: black;
};
.button {
text-align: center;
};
I dunno. It seems to work on other people's stuff. I'm sure it'll become clear once it's explained what I'm doing wrong.
You've incorrect CSS. You don't need to terminate CSS with semi-colon(;).
Use this. Demo
body {
background-color: black;
}
.button {
text-align: center;
}
Try:
body {
background-color: black;
text-align: center;
}
Currently you are setting the buttons to center the text inside of them, when you change it to the above, you are ensuring that elements on the page will be centered.