Putting margins between Buttons - html

I want to put margins/spacing between each of these four Buttons. I am struggling a bit with the css. The following code does not give me space between each Button. Does anyone know what I need to change?
practice.html
<div>
<input type="button" id="button0" style="color:black; width:100px; height: 50px" />
<input type="button" id="button1" style="color:black; width:100px; height: 50px" />
<input type="button" id="button2" style="color:black; width:100px; height: 50px" />
<input type="button" id="button3" style="color:black; width:100px; height: 50px" />
</div>
practice.css
.button{
margin: 20px;
}

.button is responsible for class. You should write
button {margin: 20px;}
Thats all :). Remember that button should have display: block or display: inline-block, so the element can render margin property properly.
Example of different CSS selectors:
button {} // <button>
.buttonclass {} // <button class="buttonclass">
#buttonid {} // <button id="buttonid">

add class="button" for each button:
<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />

.button is a class selector and you have no classes set. button as a selector won't work with the given HTML as the element is input. The correct css would be
input[type="button"]
{
margin:20px;
}
input[type="button"] {
color: black;
width: 100px;
height: 50px;
margin: 20px;
}
<div>
<input type="button" id="button0" />
<input type="button" id="button1" />
<input type="button" id="button2" />
<input type="button" id="button3" />
</div>
From your comments it sounds like there is another style being applied from somewhere. You may need to make a more specific selector.
Try
div input[type="button"]
{
margin:20px;
}
Also use Chrome Developer tools or Firebug for Firefox to inspect the buttons to see what styes are being applied to your buttons. Don't forget to flush your cache as well (ctr +f5) as CSS is cached by the browser.
More info on getting started with CSS Selectors

Related

Buttons are not spaced with css present

I'm having a problem with buttons in CSS.
Between the first two I get the right distance, but between the second and the third I get two buttons joined (attached) (as in the picture).
How can I solve this problem?
.buttons {
display: flex;
}
.buttons form {
margin: 0 10px;
}
<div class="buttons">
<form action="createArt.html">
<input type="submit" value="ADD" />
</form>
<input type="button" value="EDIT" onclick="confirmation_edit()" />
<input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>
#container {
display: flex;
//justify-content:space-around;
}
.butts, form {
margin-left: 10px;
}
<div id="container">
<form action="createArt.html">
<input type="submit" value="ADD" >
</form>
<input class='butts'type="button" value="EDIT" >
<input class='butts' type="button" value="DELETE" >
</div>
Change .buttons form by .buttons > *
.buttons > * { margin: 0 10px; }
You selector is faulty, u have selected 'bottom form, INSTEAD of botto. The later would have selected all the 3 buttons n have applied the CSS rules to all the 3.
You would probably be better served with a specific class on the button but here I added the selector the the input based on type (probably not the way to do this; classes should be used to style)
.buttons {
display: flex;
}
.buttons form ,
.buttons input[type="button"] {
margin: 0 10px;
}
<div class="buttons">
<form action="createArt.html">
<input type="submit" value="ADD" />
</form>
<input type="button" value="EDIT" onclick="confirmation_edit()" />
<input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>
As an option it is suitable for small projects, but for a larger project I recommend using classes.
To add styles to an element you can use: element Selector, id Selector, class Selector.
More information can be found here
.buttons {
display: flex;
}
.buttons form {
margin: 0 10px;
}
input:nth-child(2){
margin: 0 10px 0 0;
}
<div class="buttons">
<form action="createArt.html">
<input type="submit" value="ADD" />
</form>
<input type="button" value="EDIT" onclick="confirmation_edit()" />
<input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>

HTML input alignment

