I want that the :hover in CSS will work on the whole row in the table at once (if the mouse will be over the image, so the hover will work on both text and pic - same as if the mouse is over the text), but it only work with specific object (if the mouse is over the text the hover catch only the text without the pic)
.linkFooter {
opacity: 80%;
color: white;
vertical-align: top;
}
.linkFooter:hover {
opacity: 100%;
}
.linkFooter:link {
text-decoration: none;
}
.iconContentFooter {
width: 25px;
height: 25px;
padding-bottom: 10px;
}
<table>
<tr class="linkFooter">
<td>
<a href="tel:+972503303397">
<img src="pics/phone.png" class="iconContentFooter">
</a>
</td>
<td>
<a href="tel:+972*********" class="linkFooter">
<b>
טלפון:
</b> ***-***-****
</a>
</td>
</tr>
<tr class="linkFooter">
<td>
<a href="mailto:****#gmail.com">
<img src="pics/mail.png" class="iconContentFooter">
</a>
</td>
<td>
<a href="mailto:lahavadam#gmail.com" class="linkFooter">
<b>
אימייל:
</b> ****#gmail.com
</a>
</td>
</tr>
</table>
OP Comment:
that the hover works only about the specific object (text/pic) and not the whole row
So for that you need to change the hover from parent to child
Note: remove the class from a because its the same class of tr and it will conflict the styles
.linkFooter td {
vertical-align: top;
}
.linkFooter a {
text-decoration: none;
opacity: 40%;
color: red;
}
.linkFooter a:hover {
opacity: 100%;
}
.iconContentFooter {
width: 25px;
height: 25px;
padding-bottom: 10px;
}
<table>
<tr class="linkFooter">
<td>
<a href="tel:+972503303397">
<img src="https://picsum.photos/200/300" class="iconContentFooter">
</a>
</td>
<td>
<a href="tel:+972*********">
<b>
טלפון:
</b> ***-***-****
</a>
</td>
</tr>
<tr class="linkFooter">
<td>
<a href="mailto:****#gmail.com">
<img src="https://picsum.photos/200/300" class="iconContentFooter">
</a>
</td>
<td>
<a href="mailto:lahavadam#gmail.com">
<b>
אימייל:
</b> ****#gmail.com
</a>
</td>
</tr>
</table>
Related
I am trying to make a table with drop-down info tabs that appear when you scroll over a term.
My initial approach was to make these info tabs not display with display : none css rule, then
when the user hovers the mouse over the corresponding text, the the info tab appears by altering display property to display: block.
My problem is that I can't figure out how to override the default behavior for the containing/parent element, and the table resizes to fit the newly appeared element, then resizes back to normal when the user scrolls away. I experimented with z-index (setting the td to z-index: 1 and info tab to z-index:2) as well as visibility:hidden -> visibility:visible vs display:none -> display:block, but no luck with either of those. I also tried setting the max height of the td element to 200px, but it seems to grow past that regardless.
Here is the source code for what i have so far:
/* In an attempt to prevent row from expanding automatically */
td {
max-height: 100px;
}
.card-body {
display: none;
border: 2px solid black;
height: 300px;
width: 400px;
z-index: 2;
}
.card-trigger:hover+.card-body {
display: inline-block;
position: relative;
top: 0px;
right: 15px;
}
.card-body:hover {
display: block;
}
.card-body .game-info {
display: none;
}
.card-body .dd-trigger:hover+.game-info {
display: block;
}
<h3>Ratings by som bol</h3>
<p>sort by release date (asc/desc), rating amout, game category, game creator, game console</p>
<input type="text" placeholder="filter by game title, categories, creators, consoles, console makers">
<div>Search hints</div>
<table class="table">
<thead>
<tr>
<th>Game title</th>
<th>your rating</th>
<th>Average rating</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
<!-- row 3 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
</tbody>
</table>
In order to prevent parents from resizing to fit the contained element, you must do three things:
Set parent position to relative
Set child position to absolute (and position in appropriate place using top, bottom, left, right)
Set child element z-index higher than that of parent. We do this to prevent any parent styles from overlapping with child styles. It essentially makes the child element look like it is sitting on top of the parent element.
the html is a trivial example of a table with one row. the css hides the contained child div by default, and sets the display to block when hovering, in addition to default styles and the positioning/z-index mentioned above
table, th, td {
border: 1px solid black;
}
.pop-up {
display: none
}
td {
position: relative;
}
td:hover > .pop-up {
display: block;
}
.pop-up {
width: 500px;
height: 100px;
background: red;
border: 1px solid black;
position: absolute;
left: 50px;
z-index: 1;
}
click here to see full example
I'm stuck with a problem. I need to print the page with the logo but the problem is that the logo is shown in the browser but in the print preview (CTRL P) the logo is not displayed.
For any guidance I would be very thankful.
This is the html code and css media print code
/* ## removed here since they are specific to ASP.NET MVC */
#media print {
#page {
size: A4 landscape;
max-height: 100%;
max-width: 100%;
position: fixed;
}
.prints {
height: 19.2cm;
page-break-after: avoid;
border: black 1px solid;
}
.row {
page-break-after: avoid;
}
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 30, 2018 */
label {
font: c
}
<table align="center" style="padding-left:10px;">
<tbody>
<tr>
<td colspan="3">
<h4 style="text-align:center;padding-left:25px; font-family:Calibri"><b> CHALLAN FORM </b></h4>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div>
<label style="padding-left:10px;width:145px;">
<span style="line-height:1; width: 135px; font-size:26px; font-family:'Chursaechsische Fraktur';"><strong>Baitul Huda</strong></span>
<span style="line-height:1;border:0px; width:100px; font-size:12px; font-family:'Adobe Devanagari';">High School For Girls</span>
</label>
</div>
</td>
<td rowspan="2" style="width:30px;padding-right:0px; padding-left: 10px;">
<img src="~/images/nku_02.png" height="70" width="70" alt="Bail ul huda logo" />
</td>
<td style="padding-left:10px;">
<div style="padding-left:5px;">
<label style="width:120px;padding-top:0px;padding-bottom:0px;">
<span style="line-height:0; width: 160px; font-size:26px; font-family:'UL Sajid Heading';">بیت الھدیٰ</span>
<span style="line-height:1; width:100px;padding-left:10px; font-size:16px; font-family:'Al Qalam Quran 2A';"> ھایئ سکول فارگرلز</span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
I Found the solution
Img is not coming in print view because there is a missing of a div
<td rowspan="2">
<div style="padding-left:10px;width:80px;height:50px">
<img src="/images/offical_Logo_Baitul_Huda.jpeg" class="img-responsive" style="height:50px ; width:100px" alt="">
</div>
</td>
As i add the div the logo start displayed in print view
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
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'm trying to create a table containing images in a gallery along with their names right below them. I'd like to center the images vertically in each column, and have the names aligned at the bottom of the <td>, but I can't seem to get it to work. This is my code so far:
table.gallery {
width:100%;
text-align: center;
table-layout: fixed;
}
table.gallery td {
padding: 10px 10px 10px 10px;
width:33%;
overflow: hidden;
}
table.gallery td img{
vertical-align: middle;
}
table.gallery td span.desc {
vertical-align: bottom;
}
And my Php code to display the table:
<table border="0" class="gallery"><tr>
<?php
$curtd = -1;
foreach ($img_arr as $item) {
$curtd++;
if ($curtd >= 3){
echo '</tr><tr>';
$curtd = 0;
}
echo '<td><center><img src="'.$item['thumb'].'" /></center>
<span class="desc">'.$item['title'].'</span></td>';
}
?>
</tr></table>
My images appear to center vertically with no problems, but the names still appear directly under the images, rather than at the bottom of the cell. How can I fix this?
EDIT: Here's the HTML generated by the Php code (removed URLs and stuff just for the sake of saving space):
<table border="0" class="gallery"><tr>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
</tr><tr>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
</tr></table>
Please try this:
Use two tr tags and in first - image - , next - name -