I have a table which has a background image(sprite). The td of the table functions as a link relative to the position of the sprite image. I have it like this:
CSS:
table.populair {
background-image:url(populair.png);
background-position:27px 27px;
background-repeat:no-repeat;
}
table td {
border:solid 1px #ccc;
border-radius:4px;
cursor:pointer;
}
td a{
display:block;
width: 105%;
height: 105%;
margin-left: -3px;
margin-top: -2px;
z-index:15;
}
HTML:
<table class="populair" border="0" bordercolor="#FFCC00" width="647" height="322" cellpadding="0" cellspacing="27">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="none">
</td>
</tr>
</table>
It works in Chrome (the links are clickable) but not in Firefox and IE8. The weird this is that if I change the td a from percentage to pixels it seems to work, but that ruins my sprite position...So what can I do to make the links work?
You have to assign the width and height of the parent element(td) to use % for child item.
table.populair {
background-image:url(populair.png);
background-position:27px 27px;
background-repeat:no-repeat;
}
table tr td {
border:solid 1px #ccc;
border-radius:4px;
display:table-cell;
width: 10%;
height: 100%;
}
table tr td a{
display:block;
width: 100%;
height: 100%;
margin-left: -3px;
margin-top: -2px;
z-index:15;
}
DEMO.
Related
I'm unable to place the image in such a manner as shown in the attached photo in my HTML table cell.
I tried creating a div for the image inside the cell but that doesn't work for me it has to be on the edge and floating above the yellow colored cell.
Also i tried using span for it:
<table class="tg" width='100%' height='90%'>
<tr>
<td class="example" style="border-right-color: black;border-right-width: thin;">
<span>/*image placed here*/</span>
<span class="name">Example</span>
</td>
</tr>
</table>
Desired output :
Try this example
.left-img{
width:50px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
.example{
border-right-color:black;
border-right-width: thin;
position:relative;
}
.img-div{
width:50px;
display:inline-block;
background-color: white;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
padding-right:10px;
}
.name{
text-align:center;
width: 20%;
position: absolute;
background-color: yellow;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
left: 50px;
z-index: -1;
height: 100%;
padding-left: 20px;
top: 0;
vertical-align: middle;
line-height: 50px;
}
<table class="tg" width='100%' height='90%'>
<tr >
<td class="example"><div class="img-div"> <img class="left-img" src="https://dsonqtq9c1uhr.cloudfront.net/images/global/890/175/cinturato-p7-all-season-plus-technology-1505470082465.png"/> </div><div class="name" > example
</div>
</td>
</tr>
</table>
My CodePen Example
I'm trying to make a 2x5 table with a large image taking up the left most five cells and 5 links taking up the rightmost ones. I am having trouble fitting the table to the image.
I'd like the table to be a single rectangle in the end but currently the table is bigger than the image inside of it. Also, is there any way to do this just using CSS (no JS)?
Thank you in advance.
Here is jsfiddle: https://jsfiddle.net/3ktLpcmx/2/
and code:
HTML:
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td rowspan="5"><img style="display: block;" src="http://wallpapercave.com/wp/ckdySrm.png" width="500" /></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
</tr>
<tr>
<td class="linktd">mmmmmmm hm mmmmm</td>
</tr>
<tr>
<td class="linktd">Hmmm, mmmhmmmm</td>
</tr>
</table>
CSS:
body {
text-align: center;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
EDIT:
Things I have tried include removing the padding on the links, setting table height to auto (then links don't fill their cells), setting table to 375px (size of image), setting table to 376px, and setting the link-tds to 20% of table.
I do not think a table is needed here. nav could do for a menu .
display:flex will help size, align, grow and center things.
nav,
nav span,
nav span a {
display: flex;
}
nav span {
flex-flow: column;
}
a {
flex: 1;
width: 165px;
justify-content: center;
align-items: center;
background-color: #58809d;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
background-color: #282969;
}
nav img {
display: block;
}
<nav>
<img src="http://wallpapercave.com/wp/ckdySrm.png" width="500" />
<span>
Mmmmmhmmm
hmmmhhhhhmmm
MMMM MMMM!
mmmmmmm hm mmmmm
Hmmm, mmmhmmmm
</span>
</nav>
J.Joe, Your answer works well and is clever. Thank you.
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td class = "test" rowspan="5"></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
and
body {
text-align: center;
}
.test{
background-color: #cccccc;
background-image:url('http://wallpapercave.com/wp/ckdySrm.png');
background-size:cover;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
There's a table where an image and a link are placed on each row. I want to make the link placed in the middle of the table cell, and in addition, the link text should be shortened to meet the container size.
Here's my HTML:
<div>
<table >
<tr>
<td>
<img src="http://placehold.it/40x40" alt="">
<a href="">FreeBSD-10.1-RELEASE-amd64-disc1.iso
</a>
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/40x40" alt="">
goagent-goagent-db0b5c0.tar.gz
</td>
</tr>
</table>
</div>
And the css is as follows:
div {
border-style: solid;
border-color: #ff0000;
width: 200px;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-style: solid;
border-color: #000000;
}
table a {
text-decoration:none;
vertical-align: 50%;
margin-left: 10px;
}
However, the rendering result is not what I expect:
My ideal result is like this, say, the ellipsis should be on the same line with link text:
So how to solve this issue? Thanks.
try this
table a{
text-decoration:none;
/*vertical-align: 50%;*/
margin-left: 10px;
}
table img{
vertical-align: middle;
}
http://jsfiddle.net/mk9n1mcu/
My layout so far for the site is as follows:
HTML
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
some more stuff here
</tbody>
</table>
CSS
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
div.tabArea {
font-weight:bold;
padding:0px;
position:relative;
text-align:center;
}
I would align the tabArea div to that it is flush on the left with the centered table. I am using text-align to center. However, the centers the div on the whole page. Moreover, if I align to the left, then it will go all the way to the left. How do I achieve this?
You'll want to use the <tr> and <td> tag when working with <tbody>, otherwise it "throws" the text out of table. For the tabArea to align correctly (to the outer left corner of the table), you'll've to put all of the content in a container. Try this:
<div id="container">
<div class="tabArea"> some more code</div>
<table class="tablesorter">
<tbody>
<tr>
<td>some more stuff here</td>
</tr>
</tbody>
</table>
</div>
.tablesorter {
font-family:sans-serif;
border-radius: 10px;
padding: 0 10px 0 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
#container { margin: 0 auto; width: 750px;}
.tabArea { font-weight:bold; text-align: left;}
Hope this helps.
Here is the solution:
http://jsfiddle.net/pgxh6r31/
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
<tr>
<td>
some more stuff here
</td>
</tr>
</tbody>
</table>
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
div.tabArea {
width: 750px;
font-weight:bold;
padding:0px;
position:relative;
margin: auto;
border: 1px solid black;
}
table td {
border : 1px solid black;
}
I'm building in HTML three asymmetric tables like this:
<table id="d1">
<tr>
<th colspan="2">ATIS-GESTEL</th>
</tr>
<tr>
<td class="label">Petición:</td>
<td class="value">171601792</td>
</tr>
</table>
<table id="d2">
<tr>
<th colspan="2">FACILITADOR-SAC</th>
</tr>
<tr>
<td class="label">OT:</td>
<td class="value">171601792</td>
</tr>
</table>
<table id="d3">
<tr>
<th colspan="2">SAC</th>
</tr>
<tr>
<td class="label">Ticket:</td>
<td class="value"></td>
</tr>
</table>
I have to style some of the properties with CSS, including giving <td>'s with the class "value" a yellow background color. Well, the background color does change, but there's a little space there, like a border. It doesn't fill completely. Just in case, here's the CSS:
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#666666;
text-align:left;
}
td {
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#container {
width: 800px;
height: 600px;
border:1px solid #333333;
}
#header {
padding-left: 7px;
}
#d1 {
float: left;
margin-left: 15px;
margin-right: 15px;
border: 1px solid #333333;
}
#d1 tr td.value{
width: 100px;
height: 15px;
background-color: #FFFF66;
}
#d2 {
float: left;
margin-left: 15px;
margin-right: 15px;
border: 1px solid #333333;
width: 150px;
height: 40px;
}
#d2 tr td.value{
width: 100px;
Can someone tell me why it's that border appearing, and how to completely fill the cell?
Add border-collapse:collapse to the <table>'s styles.
Maybe the border spacing could be a problem too. Set it to zero.
table.mytable {
border-spacing: 0;
}