I'm trying to put two buttons one inside the other with html. I have tried this:
<div id="photoShow" style="width: 190px; height: 212px">
<input type="button" runat="server" id="btn_ShowImage" style =" background-image: url('photos/Analog50.jpg'); width: 55px; height: 54px;"
onclick="return btn_ShowImage_onclick()" /><asp:Button
ID="btn_AddProductToReservation" Height="180px" Width="194px"
runat="server" style="margin-top: 0px; margin-left: 0px;" />
</div>
Would love to get some help, Thank you
put them in a div like that:
<div style="float:left"><button></button><button></button></div>
so you can put them aside eachother, there is no sense putting buttons in each other!
if you use twitter bootstrap you can put those buttons one inside another:
<div class="btn btn-primary btn-large">
out out
<div class="btn btn-primary btn-large">
in in
</div>
out out
<div class="btn btn-primary btn-large">
in in
</div>
out out
</div>
and it will render as expected
Related
I've been brushing up on html, css and javascript by working on a little project that I thought would be useful. It is a recipe finder based on what recipes I have in home. Anyways, my question is about lining up a few of the elements in the html page.
The part of the html page in question is:
<form>
<select size=10 id="first"></select>
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
<button type="button" id="add" onclick="right()">
>>
</button>
<button type="button" id="remove" onclick="left()">
<<
</button>
<select size=10 id="second"></select>
</form>
My css document:
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
Because all the elements are in a form tag they all appear inline. I tried putting the buttons in a table, but the tables formatting put the first select on one line, the table on a new line, and the second select on a new line.
Here is what my formatting looks like now:
and here is what I want it to look like (thanks to paint)
I'm sure I could figure out how to center the buttons vertically in the form, but if you could help me out with that too then I would really appreciate it!
HTML
<form>
<div id="sel1">
<select size=10 id="first"></select>
</div>
<div id="buttons">
<div id="buttons1">
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
</div>
<div id="buttons2">
<button type="button" id="add" onclick="right()">
>>
</button>
<button type="button" id="remove" onclick="left()">
<<
</button>
</div>
</div>
<div id="sel2">
<select size=10 id="second"></select>
</div>
</form>
CSS
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
div {
float: left;
}
#buttons1, #buttons2 {
float: none;
text-align: center;
}
It is up to you to tweak paddings and margins to leave it at your desire.
you should use div if you want to extent your design further, table is not responsive directly and type of fixed layout with messy code , you may try use div and other css property .
anyway just for that middle section , you may try div inside your table td like this :
<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
<div>
<div style="clear:both;"></div>
</div>
<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="add" onclick="right()">
>>
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="remove" onclick="left()">
<<
</button>
<div>
<div style="clear:both;"></div>
</div>
Cheers !
I'm having trouble figuring out why my jumbotron container is covering the entire page. I am trying to have the jumbotron stop right before "Find your university".
Second, I am also having trouble with moving the search bar to the middle of the jumbotron. Can anyone help? I'm new to HTML, CSS and Bootstrap.
HTML:
<div class="center jumbotron">
<div class="container">
<h1>MOVE ABROAD WITH EASE</h1>
<h2>Find out about the cities, where to live and eat, hangout groups.</h2>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-6">
<input type="text" class=" search-query form-control" placeholder="Which city are you moving to?" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.center {
text-align: center;
}
#custom-search-input {
margin: 0;
margin-top: 50px;
margin-bottom: 50px;
padding: 10;
}
Your jumbotron is likely filling your page because you have all your content inside of it. Just move everything from Find Your University and below out of it.
As for centering your input, Bootstrap provides the col-xx-offset-# concept to help with this.
Here's a Fiddle with your code updated to illustrate.
Some additional notes and pointers:
padding: 10; is invalid css (possibly just a typo). make sure to include px if that was your intention.
Creating your own .center class is unnecessary. Bootstrap comes with a .text-center class for this purpose.
I have a series of divs (which contain buttons) that are all on the same line at large screen sizes. As I make the screen smaller and smaller, the right most button gets pushed to a new line instead of staying on the same line as the other buttons. See pictures below (pic1 of large screen size, pic2 of small screen size)
pic1:
pic2:
and my html:
<div class="col-xs-12 clearfix">
<div class="col-xs-4" style="padding-left: 290px">
<button class="btn btn-default" ng-click="createProject()">New
Project</button>
</div>
<div class="col-xs-4" align="center"
ng-controller="CsvImportController"
style="display: inline-block; padding-left: 200px">
<a href="#" class="btn btn-default btn-file"
onclick="document.getElementById('fileBrowser').click(); return false;">
Select CSV File </a>
<input id="fileBrowser" style="visibility: hidden;"
class="btn btn-default btn-file" type="file" file-input="files" />
</div>
<div class="col-xs-4" align="center" style="padding-left: 110px">
<a class="btn btn-default" href="projects.html#/projects">Browse
Projects</a>
</div>
</div>
Padding is consuming your space.
Instead of:
align="center" style="padding-left: 110px"
Try:
style="text-align: center"
Bootstrap buttons are inline-blocks by default, so giving text centering css property will align them as I think you want without harcoded padding which is problem here.
use
box-sizing:border-box;
in css
This subtracts the padding and the border from the inner width when showing.
Inside this code
<div class="content">
<h1>TraceMySteps</h1>
<div>
<div range-slider
floor="0"
ceiling="19"
dragstop="true"
ng-model-low="lowerValue"
ng-model-high="upperValue"></div>
</div>
<button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>
I have my bootstrap button created. The problem here is that it is positioned on the bottom left of my div. I want to put it on the top-right/center of the div, aligned with my title (h1). How do I position it where I want it? I'm new to bootstrap so I do not know about these workarounds. Thank you.
You can use bootstrap's classes to do this.
You can add pull-right class to float the button to the right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<button type="button" class="btn btn-primary pull-right" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
<h1>TraceMySteps</h1>
<div>
<div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
</div>
</div>
Live example here.
As per your comments, for more precise control you can do this with absolute positioning instead.
You give the content element relative positioning and give the button absolute positioning. You can then use any combination of the top, right, bottom, and left properties to place it where you would like.
.content {
position: relative;
}
#right-panel-link {
position: absolute;
top: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<h1>TraceMySteps</h1>
<div>
<div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
</div>
<button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>
Live example here.
Making the bootstrap-button inside a div tag
you can create the bootstrap button inside a div and use align.
Example:
<div style="width:350px;" align="center">
<button type="button" class="btn btn-primary" >edit profile picture</button>
</div>
How to put button on up-left and up-rigth of a table? Something like this:
|button-left| |button-right|
|----------------table header------------------|
|----------------table body--------------------|
|----------------table body--------------------|
|----------------table body--------------------|
|----------------table body--------------------|
My html:
<div>
<button class="btn btn-success" >Save</button>
<button class="btn btn-danger" style="float: right;">Cancel</button>
<div id="table">
<table>.....</table>
</div>
</div>
And my html looks like this:
|button-left| |button-right|
|----------------table header------------------|
|----------------table body--------------------|
|----------------table body--------------------|
|----------------table body--------------------|
|----------------table body--------------------|
The table is auto created by datatables
Give the div wrapping your table a class like .table-wrapper and add the following CSS
.table-wrapper {
display: inline-block;
}
.table-wrapper table {
min-width: 120px;
}
Where min-width is the width of both ur buttons beside each other and maybe some extra space. This will make sure the buttons don't wrap and stay beside each other even when the table itself has little content.
Here is a codepen example. Hope this helps.
UPDATE:
To avoid having to wrap the .table-wrapper and table in another div to get blocks again (see codepen), you can replace display: inline-block with display: table.
Note: This won't work on IE7 and below (see Can I Use).
I also updated the Codepen example above to show both ways.
You should be able to put the buttons inside another div with the same width as the table:
<div>
<div style="width:(width);">
<button class="btn btn-success" >Save</button>
<button class="btn btn-danger" style="float: right;">Cancel</button>
</div>
<div id="table">
<table>.....</table>
</div>
</div>
where (width) is the width of the table.
The default width of a <div> is 100% so you just need to give your bounding <div> a width attribute (in this case give it the width of the table).
Eg.
<div style="width: 500px">
<button class="btn btn-success" >Save</button>
<button class="btn btn-danger" style="float: right;">Cancel</button>
<div id="table">
<table width="500px">.....</table>
</div>
</div>
non-JS Solution:
Use display to match up the widths (inline block for elements that need to fit to their contents and block for elements that should fit their parent)
<style>
#table {display: inline-block;}
#container {display: inline-block;}
#buttons {display: block;}
</style>
<div id="container">
<div id="buttons">
<button class="btn btn-success" >Save</button>
<button class="btn btn-danger" style="float: right;">Cancel</button>
</div>
<div id="table">
<table><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr></table>
</div>
</div>
JS-Solution (not ideal):
try this (I created a placeholder table to simulate the auto-created table)
- the display inline block css makes the container for the table size to the contents so that we can set the width of the buttons div to match it in the javascript following the table. If you dont want the JS inline you can put in in a script that fire after the DOM has loaded.
<style>
#table {display: inline-block;}
</style>
<div>
<div id="buttons">
<button class="btn btn-success" >Save</button>
<button class="btn btn-danger" style="float: right;">Cancel</button>
</div>
<div id="table">
<table><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr><tr><td>hello</td><td>column 2</td><td>hi again</td></tr></table>
</div>
</div>
<script>
document.getElementById('buttons').style.width = document.getElementById('table').clientWidth;
</script>
Wrap the buttons in a div
<div class="buttons">
<button class="btn btn-success" >Save</button>
<button class="btn btn-danger" style="float: right;">Cancel</button>
</div>
apply a clear fix on the .buttons container and float the buttons
.buttons:after {
clear:both;
content:'';
display:block;
}
.btn-success {
float:left;
}
.btn-danger {
float:right;
}
Here's the jsfiddle
UPDATE:
You could add a class to the container div like so:
<div class="container">
<div class="buttons">
...
</div>
<table>
...
</table>
</div>
and then add a float (or display: inline-block) to that container
.container {
clear:both;
float:left;
/*display: inline-block;*/
}
here's the updated jsfiddle