I have a table with two columns, the right one contains 3 buttons, those buttons change the content in the other column of the table. I want this table to be positioned at the center top of the page but I can't figure out how to do it.
Here is a screenshot of what I want (the image shows a header too, but it's not important for now)
If it is possible I want the buttons to don't move when the content on the other column changes, but it's not a priority.
I can also change the table with another structure if this will help.
Here is html code:
<div class='main'>
<table class="table">
<tr>
<td>
<input type="button" class="button" value="edit_menu"/><br><br>
<input type="button" class="button" value="edit_desc"/><br><br>
<input type="button" class="button" value="set_push"/>
</td>
<td>
<div id="content">
<div id="edit_menu" display="none" class="form">
here is a simple form
</div>
<div id="edit_desc" display="none" class="form">
here is a second form
</div>
<div id="set_push" display="none" class="form">
here is a third form
</div>
</div>
</td>
</tr>
</table>
</div>
The forms visibility is changed via Javascript when the buttons are pressed.
Try using the below code.
css :
body {margin:0; padding:0;}
.wrapper {width: 500px /* width of your table*/; margin:0 auto;}
html :
<div class="wrapper">
<!-- put your table here -->
</div>
Related
I'm writing a code in HTML and it has 2 buttons, say a and b. I want to pass something in my URL that will trigger the button. I know how we do it for div.
<div class="a">
<a name="a" /> This is Div A
</div>
<div class="b">
<a name="b" /> This is Div B
</div>
and I can directly pass myURL.com#a/myURL.com/#b, to go to that div. But I want to know if I can do it using buttons.
Thanks
Yes you can do it with some javascript like:
<button onclick="window.location='#a';">Go to Div A</button>
If you want either button A OR button B to be visable you can use this:
CSS
.button {
display: none;
}
.button:target {
display: block
}
HTML
<!-- link in the same page -->
go to button 1<br>
go to button 2<br>
<!-- link from external page -->
go to button A<br>
go to button B<br>
<!-- buttons will only be visable when linked to -->
<a class="button" id="A"><input type="button" value="button A"></a>
<a class="button" id="B"><input type="button" value="button B"></a>
If you just want to jump to the button you answered your own question.
Just wrap the <div id="A"> around the button.
First add the id attribute to the div. Eg; <div class="b" id="part-b">
Then just link to mypage.html#part-b, eg; <a href="mypage.html#part-b>Go to part b</a>
<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.
Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).
When I resize this fiddle, the input box gets larger when I shrink the screen. Unfortunately on the iPhone, it's going off the screen in my app.
Here is the fiddle: http://jsfiddle.net/v6Bhx/5/embedded/result/ and here is the code:
<div class="row-fluid">
<div class="span6">
<table width="500">
<tr>
<td>
<div class="input-prepend">
<span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6" />
</div>
</td>
</tr>
</table>
</div>
<div class="span6">Test</div>
</div>
Also yes, I realize I am using tables. I am not doing this to format data, it is actually being used for tabular data which happens to have input boxes in it.
Either set a width on slider :
<input style="width:125px;" type="text" name="fee" value="" class="span6" />
or use css
.span6 { width: 125px; }
The reason is the table is changing row widths on page resize
My suggestion is to use table width="100%" .
<div class="row-fluid">
<div class="span6">
<table width="100%">
<tr>
<td>
<div class="input-prepend"> <span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6"
/>
</div>
</td>
</tr>
</table>
</div>
<div span="6">Test</div>
</div>
Setting the table width # 500px will likely cause a problem as the viewpoint shrinks to mobile size. Try removing the table width and see what happens.
Update
I can't picture exactly how you want the final page and table to look, but here are a few additional points you could check.
Regarding the iPhone display issue, make sure that in the head of your page you have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think that specifying a table width of 100% will be invalid HTML5. I doubt that this is the source of your problem, but try something like this in your CSS:
.span6 table{
width:100%;
}
I can see that having the form with an input prepend inside a table is going to be a challenge. If there is no way around this, you have a nesting problem at the moment -- the input.span6 is actually nested inside the another span6 column.
In general, the HTML for a nested grid with fluid rows is:
<div class="row-fluid">
<div class="span6">
<div class="row-fluid"> <!-- start nested grid -->
<div class="span12">
<!-- Form and table details here -->
</div> <!-- end nested span -->
</div> <!-- end nested row -->
</div> <!-- end span6 -->
<div class="span6">
test
</div>
</div>
See the fluid nesting section on http://twitter.github.com/bootstrap/scaffolding.html#gridSystem for full details.
Good luck!
I have the following simple HTML and styling (http://jsfiddle.net/ZLNvv/).
<DIV>
<BUTTON class="button"></BUTTON>
<INPUT class="textbox" type=text>
</DIV>
.textbox{vertical-align:middle}
.button{float:left;width:75px;height:75px}
The button is oversized to show clearly that the input box isn't obeying vertical-align:middle. If I remove the float:left styling on the button, the vertical aligning works. Is there any way to combine the two?
I've given the most minimal example which shows the problem, a more accurate example of what I am trying to achieve is below (http://jsfiddle.net/peerz/).
<DIV>
<DIV>Header</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<BUTTON class=button></BUTTON>
<div class="subHeaderText"> Subheader 1</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<div class="subHeaderText"> Subheader 2</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
</DIV>
.lineDiv{overflow:auto}
.subHeaderDiv{float:left;width:50%}
.subHeaderText{float:right;vertical-align:middle}
.textbox{float:left;height:30px;vertical-align:middle}
.button{float:left;width:75px;height:75px}
Thank you for any help.
If you want to just put the two ones side by side, try display: inline-block instead of float.
this is the default behavior for floats, the floated element will try to go up and left/right as much as possible, hence vertical align will not work. display:inline-block or margins is the way here like panos and bigfatpig said.
Try this :
<div>
<input type='button' class="button" value='press'/>
<input class="textbox" type='text'/>
</div>
<style type='text/css'>
.textbox{vertical-align:middle;display:inline-block;}
.button{width:75px;height:75px;display:inline-block;}
</style>
it should do what you want.
I put form elements in a table so that column names and inputs are aligned to 2-columns.
And I put submit button and cancel button below the table.
The table width is not fixed.
I want to put the buttons center-aligned of the table width.
One simple way is to put the buttons in the table.
But I want to separate them from the table.
What's the most elegant way to do that?
Structure like this:
<div>
<!-- Your table -->
<table />
<!-- Your buttons -->
<div style="text-align:center;">
<input />
</div>
</div>
Since the buttons and table are related you could use a fieldset:
<fieldset>
<!-- Your table -->
<table />
<!-- Your buttons -->
<p style="text-align:center;">
<input />
</p>
</fieldset>