Stretch Table automatically fit to text
- Thread starter TomerP
- Start date
- Status
Well simply don't give the cells or table a width, and it'll expand on it's own (though in which direction...)
Looking at the code, you need to read up on correct xhtml syntax. I'd recommend using CSS mostly for that.
Don't use absolute paths. (since the above obviously won't work when you upload it to a server)
All atrributes must be enclosed in an "" to be considered xhtml valid.
Get rid of the 100% for the table, or it won't collapse/expand with the content.
Define widths and heights using CSS (ie: style="width: 20px; height: 15px;")
Don't do two lefts (simply you need Left Cell with a defined width/height, right cell with a defined width/height, and a center td cell with a background defined by CSS without a defined width.
You have 67 errors when trying to validate the above against the xhtml specs http://validator.w3.org/check
Looking at the code, you need to read up on correct xhtml syntax. I'd recommend using CSS mostly for that.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Code Tutorial - Free Reference Guide for Help with HTML Tags
Including Form, Frames, Tables, and more!</title>
<style type="text/css">
.logoHeader
{
font-family: tahoma, verdana, sans-serif;
color:#ffffff;
font-size:16px;
font-weight:regular;
}
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 border=0 width=100% height=25 background='C:\Documents and Settings\QA\Desktop\Mid.png'>
<tr>
<td><img src='C:\Documents and Settings\QA\Desktop\Left.png' height=57 width=1></td>
<td valign=top><img src='C:\Documents and Settings\QA\Desktop\Left.png'>
<td>
<Div id='logoTitle' class=logoHeader style='white-space:nowrap;padding-right: 5px;'></div>
</td>
<td width=100%><Div class=logoHeader id=logoHeader name=logoHeader style='visibility:hidden; display:none'></div>test</td>
<td valign=top><img src='C:\Documents and Settings\QA\Desktop\Right.png'></td>
</tr>
</table>
</body>
</html>Don't use absolute paths. (since the above obviously won't work when you upload it to a server)
All atrributes must be enclosed in an "" to be considered xhtml valid.
Get rid of the 100% for the table, or it won't collapse/expand with the content.
Define widths and heights using CSS (ie: style="width: 20px; height: 15px;")
Don't do two lefts (simply you need Left Cell with a defined width/height, right cell with a defined width/height, and a center td cell with a background defined by CSS without a defined width.
You have 67 errors when trying to validate the above against the xhtml specs http://validator.w3.org/check
Thanks I've removed the width and it works, but now comes the tricky part, I'm trying to put it inside wordpress theme and it refuse to work:
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<table cellpadding=0 cellspacing=0 border=0 background='images/TitleMid.png' align=right>
<tr>
<td valign=left><img src='images/TitleLeft.png'>
<td>
<td ><h2><?php the_title(); ?></h2></td>
<td valign=right><img src='images/TitleRight.png'></td>
</tr>
</table>
<div class="entry">
<?php the_content('<p class="serif">' . __('Read the rest of this page »', 'kubrick') . '</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>' . __('Pages:', 'kubrick') . '</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link(__('Edit this entry.', 'kubrick'), '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<table cellpadding=0 cellspacing=0 border=0 background='images/TitleMid.png' align=right>
<tr>
<td valign=left><img src='images/TitleLeft.png'>
<td>
<td ><h2><?php the_title(); ?></h2></td>
<td valign=right><img src='images/TitleRight.png'></td>
</tr>
</table>
<div class="entry">
<?php the_content('<p class="serif">' . __('Read the rest of this page »', 'kubrick') . '</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>' . __('Pages:', 'kubrick') . '</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link(__('Edit this entry.', 'kubrick'), '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Probably either because you didn't put the images into the theme's image folder, or the files uploaded don't share the same capitalization. Also I noticed you did not define the width/height of the ends, which then could be anything they inherit by the theme's stylesheet.
What if you had instead...
Code:
<table style="padding: 0px; text-align: right;">
<tr>
<td style="background: url('images/TitleLeft.png') no-repeat top left; height: 16px; width: 16px;"><!-- --><td>
<td style="background: url('images/TitleMid.png') repeat-x top left; height: 16px;"><h2><?php the_title(); ?></h2></td>
<td style="background: url('images/TitleRight.png') no-repeat top left; height: 16px; width: 16px;><!-- --></td>
</tr>
</table>Assuming of course the right and left graphics are 16x16. ( is in <!-- --> because internet explorer will force the cell wider if the font size is bigger than the cell size). Basically the ends don't repeat, but the middle one does only for the center cell.
I did upload it
the thing is that without the php it works (on simple .html file), but when I put it into the php it totally ignores the Table, and stay the same as it was, some of the stylesheet is:
.post {
background: #E3E3E3 url('images/Title.png') no-repeat top right;
line-height: 220%;
padding: 1px 10px 0px 0;
margin: 0 0 20px;
text-align: justify;
}
Title = the TitleLeft+TitleMid+TitleRight which is the non-dynamically thing that I used up until when I started wanting to make this be dynamic to the php-the_title text..
Did you perhaps have wp-cache enabled, and forgot to clear the cache in able to see the updated file?
where do I set it? but also it is not possible since I use two browsers and one of them would have seen it..
- Status