So i am trying to get my buttons to show up left or right of another button, and instead of on top/bottom of the button. I'm new to all of this and would love to figure this out.
Here is my code, what could i apply to it that would make them stack left/right?
<form action="">
<input type="submit" value="Contact me">
</form>
there is a lot of ways to do this, but you can try float css property as follow:
input[type="submit"]{
float:left;
display:inline-block;
}
input[type="button"]{
float:right;
display:inline-block;
}
<form action="">
<input type="submit" value="Contact me">
<input type="button" value="another button">
</form>
Try researching the float property in CSS here. You can alter the visual flow of your HTML document by doing so, e.g.
#button1 {
float: right;
}
#button2 {
float: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 50%;">
<input id="button1" type="button" value="button 1">
<input id="button2" type="button" value="button 2">
<input id="button3" type="button" value="button 3">
</div>
</body>
</html>
If I am getting your problem correctly, you meant to say that you wanted to get the buttons in this form side to each other instead of one below the other. According to me, when you will add another button in this form, it will appear at the side of the first button only. But don't give <br/> tag between buttons and even do not put them into the separate <div> tags.
Here is the sample of my code I did for you:
<html>
<head>
<title>Button Left/Right</title>
<link src="style.css" rel="stylesheet" type="text/css"/> //add this line if you want to add css otherwise ignore this line and remove from code
</head>
<body>
<form action="">
<input class="btn" type="submit" value="Contact me"> //observe I have given class to the buttons
<input class="btn" type="submit" value="Contact me Button 2">
</form>
</body>
</html>
In case if it is not working, then create the following style.css file inside the directory where you have the current html file. And in the style.css file add following lines:
.btn{
display:inline-block;
}
Related
I have to display both these buttons in single line.
I tried adding style="{display:block-inline;}"> in form element as suggested somewhere but that too didn't help me. Any idea how to do it ?
<html>
<body>
<div>
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</body>
</html>
Put both forms in their own div and use float in your css.
See fiddle example:
<body>
<div>
<div id=form1>
<form >
<input type="submit" value="Button1" />
</form>
</div>
<divid=form2>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</div>
</body>
#form1{
float:left;
}
#form2{
float:left;
}
https://jsfiddle.net/5mcffrv9/
Inline-block works perfect. Take a look here. Demo
HTML
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
CSS
form { display: inline-block; }
HTML
Add
<div class="name">
</div>
to your forms each one.
Then in css add
.name{
float: left;
}
or
.name{
display:inline-block;
}
Check this fiddle
https://jsfiddle.net/kb86veLk/1/
Displaying with inline block
like so
https://jsfiddle.net/kb86veLk/2/
is probably the best way though.
You just need to do this:
CSS
form{display:inline;}
DEMO
i have html form and css, to side my button side by side. but im not able to give space between the buttons.
here is my code:
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>
<p style="clear:floats"></p>
</div>
</body>
</html>
In this instance, you want to set the form elements to float. From there, you can add a margin to the first form element.
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>
</div>
</body>
</html>
The easiest way is to add margin to one of the inputs.
Style="margin-right:30px;"
You may see your code with the 30px space between inputs here: http://jsfiddle.net/d6g66/
A jsfiddle or something to show it in action would be good or at least the css, but you should look into http://necolas.github.io/normalize.css/ for clear fix and without seeing your css, you should be able to use margins or padding.
Give the custom-button class a width and change the second button to float:right
http://jsfiddle.net/v85sH/
The width can be pixel, percentage, anything you like and the two buttons will be spaced evenly to the left & right.
CSS
.custombuttons {
width:100%;
}
.firstbutton {
float:left;
color:#fff;
}
.secondbutton {
float:right;
}
HTML
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" class="firstbutton" value="paste2" />
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" class="secondbutton" value="colSplit" />
</form>
<p style="clear:floats"></p>
</div>
My code for a button wont work. My goal is to get the width longer, but it has no effect. Here is a snippet of code from it, where the errors should be:
<form action="http://kindust.com/test.html">
<input type="submit" value="Shop" width="150">
</form>
CSS
.btn{
width: 150px;
}
HTML
<form action="http://kindust.com/test.html">
<input class="btn" type="submit" value="Shop">
</form>
So I created a website for my uni assignment which had a really good navigation system using two columns, left had navigation buttons by using form and input which resulted in my site looking just as I wanted, like this
http://gyazo.com/38ed9ea8133e44c57209c6992d2a4554
I am trying to recreate a similar site for personal reasons so I can learn more about the functions of CSS and HTML together, but for some reason, even though all the code is the same, the buttons do not appear, and I can't for the life of me see why they won't display on the new site. Below is my CSS file and the HTML underneath.
If you can see why then please let me know!
Here is my CSS
h1 {
color:#FFFFFF;
text-align:center;
}
body {
margin-top:75px;
margin-bottom:75px;
margin-left:30px;
margin-right:30px;
background-color:#A9BCF5;
}
.bt {
width:1050px;
}
.bt tr {
margin:0;
padding:4px;
align:center;
list-style-type:none;
}
.bt td {
align:left;
}
And here is the html
<!DOCTYPE html>
<head>
<title>
Test4CSS
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>Test Heading Text for the site</h1>
</head>
<body>
<table class="bt">
<tbody>
<tr>
<td>
<form action="index.html>
<input type="submit" value="Home Page">
</form>
<form action="page1.html>
<input type="submit" value="The First Page">
</form>
<form action="page2.html>
<input type="submit" value="The Second Page">
</form>
<form action="page3.html>
<input type="submit" value="The Third Page">
</form>
<form action="page4.html>
<input type="submit" value="The Fourth Page">
</form>
<form action="page5.html>
<input type="submit" value="The Fifth Page">
</form>
</td>
<td>
<p>
This is the example text for the page, to understand<br>
a little bit about the formatting that I have put in place.
</p>
</td>
</tr>
</table>
</body>
</html>
This was easy - see http://codepen.io/anon/pen/iwhnJ
you had some mistakes in your quotation.
<form action="index.html">
<input type="submit" value="Home Page">
</form>
In the line above the closing " were missing: <form action="index.html> This is the case for all your form element instead of <form action="page3.html> you have to write <form action="page3.html">
Okay, I'm not very familiar with HTML, or how it comes together with CSS. I have been looking all over on how to make two HTML buttons go side by side. Here is the code I'm currently using.
<FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
<input type="submit" value="Forum Home Page">
</FORM>
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
<input type="submit" value="Skill Guides">
</FORM>
No matter if I put them right after each other or put an alignment infront of them. I can't seem to get them to go next to each other. I hope there is someone that can easily and in a detailed way, help me out.
If I understand you correctly, you can just attach the following CSS:
form {
display: inline;
}
As shown here: http://jsfiddle.net/zcz3j/
Demo http://jsfiddle.net/satinder_singh1/wr4Xv/1/
<div id="main">
<div class="floatdiv"><FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
<input type="submit" value="Forum Home Page">
</FORM></div>
<div class="floatdiv">
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
<input type="submit" value="Skill Guides">
</FORM></div></div>
<style type="text/css">
#main
{
position:relative;
width:200px;
}
.floatdiv
{
float:left;
width=80px
}
</style>
You could also try wrapping them in a table tag. That's how I fixed my similar issue. The table automatically set them side by side.