Busy on a game involving buttons. Having 2 questions about problems I stumbled upon.
Code:
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
}
<html>
<head>
</head>
<body>
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</body>
</html>
Questions:
Why do the button misalign when I put in a value in the the button? Dev tools also says it still the same size (50px 50px) so why does it change position?
How can I style the CSS to have zero distance bewteen the buttons (in other words: the borders of the buttons touch). I already tried to set padding/margin of html/body/input but none of these seems to work.
Why are the buttons with text being pushed down?
So there's a bit at play here. Text and inline elements vertically-align to the baseline by default. The baseline is a value determined by the line-height of the element, though an element without a line-height will determine a "reasonable" value[1] - in the case of an empty element, this will be 0. However when you add text, the element is then given a line-height and moved down by that amount.[2]
A simple solution is to force the inputs to render with the same alignment, text or not, by applying vertical-align: top.
Why is there space between the buttons?
Inline elements (and inline-block elements like your inputs) will naturally align side-by-side, however they behave similarly to text[3]. Much like if you were to put a line-break between two letters in your HTML, a line-break between inline elements will add a single space between them.
Hypothetically, if you were to put all of your inputs on one line (without spaces), it would solve your issue:
<input type="button" value="these" /><input type="button" value="are" /><input type="button" value="touching" />
<br><br>
<input type="button" value="these" />
<input type="button" value="are" />
<input type="button" value="not" />
Though I don't suggest that method - it's merely for demonstration purposes.
So what's the solution?
Well, you have some options. Choose the one that you think would work best for you.
Solution 1: Wrap the inputs in a container and apply font-size: 0 to it. The spaces will still be there, but the font-size: 0 ensures they aren't visible.
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
vertical-align: top;
font-size: 12px;
}
.container {
font-size: 0;
}
<div class="container">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
Solution 2: Bypass the triviality of inline elements and make use of display: block with float.
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
font-size: 12px;
float: left;
display: block;
}
.row {display: block;}
.row::after {
display: block;
content: '';
clear: both;
}
<div class="row">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
</div>
<div class="row">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
<div class="row">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
Solution 3: Use a more modern approach, like flexbox.
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
vertical-align: top;
font-size: 12px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
}
<div class="container">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
Sources
1: "normal: Tells user agents to set the computed value to a "reasonable" value"
2: "For inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height'.
3: "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context."
"Why do the button misalign when I put in a value in the the button?"
The default value for elements with text content vertical-align is a baseline, so you need to specify it (in my case I use vertical-align: middle).
"How can I style the CSS to have zero distance bewteen the buttons (in other words: the borders of the buttons touch)"
I followed a little hacky way and set a negative margin-left value to get buttons without space between them. I have selected specific items using input:nth-child(2n) and input:nth-child(4n - 1) selectors and gave margin-left: -4px; to them.
Here is my solution:
* {
margin: 0;
padding: 0;
}
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height:50px;
width:50px;
vertical-align: middle
}
input:nth-child(2n) {
margin-left: -4px;
}
input:nth-child(4n - 1) {
margin-left: -4px;
}
<html>
<head>
</head>
<body>
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</body>
</html>
Feel free to ask, if anything isn't clear!
For question two, you can try the border-spacing method.
For example:
input {
border-collapse: separate;
border-spacing: 0px 0px;
}

How do I increase size of text in an image input type field?

I have an input field as:
<input type="image" name="submit" value="submit" src="images/searchb1.png" id="button1"/>
Now I want to increase the size of the text Submit on that field. How can I achieve that using css?
with css:
input{font-size: SIZE;}
NEW CODE
Made Changes, because you needed to increase the submit button font size
input
{
font-size:40px;
}
or
input[type='submit']
{
font-size:40px;
}
<input type="submit" value="Submit">
OLD CODE
Try This code
input[type='text']
{
font-size:30px;
}
or
input
{
font-size:30px;
}
<input type="text" placeholder="Enter text here">
Your html
<input type="button" value="Submit"/>
CSS
input{
font-size: 16px;
}
CSS, if you make your HTML input more specific we can be more specific. As of now, here is a general way of doing it.
input{font-size: 50px;}
You can use this if you want to use inline css.
<input type="button" value="Submit" style="font-size:20px;"></input>
Alternatively page/external css;
<input id="btn" type="button" value="Submit"></input>
CSS
input{
font-size:20px;
}
I also created a jsfiddle that you can edit easily to your liking.
https://jsfiddle.net/t048Lk5z/
html:
input type="button" id="SubmitButton" value="Submit" />
Css:
input#SubmitButton{
font-size: 10em;
}
Check out w3 schools information about it.

