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; }
Related
I want that a table column uses the minimum of place but after a certain width, it should wrap.
Here is what I have:
<table id="#table">
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
<style>
#table{
width: 100%;
}
.min {
width: 1%;
white-space: nowrap;
}
</style>
This makes the column use only the place which it needs but it it ets too long, it will make the table endless longer and I want to set the maximum of the allowed space.
Edit:
I think that with js it would be possible to calculate the width and change the css but I would prefer a solution without javascript or jquery.
Edit 2: I forgot to mention that the table has a width of 100%. So if I follow the given answer, the table cell has its autowidth (which is too wide) and a max-width so if the text is short, the td has a white space which I do not want.
Edit 3: Here is an image which explains better than me.
#billTable{
width:100%;
}
#numberTd{
text-align: center;
width:18%;
}
#weightTd{
text-align: center;
width:20%;
}
#nameTd{
text-align: left;
width: 1%;
white-space: nowrap;
}
#kgPriceTd{
text-align: right;
width:20%;
}
#priceTd {
text-align: right;
}
<div style="width:550px;">
<table>
<tr>
<th id='numberTd'>Packetzahl</th>
<th id='weightTd'>Kg</th>
<th id='nameTd'>Artikel</th>
<th id='kgPriceTd'>CHF / Kg</th>
<th id='priceTd' colspan="2">Total</th>
</tr>
<tr>
<td id='numberTd'>1</td>
<td id='weightTd'>0.688</td>
<td id='nameTd' class='min'>Siedfleisch</td>
<td id='kgPriceTd'>44.00</td>
<td id='priceTd'>8.2</td>
</tr>
</table>
</div>
You can control max width of an element by using max-width
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
.min {
max-width: 200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
You can apply width in percentages for the flexible columns, space it out so it looks good or make your table not 100%
Use the CSS property "max-width". I've attached an example with a border that shows this in use.
table, td {
border:1px solid #555;
border-collapse:collapse;
}
.min {
max-width:200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
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 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.
My IFrame doesn't fill the cell in Explorer but does in Chrome. What gives? To fix in Explorer I have to hard code px the height and width. Any ideas why this is happening?
<style type="text/css">
.styleTbl
{
margin-bottom:10%;
margin-left:10%;
width:80%;
}
.styleBg
{
background: #00aced;
}
.style_logo
{
width:80%;
margin-left:10%;
}
.styleObj img
{
width: 100%;
}
iframe
{
background-color:#ffffff;
border-color:#eee9e9 ;
border-width:4px;
height: 99%;
width:99%;
margin:1px;
}
</style>
</head>
<body class="styleBg" onLoad="GetNewsSource()">
<table class="style_logo">
<tr>
<td>
<img alt="logo_banner Missing" class="style_logo" longdesc="Banner" src="logo_banner1.png" align="left"/>
</td>
<td>
<img alt="spinning_wheel" longdesc="Gif" src="Live.gif"style="height: 110px; width: 180px; " align="middle"/>
</td>
</tr>
</table>
<br />
<table class="styleTbl">
<tr>
<td height="100%" width="50%" rowspan="2">
<iFrame src="index.html"scrolling="no"></iFrame></td>
<td class="styleObj">
<img alt="png1" class="styleObj" longdesc="png1" src="png1.png"/></td>
</tr>
<tr class="styleRow">
<td class="styleObj">
<img alt="png2" class="styleObj" longdesc="png2" src="png2.png"/></td>
</tr>
<tr>
<td>
<img alt="png3" width=100% longdesc="png3" src="sentiment.png"/></td>
<td class="styleObj">
<img alt="png3" class="styleObj" longdesc="png3" src="png3.png"/></td>
</tr>
</table>
</body>
</html>
The issue is with using both percentages and pixel measurements for your iframe. Let's say you have a container width of 1000px. 99% of this is 990px, however applying a 1px margin to this results in a total internal width of 992px, leaving 8px for white space.
If you wanted to code this so no gaps would show, you should use a percentage for the margin also; 0.5% would return 4px for both sides in this example, leaving 0px of white space.
I suggest changing IFrame styling code to:
iframe
{
background-color:#ffffff;
border-color:#eee9e9 ;
border-width:4px;
height: 99%;
width:99%;
margin:0.5%;
}
Essentially what I want is a table, with one row, 5 cells... The first / left cell should be left justfied, the last / right cell should be right justified, and the middle 3 cells need to be centered with equal amounts of spacing between each cell. The table itself is "100% width, so that is where the spacing between cells would come from.
How would I write this (using html / css)? "table" tags or "divs" etc are both valid, I don't really mind which approach is taken as long as the end result looks correct.
Edit:
The problem is the spacing; the table itself isn't an issue, but simply setting the alignment on the cells will not work correctly; the free space between the cells is not 100% divided equally between the cells.
I also don't want to specify cell width as the content is dynamic and there is no way to know before hand how much width is needed.
HTML only version
<table>
<tr>
<td width="20%"></td>
<td width="20%" align="center"></td>
<td width="20%" align="center"></td>
<td width="20%" align="center"></td>
<td width="20%" align="right"></td>
</tr>
</table>
CSS Version
<table>
<tr>
<td style="width:20%;"></td>
<td style="width:20%; text-align:center"></td>
<td style="width:20%; text-align:center"></td>
<td style="width:20%; text-align:center"></td>
<td style="width:20%; text-align:right"></td>
</tr>
</table>
If you are using a table, assign unique ids to each cell and then use css to justify as required, e.g.
HTML:
<td id="firstcell">...</td>
<td id="secondcell">...</td>
<td id="thirdcell">...</td>
<td id="fourthcell">...</td>
<td id="fifthcell">...</td>
CSS:
table {table-layout:fixed;} /* ensure the widths are absolutely fixed at the specified width*/
td{ width: 20%;} /* allocate space evenly between all 5 cells */
td#firstcell {text-align:left;}
td#secondcell, td#thirdcell, td#fourthcell {text-align:center;}
td#fifthcell {text-align:right;}
td
{
text-align:center;
}
td:first-child
{
text-align:left;
}
td:last-child
{
text-align:right;
}
<style type="text/css">
.five_columns {
width: 100%;
}
.five_columns > div {
width: 20%;
float: left;
text-align: center;
overflow: auto;
}
.five_columns > div:first-child {
text-align: left;
}
.five_columns > div:last-child {
text-align: right;
}
</style>
<div class="five_columns">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
overflow: auto is set because if you strictly want the width to be the same there really isn't much you can do (as far as I know) other than force scrollbars on anything that's too long.