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>
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 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 a picture and a form side-by-side but I'm not being able to achieve the desired effect. This is what it initially looks like:
Which is cool, but the picture is way to big. The picture contained can vary, so a fixed width and height is not an option, because it would deform the image. I would like to give it a height property and let it adjust the width accordingly. This is what I get if I do that:
I don't understand why the image is aligning to the bottom... The chrome metrics show nothing in that space. No padding, no margin, nothing. I cannot use negative margins because resizing the browser window causes the layout to respond and the image is thrown out of the window. This is what it looks like with a margin-top of -270px (this is exactly what I want).
But if I resize this is what happens.
Here's an HTML snippet. Please tell me if you need more code:
<div class="well second-step">
<div>
<div><img class="img-polaroid"></div>
<div style="">
<form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
<div class="control-group">
<input type="text" name="title" placeholder="Look's title">
</div>
<div class="control-group">
<textarea name="description" placeholder="Description"></textarea>
</div>
<div style="margin-left: 50px;">
<input type="reset" class="btn btn-danger" value="Cancel">
<input type="submit" class="btn btn-success" value="Publish">
</div>
<input type="hidden" name="image">
</form>
</div>
</div>
</div>
Edit:
I created a bootply, and I just added code until the issue replicated. I hope it's enough. Here it is: http://bootply.com/76022
You might consider this:
First step: using a div with a width and height:
<div class="image"></div>
Than apply CSS
.div {
width: 500px;
height: 300px;
}
Step two: Wrap the image in it as:
<div class="image"><img src="~/folder/file.png" alt="photo: /></div>
Try to apply the css
.image img {
width: 100%;
heighti: 100%;
}
This CSS will make it get the height and width according to the div. The div has 500px width so the width will never be more than that.
Third step:
Now to make sure it stays at the top left use this:
.image img {
position: absolute;
top: 0px;
left: 0px;
}
The third step means that the image should have 0 margin from left and top.
Try using absolute positioning to put it at the top of the containing div, like so:
<div class="well second-step">
<div id="img-form-container">
<div><img class="img-polaroid"></div>
<div style="">
<form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
<div class="control-group">
<input type="text" name="title" placeholder="Look's title">
</div>
<div class="control-group">
<textarea name="description" placeholder="Description"></textarea>
</div>
<div style="margin-left: 50px;">
<input type="reset" class="btn btn-danger" value="Cancel">
<input type="submit" class="btn btn-success" value="Publish">
</div>
<input type="hidden" name="image">
</form>
</div>
</div>
</div>
and
img-form-container {
position: relative;
};
img-polaroid {
position: absolute;
top:0px; //this can be changed to give it margin
};
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.
Can somebody give a simple solution as to how to align form inputs on the same line,
for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?
ex:
<style type='text/css'>
form{
display:inline;
}
textarea{
font-size:25px;
height:25px;
width:200px;
}
input.button{
height:25px;
width:50px;
}
</style>
<form>
<textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>
Have you tried playing with the vertical-align css property?
vertical-align:top;
That way everything will look consistent and you won't have to play with margins.
textarea,input.button{display:inline-block;}
or
textarea,input.button{float:left;}
take your pick depending on which way your vertically challenged
Adding a vertical-align seems to work for me:
<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>
You can usually use display:inline-block; or float:left; Are you wanting items to be alighed at the top or bottom?
In your example you haven't closed the input type, it should be type='button' - you're missing an apos.
Just give float:left to the textarea
http://jsfiddle.net/2qdJc/2/
<table>
<tr>
<td><input /></td>
<td><input /></td>
</tr>
</table>
Sure, it makes the CSS purists squirm, but it's certainly easy...
You can do something like this ( worked in my case ):
<div style="width:150px"><p>Start: <input type="text" id="your_id"></p>
</div>
<div style="width:130px;margin-left: 160px;margin-top: -52px">
Button
</div>
Here is a demo: http://jsfiddle.net/gn3qx6w6/1/
For me i used a div and put all inputs in div and used vertical-align:top; for div
<div style="vertical-align:top">
<span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
<span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
<input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
</div>