set a proper Width for HTML Buttons

When i am using HTML To create a form the buttons are on different sizes (as size of inputted values).
It is possible to set a proper width for HTML Buttons With Out using CSS.
<form>
<input type="button" value="input"><br>
<input type="button" value="ok">
</form>
Option1
See example http://jsfiddle.net/mScnX/
HTML:
<form>
<input type="button" value="input" id='button1'><br>
<input type="button" value="ok" id ='button2'>
</form>
CSS:
#button1 {
width:400px;
}
#button2{
width:100px;
}
Option 2:
See example: http://jsfiddle.net/mScnX/2/
HTML:
<form>
<input type="button" value="input" style="width:400px"><br>
<input type="button" value="ok" style="width:100px"'>
</form>
You have a couple options.
1) You can use inline styles (not best practice)
<button style="width: 50px; height: 20px;">Click Me</button>
OR
2) You can use this in a style tag in the head of your page or in an external style sheet.
button {
width: 50px;
height: 20px;
}
There is no other way to style the html elements. But there is a way to style each button with tag in your html. Just add
<style>
input[type="button"] {
width: 13px;
}
</style>
It's a alternative but is not a good practice at all.

How to place the HTML rectangualar box at the center of the page

I have two queries as stated below:-
1) I want to move the blue colored rectangular box (containing username and password text fields) to the center of the page. I tried using &nbsp to change the location of the rectangular box but strange, it is not moving at all.Is there any parameter in HTML which can help me shift this box to the center of the page? Can anyone suggest me how can I achieve this?
2) The BORDER = 8 parameter is not working as here I want to set a dark black colored border around my rectangular box. Can anyone suggest what can be the cause of this issue?
To replicate the issue which I am facing, copy the below codes in a .TXT file and save it as .HTML file. Open in IE or Firefox browser to see the issue which I am getting.
Code:
<html>
<form id="login" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br/> <br/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/> &nbsp
</div><br/><br/>
</form>
</html>
if you only want to center horizontally try with: margin:0 auto;
http://jsfiddle.net/P2rQK/
<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
<form id="login" action="index.html">
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18" />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
It is bad to use to position elements. also <br /> is not a "clean" way.
If you want truly dynamic positioning, use the below which is not reliant on specifying dimensions. Critically it uses a CSS tabulated layout to do the position calculations. The border can be achieved by giving your form a border:8px solid black;
You should also move your styles out from being specified inline- and use CSS to control your layout instead of reliance on so much HTML (such as ).
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>
<form id="login" action="index.html">
<label>Username:</label>
<input type="text" name="userid" size="18" maxlength="18" />
<br />
<label>Password :</label>
<input type="password" name="pswrd" size="18" maxlength="18" />
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
label {
font-weight:bold;
margin-right:10px;
}
.table {
display:table;
text-align:center;
width:100%;
height:100%;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
}
form {
display:inline-block;
border:8px solid black;
width: 450px;
padding:50px 0;
background: blue;
}
input {
margin-bottom:15px;
}
although this is not a js-question:
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
position absolute, left 50% and margin-left: -225px (half width) will position the box in the middle of the screen.
border: 8px solid black is the right way to define a border of 8px width
You will need to add margin: 0 auto; to your blue box.
Look at this Demo
<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>
I would advise using a lot more CSS and less use of the and <br>.
` <html>
<style>
#login {
left: 50%;
width: 200px;
margin-left: -225px;
position: relative;
}
div {
width: 450px;
height: 250px;
background: blue;
border:8px solid #000;
padding:20px;
}
</style>
<form id="login" action="index.html">
<div>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/><br>
<input type="submit" value="Submit"><br>
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</div>
</form>
</html>`
Try playing around with margins to get the positioning correct.