I want a image to fill up the table cell completely. with css i've set the padding to zero but it does not help. Anybody has any thoughts on this?
Greetz Job
.HTML
<div id="vakjes">
<table id="tabel" border="1">
<tr>
<td><img class="" src="images/jack.png"></td>
<td><img class="" src="images/jack.png"></td>
</tr>
<tr>
<td><img class="" src="images/jack.png"></td>
<td><img class="" src="images/jack.png"></td>
</tr>
</table>
</div>
CSS
table, tr, td {
border: 1px solid #FF7300;
padding: 0px;
vertical-align: bottom;
}
#tabel {
width: 345px;
height: 345px;
}
Here is a screenshot of my table
http://i62.tinypic.com/1584fnb.png
Try setting the height and width of your image:
here's a demo where i've set:
img{
width:100%;
height:100%
}
Alernatively, if you didn't want all images to be set, you could create it as:
.myStyle{
width:100%;
height:100%;
}
and then for your images add the class 'myStyle'.
Is it because you are setting the width and height of the table in CSS #tabel? Maybe the image is slightly smaller than the expected table size. Try it without the #tabel CSS.
Related
I have an image gallery set up where the pictures are partially shown in each cell (as a preview) as the cell background. When the mouse moves over the cell, the cell expands to the size of the full picture. I was wondering if there was a way to automatically resize the cell to the image dimensions instead of manually imputing the full dimensions as the height and width of the cell on mouse over. I've already tried replacing height='200px' to height=auto or height=100% but neither seem to work.
Here's an example of the code:
<table cellpadding="0" border="0">
<tr>
<td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat"
class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/1.jpg"></td>
<td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat"
class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/2.jpg"></td>
<td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat"
class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/3.jpg"></td>
</tr>
</table>
You may want to take a look or a try at transform :scale(); (no bumping effects)
table {
table-layout:fixed;
margin:auto;
width:550px;
}
td {
width:275px;
height:200px;
background:url(http://dummyimage.com/400x268) center no-repeat;
transition:0.25s;
box-shadow:inset 0 0 0 2px;
}
td:hover {
background-size: 100% 100%;
transform:scale(1.4545,1.34);
transform-origin:center;
}
body {
text-align:center;
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<img src="http://dummyimage.com/400x268" />
The onmouseover and onmouseleave attributes should contain script, not style. If you want to use styles to do the job, create css styles fx and fx:hover, and move all styling from tag attributes into the class.
<style>
.fx {
border: 0;
background-repeat:no-repeat;
background-position: center;
width: 125px;
height: 125px;
}
.fx:hover {
width: 250px;
height: 250px;
}
</style>
If you don't want to hardcode image sizes and if you don't want to see whole row and column expanded on hover, you need to dig into javascript and other thin matters with layers of divs.
Interesting effect: (I would use images larger than the sizes used in the css)
<html>
<head>
<title>Css and Html Test</title>
<style>
table tr td {
width: 275px;
height: 200px;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
}
table tr td:hover {
width: 400px;
height: 268px;
background-size: contain;
}
</style>
</head>
<body>
<table cellpadding="0" border="0">
<tr>
<td class="fx" background="image1.jpg"></td>
<td class="fx" background="image2.jpg"></td>
<td class="fx" background="image3.jpg"></td>
</tr>
</table>
</body>
</html>
You may want to consider using javascript to do this.
If so you can change the onmouseover and onmouseleave events to...
onmouseover="function1(this);" and onmouseleave="function2(this);"
then in javascript use this to change the width and height properties of the elements...
function1(elem)
{
var elementID = elem.id;
document.getElementById(elementID).style.width = '400px';
document.getElementById(elementID).style.height = '268px';
}
function2(elem)
{
var elementID = elem.id;
document.getElementById(elementID).style.width = '275px';
document.getElementById(elementID).style.height = '200px';
}
Note that you will have to give each of the td elements an unique id.
So with the ids and functions your html tds would look like this...
<td id="cell1" width="275px" height="200px" onmouseover="function1(this);" style="background-repeat: no-repeat;"
class="fx" onmouseleave="function2(this);" align="center" background="images/kitchen/1.jpg"></td>
To get the id of the element in javascript you can use...
var elementID = elem.id;
I hope this helps, let me know if you have any questions.
I have done plenty of searching both on stackoverflow and other sites and haven't found a single solution that has worked for me yet. I have attached a screenshot of the webpage to see the problem more clearly. If anyone has any tips or tricks that have not already been tried in my code then please let me know! I have tried all the ideas from former VERY similar posts but for some reason none of them are working for me. Thanks in advance.
HTML:
<table>
<tr>
<td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
</tr>
<tr>
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-spacing: 0px;
}
td {
border: none;
margin: 0;
padding: 0;
line-height: 0;
display: block;
font-size: 0;
img {
vertical-align: top;
border: none;
margin: 0;
padding: 0;
font-size:0;
display: block;
}
You have defined the with of your .png images to be 568.5 pixels, which means the table width will be about 1704 px wide, which is probably wider than the width of your page template.
You want the images to scale to fit the width of the table cells.
you can do this setting a width to the td (33%) and then letting the images scale to a width of 100%.
Note: I built a flexible/responsive layout, which I think might be what you need.
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: 1px solid blue;
}
td {
border: none;
padding: 0;
width: 33%;
}
img {
display: block;
width: 100%;
}
tr.labels td {
background-color: beige; /* for demo only */
text-align: center;
padding: 20px 0;
}
tr.images td {
padding: 5px; /* for demo if so needed */
}
<table>
<tr class="images">
<td>
<img border="0" alt="java" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="python" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="htmlcss" src="http://placehold.it/568x296">
</td>
</tr>
<tr class="labels">
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
The padding is already set to 0 in your CSS and table cells are unaffected by margins, so this is not the issue. Table cells expand to the size of their content. Your images are each 568.5px x 296.5px. To get rid of this extra space, decrease the size of your images in the markup, or crop them in your image editor of choice.
CSS:
td, table {
border:
1px solid black
}
.space {
padding:0px;
border-spacing:1px;
}
HTML:
<table style="width:800px" class="space">
<tr>
<td><p>A</p></td>
<td><p>B</p></td>
<td><p>C</p></td>
</tr>
<tr>
<td><p>D</p></td>
<td><p>E</p></td>
<td><p>F</p></td>
</tr>
<tr>
<td><p>G</p></td>
<td><p>H</p></td>
<td><p>I</p></td>
</tr>
<tr>
<td><p>J</p></td>
<td><p>K</p></td>
<td><p>L</p></td>
</tr>
</table>
I can't make the table height smaller. I want the rows to be about half as small.
Suggestions?
(This is the code to the original table, without any alteration trying to make it lower in height as I want it)
The p tag has a margin. So that causes the height issue. Add the following code to your css file to get rid of that margin:
p {
margin: 0;
}
add this to your css:
.p{
height: 0.7em;
}
As #Wezelkrozum says, p has a default height.
Alternatively, you could try using div & br instead of p
I have made a simple html page with an image on it to display as a header. The problem is that the image is not repeating.
When I set the width to 100% the td (side) disappears.
If I remove width from basestrip, then it only covers half of the screen area. I want to cover all of the screen with the image with the specified height.
<table cellpadding="0" cellspacing="0">
<tr>
<td id="side" width="10px" height="25px"></td>
<td></td>
<td id="basestrip" width="100%" height="25px">
</td>
</tr>
</table>
This is the css:
#side {
background-color: #014160;
}
#basestrip {
background-image: url('../Images/topstripbg.png');
background-repeat: repeat-x;
}
Try adding a width="100%" (or better a style="width: 100%" or even better with applying a CSS style of width: 100%) to your table. With your code, the cell takes 100% of the table. But the table takes by default the size of the content of all the cells.
First off, the element has no height property, that can be applied to the . Also you can not append the 'px' to a height or width attribute for an html tag, this only applies to CSS. I assume this table should be the width of the browser window, and 25 pixels high, 1 row with 3 cells, the first being 10px wide, the second you have not specified and the last you have 100%. Here is my cross browser approach:
<html>
<head>
<style type="text/css">
#thetable { width:100%; height:25px; }
#thetable>tr { height: 25px }
#thetable>tr>td#side { width: 10px }
#thetable>tr>td#basestrip { background: url('../Images/topstripbg.png') repeat-x; }
</style>
</head>
<body>
<table id="thetable" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="side" width="10"></td>
<td width="auto"></td>
<td id="basestrip" width="100%"></td>
</tr>
</table>
</body>
</html>
take that property like this
#basestrip { background: url('../Images/topstripbg.png') repeat-x; }
I have the following simple table to reproduce the issue:
<TABLE>
<TR>
<TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
<IMG
style="width: 24px; height: 68px; margin:0px; padding:0px; border:none"
src="Image24x68.png">
</TD>
</TR>
</TABLE>
The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.
I want the cell to be exactly as large as the image.
The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.
Is there any solution / workaround for this?
You can set the images to display as block elements and this should remove the space.
<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">
Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/
Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.
I tried all the other solutions on this page:
using display:block
removing whitespace in the <td> tags (i.e. I used <tr> and <td> tags without putting any whitespace between them)
using
padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;
Except for approach (1), these didn't work on IE. After tearing my hair out for three hours, I found this better solution: add a hspace=0 attribute to the image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
class="ImageHeader" hspace="0">
I set up an example of this at http://www.PrintersRose.com.
Try the following:
<table>
<tr>
<td style="border: 1px solid black; font-size: 1pt;">
<img style="width: 24px; height: 68px; margin: 0;
padding: 0; border: 0" src="Image24x68.png" />
</td>
</tr>
</table>
(PS Use lower case for HTML tags.)