I want to centre align a number of tables next to each other at the top in the middle of a div. Underneath these tables I want to have a list of vertical buttons left aligned. I have tried many different techniques but none of which seem to work. Please could someone help?
Current Fiddle Example:
https://jsfiddle.net/Jaron787/gg30jgh5/
CSS
.TSS {
font-family: Verdana, Geneva, sans-serif;
font-size: 10.6px;
font-style: normal;
text-decoration: none;
float: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid black;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
HTML
<div id="lse" class="display">
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 1</b></td>
</tr>
</table>
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 2</b></td>
</tr>
</table>
<input type="submit" class="button button1" name="submitButton" value="Button 1">
<input type="submit" class="button button1" name="submitButton" value="Button 2">
<input type="submit" class="button button1" name="submitButton" value="Button 3">
<input type="submit" class="button button1" name="submitButton" value="Button 4">
</div>
Probably just create a wrapper around the tables.
<div id="centertbl">
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 1</b></td>
</tr>
</table>
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 2</b></td>
</tr>
</table>
Then apply the text-align to center.
#centertbl { text-align: center;}
That will center the tables in middle. Removed the margin: 0 auto; from the class .TSS.
Change the button css code from display: inline-block; to display: block;
jsFiddle : https://jsfiddle.net/gg30jgh5/6/
I think you need this type of css:
please check updeted fiddle link:
some changes in your html structure.table is one div and button is another sepreate div.
https://jsfiddle.net/gg30jgh5/9/
Set both tables inside a div and set margin-left:50% for this div
Set all buttons inside a div and set clear:both for this div.
Related
I am working on a website. I ran into a slight issue which I haven't been able to fix.
I am trying to make a dropdown menu show up, using 'hover' in CSS, but it is not showing up for some reason.
Here is my HTML code:
<div>
<button class="button button1"> Our Mission</button>
<div class="dropdown">
<button class="button button3">What We Do</button>
<div class="display_things">
<section class="column">
<table>
<tr>
<th>Our donations</th>
</tr>
<tr>
<td><a>Event 1</a></td>
</tr>
<tr>
<td><a>Event 2</a></td>
</tr>
<tr>
<td><a>Event 3</a></td>
</tr>
</table>
</section>
<section class="column">
<table>
<tr>
<th>Our Community Work</th>
</tr>
<tr>
<td><a>Event 1</a></td>
</tr>
<tr>
<td><a>Event 2</a></td>
</tr>
<tr>
<td><a>Event 3</a></td>
</tr>
</table>
</section>
</div>
</div>
<button class="button button4">Donate!</button>
Here is the CSS:
.button3 {
background-color: #00ff9d;
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 10px;
border-radius: 20px;
width:400px;
white-space: nowrap;
}
.display_things {
justify-content: space-around;
margin: 10px;
background-color: lawngreen;
display: none;
width: 1100px;
position: absolute;
}
.button3:hover .display_things{
display: block;
}
.button4 {
background-color: #f4740b;
border: none;
color: white;
padding: 15px 170px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 10px;
border-radius: 20px;
width:400px;
}
.button:hover{
background-color: green;
}
Can anyone tell me why exactly the drop-down is not working? I wanted it to be displayed whenever the button is hovered over.
Thank you!
You're using :hover, so your version .button3:hover .display_things { should include either a + or ~, as you're trying to select a sibling.
So you need to change the selector to either;
.button3:hover + .display_things { (for adjacent sibling)
OR
.button3:hover ~ .display_things { (for general sibling, if you are to place anything(s) between the hover and show elements)
Either will work in your code.
I am facing an issue with a button set in a table cell which covers two rows. it does not fill the second row. how can i make this button fill both rows? I have tried to set height in the style of the button as well as on the table cell itself without success. Please see my code is below:
1) the css style of the button:
.button {
padding: 5px 15px;
font-size: 1.1em;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 1px;
box-shadow: 0 2px #999;
width: 100%;
vertical-align: middle;
}
And 2) my html table below:
<tr>
<td rowspan="2">
<button href="#0" class="button" id="cancel_order">Aκύρωση</button>
</td>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Εκτύπωση</button>
</td>
<td rowspan="2">
<button class="button">Παραγγελία</button>
</td>
</tr>
<tr>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Απόδειξη</button>
</td>
</tr>
In my opinion you should use css3 flexbox to achieve this as shown below:
.btn-holder {
display: flex;
}
.btn-holder .btn-holder {
flex-direction: column;
}
.button {
margin: 0 5px 5px 0;
padding: 5px 15px;
font-size: 1.1em;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 1px;
box-shadow: 0 2px #999;
}
<div class="btn-holder">
<button class="button" id="cancel_order">Aκύρωση</button>
<div class="btn-holder">
<button class="button">Εκτύπωση</button>
<button class="button">Παραγγελία</button>
</div>
<button class="button">Απόδειξη</button>
</div>
https://jsfiddle.net/k5wefqz5/1/
Is this your expected result ?
You miss <table> tag to complete your code.
Add this:
button {height:100%; }
Wrap table elements inside a <table> in order to get <td> and <tr> to behave as expected.
SNIPPET
table {
border: 1px solid red;
}
td {
border: 1px solid black;
}
button {
height: 100%;
}
<table>
<tr>
<td rowspan="2">
<button href="#0" class="button" id="cancel_order">Aκύρωση</button>
</td>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Εκτύπωση</button>
</td>
<td rowspan="2">
<button class="button">Παραγγελία</button>
</td>
</tr>
<tr>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Απόδειξη</button>
</td>
</tr>
</table>
I have the below working example which I need tweaking slightly:
As you can see there are two centre aligned Tables. With a list of vertical buttons below left aligned.
The tables can have different numbers of <tr>'s and I want the tables to be equally aligned at the top not from the bottom. I.e. I want no gap at the top of the table 2. Does anyone know how I can amend this?
https://jsfiddle.net/Jaron787/gg30jgh5/16/
HTML
<div id="lse" class="display">
<div id="centertbl">
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 1</b></td>
</tr>
<tr>
<td align="center" colspan="4">Data 1</td>
</tr>
<tr>
<td align="center" colspan="4">Data 2</td>
</tr>
</table>
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 2</b></td>
</tr>
<tr>
<td align="center" colspan="4">Data 1</td>
</tr>
</table>
</div>
<input type="submit" class="button button1" name="submitButton" value="Button 1">
<input type="submit" class="button button1" name="submitButton" value="Button 2">
<input type="submit" class="button button1" name="submitButton" value="Button 3">
<input type="submit" class="button button1" name="submitButton" value="Button 4">
</div>
CSS
.TSS {
border: 1px solid #000000;
float: none;
font-family: Verdana,Geneva,sans-serif;
font-size: 10.6px;
font-style: normal;
padding: 10px;
text-decoration: none;
display: inline-block;
}
#centertbl {
text-align: center;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
Add this to your .TSS class:
vertical-align: top;
I have added it to your code below; try running it:
.TSS {
border: 1px solid #000000;
float: none;
font-family: Verdana,Geneva,sans-serif;
font-size: 10.6px;
font-style: normal;
padding: 10px;
text-decoration: none;
display: inline-block;
vertical-align: top;
}
#centertbl {
text-align: center;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
<div id="lse" class="display">
<div id="centertbl">
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 1</b></td>
</tr>
<tr>
<td align="center" colspan="4">Data 1</td>
</tr>
<tr>
<td align="center" colspan="4">Data 2</td>
</tr>
</table>
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 2</b></td>
</tr>
<tr>
<td align="center" colspan="4">Data 1</td>
</tr>
</table>
</div>
<input type="submit" class="button button1" name="submitButton" value="Button 1">
<input type="submit" class="button button1" name="submitButton" value="Button 2">
<input type="submit" class="button button1" name="submitButton" value="Button 3">
<input type="submit" class="button button1" name="submitButton" value="Button 4">
</div>
The issue is that for some reason when in IE 9 (non-compatibility mode) one of the tds cause a goofy alignment. In this fiddle http://jsfiddle.net/2x3k3y5e/1/ the leftside button is fine it is the first of the right side buttons. For some reason it will not set on the right side. This is a part of user control (button bar) that will create various buttons for a page. ONLY in IE 9 have we noticed this issue. I would like to fix it everywhere and was hoping to use some css for this.
<table style="margin-top:10px;" cellspacing="0" cellPadding="0">
<tbody>
<tr>
<td noWrap="nowrap"> </td>
<td style="width: 100%;">
<input style="width: 125px;" id="BottomButtonBar_btnDelete" class="btnEntry" name="m$c$PatientSearchUC$PanelSearch$PanelSearch_BBB$BottomButtonBar_btnDelete" value="Previous Criteria" type="button"/>
</td>
<td style="padding-left: 4px;">
<input style="font-weight: normal; " id="BottomButtonBar_btnUpdate" class="btnEntry" value="Clear" type="button"/>
</td>
<td style="padding-left: 4px;">
<input style="width: 65px; font-weight: bold;" id="BottomButtonBar_btnUpdateAndReturn" class="btnPrimary btnEntry" value="Search" type="submit"/>
</td>
</tr>
</tbody>
</table>
CSS:
.btnEntry, .btnNav, .btnPrimary, .btnDefault{
text-transform: none;
cursor: pointer;
padding-right: 0;
padding: 6px 12px;
margin-left:0;
margin-right:0;
color: #000000;
min-width:60px;
}
.btnNav {
background-color: #fff;
border: #ccc 1px solid;
}
.btnEntry {
background-color: #ccc;
/*border: #b2b2b2 1px solid;*/
border: #ababab 1px solid;
color: #404040;
min-width:60px;
}
.btnDefault {
background-color: #ccc;
border: #ababab 1px solid;
color: #404040;
}
.btnPrimary {
color: #ffffff;
background-color: #82a83d;
}
If I set the size it is fine, but I don't think that using jquery to reset the size of a button to it's same size is a good solution. Again I am hoping there is some css trick that I don't know about to fix this. Thanks.
Side Note: I use IETester or a VM with Windows and IE 9
Try Float:right:
HTML:
<table style="margin-top:10px;" cellspacing="0" cellPadding="0">
<tbody>
<tr>
<td noWrap="nowrap"> </td>
<td style="width: 100%;">
<input style="width: 125px;" id="BottomButtonBar_btnDelete" class="btnEntry" name="m$c$PatientSearchUC$PanelSearch$PanelSearch_BBB$BottomButtonBar_btnDelete" value="Previous Criteria" type="button"/>
</td>
<td style="padding-left: 4px;">
<input style="font-weight: normal; " id="BottomButtonBar_btnUpdate" class="btnEntry btnClear" value="Clear" type="button"/>
</td>
<td style="padding-left: 4px;">
<input style="width: 65px; font-weight: bold;" id="BottomButtonBar_btnUpdateAndReturn" class="btnPrimary btnEntry" value="Search" type="submit"/>
</td>
</tr>
</tbody>
</table>
CSS:
.btnEntry, .btnNav, .btnPrimary, .btnDefault{
text-transform: none;
cursor: pointer;
padding-right: 0;
padding: 6px 12px;
margin-left:0;
margin-right:0;
color: #000000;
min-width:60px;
}
.btnClear{
float:right;
}
.btnNav {
background-color: #fff;
border: #ccc 1px solid;
}
.btnEntry {
background-color: #ccc;
/*border: #b2b2b2 1px solid;*/
border: #ababab 1px solid;
color: #404040;
min-width:60px;
}
.btnDefault {
background-color: #ccc;
border: #ababab 1px solid;
color: #404040;
}
.btnPrimary {
color: #ffffff;
background-color: #82a83d;
}
I have a table and i want 2 tds centered like
** Hello | World ** without adding empty tds before and after ?
I have something like this which works fine but i dont want to add extra tds and do it the same way
<table class="alignCenter" style="border:1px solid black">
<tr>
<td>
</td>
<td class="searchField">
<select id ="exactField">
<option value="default">Request num</option>
</select>
<input type="text" class="textBox" id="exactValue"/>
</td>
<td class="tableButtons">
<button type="button" class="clear" ><bdi>${Clear_Button}</bdi></button>
<button type="button" class="submit" ><bdi>${Search_Button}</bdi></button>
</td>
<td>
</td>
</tr>
</table>
CSS
table,.alignCenter {
width: 1000px;
margin: 0px auto;
text-align: left;
table-layout: fixed;
font-size: 0.9em;
}
table tr td,.alignCenter tr td {
overflow: hidden;
border: 1px solid black;
vertical-align: top;
padding: 5px 2px 5px 2px;
}
.alignCenter tr td {
text-align : center;
}
.tableButtons {
width:250px;
}
.searchField {
width:300px;
}
Fiddle
Why you even need 4 td's to accomplish something like that?
Just use a single td (I would use a simple div for this)
Demo
<table class="alignCenter" style="border:1px solid black">
<tr>
<td>
<select id ="exactField">
<option value="default">Request num</option>
</select>
<input type="text" class="textBox" id="exactValue"/>
<button type="button" class="clear" ><bdi>${Clear_Button}</bdi></button>
<button type="button" class="submit" ><bdi>${Search_Button}</bdi></button>
</td>
</tr>
</table>
would something like this work?
html..
<table style="border:1px solid black">
<tr>
<td class="alignright" >
<select id ="exactField">
<option value="default">Request num</option>
</select>
<input type="text" class="textBox" id="exactValue"/></td>
<td class="alignleft" >
<button type="button" class="clear" ><bdi>${Clear_Button}</bdi></button>
<button type="button" class="submit" ><bdi>${Search_Button}</bdi></button>
</td>
</tr>
</table>
css..
table,.alignright {
width: auto;
margin: 0px auto;
text-align: right;
table-layout: fixed;
font-size: 0.9em;
}
table,.alignleft {
width: auto;
margin: 0px auto;
text-align: left;
table-layout: fixed;
font-size: 0.9em;
}
.tableButtons {
width:250px;
}
.searchField {
width:300px;
}
FIDDLE