Can anyone kindly help me on how to align these two buttons using css?
<div>
<form action="create.html">
<input type="submit" value="Add" />
</form>
<input type="button" value="Delete" onclick="deleteItem()" />
</div>
As I did the two buttons are one above the other
.buttons{
display: flex;
justify-content: center;
}
.buttons form{
margin: 0 10px;
}
<div class="buttons">
<form action="create.html">
<input type="submit" value="Add" />
</form>
<input type="button" value="Delete" onclick="deleteItem()" />
</div>
add class="container" to div
and id ="btn" to button
<style>
.container{
text-align: center;
padding-top: 100px;
}
#btn{
font-size: 25px;
}
</style>
whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center align button</title>
<style>
.container{
text-align: center;
padding-top: 100px;
}
#btn{
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<form action="create.html">
<input type="submit" value="Add" />
</form>
<br />
<input type="button" id ="btn" value="Delete" onclick="deleteItem()" />
</div>
</body>
</html>
Related
I am creating a front-end for google homepage for a project, but I am confused about how to apply spacing of the nav bar same as the original google home page. The code below has spacing something like this:About Store Images Sign in but I want something like this About Store Images Sign in.
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
About
Store
Images
Sign in
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
Advertising
Business
How Search works
Privacy
Terms
Settings
</div>
</body>
</html>
I will appreciate any help or suggestions for this.
Here is a solution using display: flex and justify-content: space-between;
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
#header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
<div>
About
Store
</div>
<div>
Images
Sign in
</div>
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
Advertising
Business
How Search works
Privacy
Terms
Settings
</div>
</body>
</html>
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
If i edit the margin-left from 1 div, the form(div) moves also. How can i fix this? I want to have like 3 columns with some text.
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
If understand correctly, you want to edit each DIV individually?
in that case at the moment you can't as the div id="loginwrapper" is a div that controls all of your code. if you want to edit input manually give them a class and edit them in css
for example
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
.input_one{ <----this is the class name of the input (this can be anything you like)
margin-right: 25px !important
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
I am trying to put my CSS code in the same file as my HTML code, but it does not display properly (I do not want to just link my CSS to my HTML, I already got that to work). I have tried copying and pasting the code, but that does not work. Do I have to do it differently when it is in the same file?
Here is the relevant code:
<head>
<title> Example </title>
<style type="text/css">
input: textarea{
resize: none;
}
input[type=button]{//set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id = "mainForm" name="mainForm" method="get" action="" onsubmit=" return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1"> </input>
<input type="button" value="2" id="button2"> </input>
<input type="button" value="3" id="button3"> </input>
<input type="submit" id="submit" name="submit" class="btn" value="Submit" />
<input type="reset" id="reset" name="reset" class="btn" value="Clear" />
</form>
</body>
Here is a pic of how it looks when I link it
And here is a pic of how it looks when I try putting the CSS in the HTLM file
no need to specify input just textarea . you can even use inline css for textarea.
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{
width: 5em; height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
Works for me. Only problem I see is input: textarea is invalid. Just use textarea instead.
<head>
<title> Example </title>
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{ //set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id="mainForm" name="mainForm" method="get" action="" onsubmit="return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1">
<input type="button" value="2" id="button2">
<input type="button" value="3" id="button3">
<input type="submit" id="submit" name="submit" class="btn" value="Submit">
<input type="reset" id="reset" name="reset" class="btn" value="Clear">
</form>
</body>
So I have a problem with that the "submit" box doesent show right under the "Password-input". So I wondered if you could help me. Thanks for any answers. Im not a professional programmer so keep that in mind.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<input type="submit" id="Submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Okey its very simple
<label> </label>
<input type="submit" id="Submit" value="Submit">
make an empty label for submit button
Just add 'br' tag which is nothing but new line. Here is the code
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<br>
<br>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<br>
<br>
<input type="submit" id="Submit" value="Submit">
<br>
<br>
</fieldset>
</form>
</body>
</html>
hope this helps for u!!