Trying To Align date next to the hyper link .Even though added align="right" it still shows in left
<tr>
<td>
<img src="images/page_white_acrobat_small.png" style="margin-right: 0.3rem;" align="absbottom" />
<a style="font-size: 12px" href = "" onclick="Popup.open({url:'PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN <label tal:content="string: ${pertiDate}" style="margin-right: 0.3rem;" align="right" >
</label>
</a>
</td>
</tr>
Add a class to your CSS called pull-right..
.pull-right {
float: right;
}
...and then add that class to your element.
class="pull-right"
Try changing your style tag to style="margin-right: 0.3rem; display:block; float: right;"
Related
I'm running into a problem in my HTML code. I am trying to display a button when you hover over a row in a table. Right now the button only displays when you hover near it but I need it to show when you hover over anywhere on that row. Can anyone help explain how to do this?
.button {
opacity: 0;
}
.button:hover {
display: inline-block;
opacity: 1;
}
<table>
<tr>
<div class="button">
</div>
<td><img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<img src="/app/images/master/actions_btn.svg" />
</div>
</td>
</tr>
</table>
Right now, a button will only show when you over it directly. In order to show a button when its table row is hovered, set your CSS definition to target buttons that are inside of hovered rows:
tr:hover .button { ... }
Also:
<div> elements that are inside <tr> but not <td> are invalid, per the permitted content of <tr> elements. I have removed them, but you could wrap them in <td> elements if you need them.
I took the liberty of putting the .button images inside their <a> elements, although I'm not sure that's what you intended.
I noticed that the hover effect doesn't work over spaces between cells, which causes gaps in the hover area. So I set border-collapse:collapse; and padding the cells individually.
table {
border-collapse: collapse;
}
td {
padding: 5px;
}
.button {
opacity: 0;
}
tr:hover .button {
opacity: 1;
}
<table>
<tr>
<td><img src="//lorempixel.com/20/20/abstract/1/" width="20" height="20" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<a href="#">
<img src="//lorempixel.com/20/20/abstract/1/" width="20" height="20" />
</a>
</div>
</td>
</tr>
<tr>
<td><img src="//lorempixel.com/20/20/abstract/2/" width="20" height="20" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<a href="#">
<img src="//lorempixel.com/20/20/abstract/2/" width="20" height="20" />
</a>
</div>
</td>
</tr>
</table>
It's my understanding that from explanation
I am trying to display a button
that initially it is hidden? If so, just trigger hover over a button with jQuery.
So, lets say wee add ID to : <tr id="myrow"> and in <div class="button"> we also add ID: <div class="button" id="mybtn">
Then in jQuery we have:
$("#myrow").mouseover(function() {
$("#mybtn").show() // if it was hidden show it
$("#mybtn").trigger("mouseover"); // trigger as if mybtn was mouseovered
});
Here's the code I'm working with. I have it all in one <th> tag for aesthetic reasons; I tried making the img it's own <th> and then making everything else <th colspan=3>, but if I do that not everything is centered together nicely. If I just don't align the img, it centers above h1, but that makes the height of the th too large for the page I'm working on.
Any help is appreciated!
<tr>
<th colspan=4>
<img src="image1.png" align="left" />
<h1>Cumulative Lifetime Giving</h1>
<h2>Giving Levels</h2>
<small><em>* Denotes deceased</em></small>
</th>
</tr>
If I run what I have here, this is what I get:
Hopefully you can see what I mean now-- I want the image to be directly to the left of the text so that it all centers together nicely above those four columns.
Here's what I want it to look like (I just used Photoshop to move it - this is what I'm trying to figure out how to code):
Try not to use table to align content on a page.
I aligned it using divs :
<div style="text-align:center;">
<div style="display:inline-block;">
<img src="https://www.deltasigmapi.org/images/default-source/foundation-images/foundation-seal360cf5b665726cb08b9eff0000713b9c.png" width="100px" height="100px" />
</div>
<div style="display:inline-block;"><h1>Cumulative Lifetime Giving</h1>
<h2>Giving Levels</h2>
<small><em>* Denotes deceased</em></small></div>
</div>
here you are
.th {
text-align: center;
}
.center-wrapper {
display: inline-block;
}
.center-text {
display: block;
overflow: hidden;
padding-left: 20px;
}
.img {
float: left;
border-radius: 150px;
}
<table width="100%">
<tr>
<th class="th">
<span class="center-wrapper">
<img class="img" src="https://unsplash.it/100/100"/>
<span class="center-text">
<h1>Cumulative Lifetime Giving</h1>
<h2>Giving Levels</h2>
<small><em>* Denotes deceased</em></small>
<span>
</span>
</th>
</tr>
</table>
It is very simple. Just do this :-
<table align="center">
<tr>
<th colspan=4>
<img src="http://2.media.dorkly.cvcdn.com/10/57/e10409b03f73dfae594e0207caa4b681.jpg" width="170" height="170" align="left" style="padding-right: 20px"/>
<h1>Cumulative Lifetime Giving</h1>
<h2>Giving Levels</h2>
<small align="center"><em>* Denotes deceased</em></small>
</th>
</tr>
</table>
I have this JSFiddle: Click here
<table class="findus-main-table">
<tr>
<td>
<img class="static-map" onClick="swap();" id="static-map-id" />
</td>
<td style="text-align: center; vertical-align:bottom; position: relative;">
<span style="font-size: 22px; font-weight: bold;">The address I want here</span>
<!-- the inner table for location and distance and phone number -->
<table style="text-align:left;" cellspacing="10">
<tr>
<td style="vertical-align:top">
<div>
<div>Phone: (613)-123-1234</div>
<div>Distance: 0.123km</div>
</div>
</td>
<td>
<div><b>Store Hours</b>
</div>
<div>Mon - Fri: 8am - 2am</div>
<div>Sat & Sun: 10am - 12am</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
What I want is to position the address to the top while the phone number and hours stays at the bottom. I tried using absolute but it wraps the text of the address which i really dont want.
How can I do it?
besides the fact that you shouldn't be using inline styling, is this what you're looking for?
<span style="font-size: 22px; font-weight: bold;position: absolute;top: 0;left: 0;right: 0;">
FIDDLE
instead of using position:absolute witch should be the last thing anyone should try ,I use vertical-align:top
here is a fiddle.and here is my css :
.address{
text-align:center;
font-size:22px;
text-align: center;
font-size: 22px;
height: 78px;
padding: 0;
vertical-align: top;
}
I have the following code:
<table>
<tr>
<td> </td>
<td>
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</td>
</tr>
</table>
I would like the OK and Cancel buttons to be right aligned. How can I accomplish that? I setup a plunker to demonstrate the problem.
You can use float:
#btnOK, #btnCancel {
width: 90px;
float:right;
}
Check This
You can also change the order in HTML to get first the OK button:
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnCancel">Cancel</a>
<a id="btnOK">OK</a>
</td>
Check This
For this exact scenario, I would do something like this.
HTML
<tr>
<td></td>
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<div class="align-right">
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</div>
</td>
</tr>
CSS
<style>
.align-right{
float: right;
}
</style>
The reason I've wrapped the buttons into a div is when you want to give some pagging or margin from sides or top/down, you will do it easily just by styling the div, so your controls move together.
I am working on my website, http://www.isaveplus.com and I am having an issue of the table adding some space between each col (td) in it. My goal is to have the columns touching because I want the background color to blend in with each other. The picture below will show you what I meant by the space between them.
Thanks in advance!
<table style="width:inherit; margin-left:-5px; margin-top:-5px; " cellspacing="0">
<tr>
<td class="searchBar" align="left" >
<div id="ddtopmenubar" class="mattblackmenu" >
<ul>
<li><a style="vertical-align:bottom;">Best of Coupons</a></li>
<li>
<a style="vertical-align:bottom;"> Best of Travel</a>
<a style="vertical-align:bottom;">Grocery stores</a>
</li>
<li><a style="vertical-align:bottom;">Office Supplies</a></li>
<li><a style="vertical-align:bottom;"> Department <br /> stores </a></li>
<li><a style="vertical-align:bottom;">Drug <br /> stores</a></li>
</ul>
</div>
</td>
<td class="searchBar" align="left">
<asp:Button ID="whatIsIsavePlusButton" runat="server" onclick="whatIsIsavePlusButton_Click" style="color: #800000; font-weight: 700" Text="?" Visible="False" />
</td>
<td class="searchBar" align="left">social media right here!</td>
</tr>
</table>
And the css for searchbar is:
.searchBar
{
background-color: #414141;
color:White;
width:auto;
margin:-5px;
padding:0px;
}
Your links
<a style="vertical-align:bottom;">Best of Travel<a style="vertical-align:bottom;">Grocery stores</a>
have a
border-right: 1px solid white
defined in
.mattblackmenu li a
there you can set the width of these white spaces
Your code isn't displaying the same in my browser as in the picture you give. But essentially I think you either want to put a negative margin-right on the div ddtopmenubar or a border-left:1px solid white on the following td. There might be another way to do it but I think that'd work.
Have you tried the border-collapse property? http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
border-collapse: collapse;