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.
Related
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;
}
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>
I have a simple situation as shown below:
<body>
<iframe id='my_iframe' name='my_iframe' style='display:none;'></iframe>
<form id="fileupload" method="POST" enctype="multipart/form-data" action="upload_test.php" target='my_iframe'>
<input name="theText1" id="theText1" type="text" />
<input name="theFile1" id="theFile1" type="file" />
<button style="width:40px;height:10px;" name="button1" id="submit" type="submit" />
</form>
<div style='width:100px;height:100px;' id='target_div'>Test Text</div>
</body>
Problem: The Div is not visible. It does show if I move it above the iframe. I have never used an iframe before. Can't figure this one out. Any suggestions?
After some fiddling with JSFiddle (pun intended), it appears that the button tag is not self-closing. Changing <button ...... /> to <button ....></button> seemed to have made the div tag appear correctly ("Test Text" was being placed inside of the button, which makes me conclude that the button tag is not self-closing).
JSFiddle
I have HTML tag in my JSP page like this:
<form action="updateaddr" method="post">
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
Then below the form tag, I am trying to put button that would redirect to another page.
<a href="personal?id=${id}">
<button>返回</button>
</a>
I want to place this button next to
<input type="submit" value="注册"/>
Currently it is placed below this when running Tomcat.
I appreicate if someone could help me.
http://jsfiddle.net/isherwood/w9SGz
Just put the link inside the form.
...
<input type="submit" value="注册" />
<a href="personal?id=${id}">
<button>返回</button>
</a>
</form
UPDATE: You'd need to give the button a type to prevent oddness: http://jsfiddle.net/isherwood/w9SGz/2
Jukka is correct that this could be considered invalid markup, and I know for a fact that some browsers don't like it. I agree that styling a link as a button is a better approach. However, that wasn't the question.
If you don't want to do that, negative margins may help, though it's a bit finicky and fragile:
http://jsfiddle.net/isherwood/w9SGz/1
#myButton {
margin-left: 50px;
margin-top: -26px;
display: block;
}
You could use JavaScript and place it within the form element:
<input type="submit" value="注册"/>
<button onclick="window.location.href='personal?id=${id}'">返回</button>
</form>
This works fairly consistently across browsers that have JavaScript enabled
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">