Solved

Centering Table & Picture

Posted on 2007-03-20
22
175 Views
Last Modified: 2010-04-25
I have a page with nothing but a table. The table is set to be a 100% of the screen both vertical and horizontal.
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">

But when I run this the table expands to the full screen horizontally but not vertically. Do I have to do something else for this work?

Also, in the center cell of the table I have a picture. I would like that this picture stretch/shrink to fill available space. The picture is very large, so there should be no problem of resolution. But I don't see where I can set this for the picture.

Can someone guide me on this.
0
Comment
Question by:Tammak1
  • 11
  • 10
22 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18761528
Hi Tammak1,

You can't do <table width=100% height=100%>...most browsers won't recognize the height.  Use CSS instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#fullheight{height:100%}
-->
</style>
</head>

<body>
<table border="0" cellpadding="2" cellspacing="0" id="fullheight">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
 

Author Comment

by:Tammak1
ID: 18761672
I entered
#fullheight{height:100%}

and my table tag is now this:
<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">

but no change. Both in FF 2 and IE 7.

I noticed that I have this line
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
which is a little different from what you wrote, is this a problem?

Also, what about have the picture stretch/shrink?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18761686
Post your code...
0
 

Author Comment

by:Tammak1
ID: 18761869
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
}


}
.hh {
      height: 100%;
      width: 100%;
}

#fullheight{height:100%}

-->
</style>
</head>

<body>
<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">

  <tr>
    <td valign="top"><div align="left">top left </div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
            <div align="center" >
            <b class="hoverText">Galya Rice <br />
            Sep 8, 2006 </b></div>
      </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="top"><div align="right"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="5" rowspan="4" align="center" valign="middle">

        <div  align="center"><img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />

      </div>
      </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18762197
Change your CSS to the following:

<style type="text/css">
<!--
html, body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
        height: 100%;
}


.hh {
      height: 100%;
      width: 100%;
}

#fullheight {height:100%;}

-->
</style>

The height of the HTML and body elements also has to be set to 100% before the table will stretch.  I forgot that part.

To make the image stretch too, you can change #fullheight id to a class:


.fullheight {height:100%;}

and do this:

<table  border="0" align="center" cellpadding="2" cellspacing="0" class="fullheight">

and

<img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />

>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You're using XHTML transitional and I normally use strict.  That wasn't causing the issue.


0
 

Author Comment

by:Tammak1
ID: 18764026
Bellow is my code after the changes. In design mode now it shows everything stretched to full screen. But when I run it now it does not even stretch the table width to full screen. Perhaps I didn't change the code fully correct?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
       height: 100%;
}



.hh {
      height: 100%;
      width: 100%;
}

.fullheight{height:100%}

-->
</style>
</head>

<body>
<!--<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">-->
<table  border="0" align="center" cellpadding="2" cellspacing="0" class="fullheight">
  <tr>
    <td valign="top"><div align="left">top left </div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
            <div align="center" >
            <b class="hoverText">Galya Rice <br />
            Sep 8, 2006 </b></div>
      </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="top"><div align="right"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="5" rowspan="4" align="center" valign="middle">

        <div  align="center">
<!--        <img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />-->
<img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />
      </div>
      </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 9

Expert Comment

by:pmagony
ID: 18764375
You're missing width="100%":

<table  border="0" align="center" cellpadding="2" cellspacing="0" class="fullheight" width="100%">
0
 

Author Comment

by:Tammak1
ID: 18764579
Now the width of the Table works! It stretches to fit the screen.
But -
The table hight does not, nor does the picture stretch at all.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18765938
You didn't read my style additions correctly:

<!--
body,td,th {

Should be

<!--
html,body,td,th {

The addition of the html element to the style is critical.
0
 

Author Comment

by:Tammak1
ID: 18766042
ok. This now -

In FF expands the table both width and height to fit the screen! But the picture remains the same size, about a 1/4 of the screen.

In IE7 expands the picture to fit the screen but expands the top and bottom of the table to about five times the screen size  (need to scroll to even see the top of the picture)
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18766092
You may need to remove the td and th from the initial style.  I didn't test extensively with your code:

<style type="text/css">
<!--
html, body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
        height: 100%;
}

td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
}

.hh {
      height: 100%;
      width: 100%;
}

#fullheight {height:100%;}

-->
</style>
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18766115
As far as the image goes, did you read and understand my earlier comment about changing the fullheight id to a CSS class and using it on both the table and img elements?
0
 

Author Comment

by:Tammak1
ID: 18766594
when I change the code to what you gave me - splitting it to two sections, it goes back to way it behaved before - no full screen for table or anything.

About the picture and the fullheight id - I had done that, but now revisiting it I realized that only the height was set to 100% and now I added the Width and this fixed the picture significantly (about 90%) in FF, but in IE it's the same - picture expands somewhat, table expands to width filling the screen but hight to about 5 times the screen.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18766614
Okay, repost the code as it stands currently and let me test.
0
 

Author Comment

by:Tammak1
ID: 18766720
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
       height: 100%;
}

'html, body {
'      font-family: Verdana, Arial, Helvetica, sans-serif;
'      font-size: 14px;
'      color: #5A6C7A;
'        height: 100%;
'}
'
'td,th {
'      font-family: Verdana, Arial, Helvetica, sans-serif;
'      font-size: 14px;
'      color: #5A6C7A;
'}

.hh {
      height: 100%;
      width: 100%;
}

.fullheight{
      height:100%;
      width: 100%;
}
.style1 {font-size: 12px}

-->
</style>
</head>

<body>
<!--<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">-->
<table  border="0" align="center" cellpadding="0" cellspacing="0" class="fullheight" width="100%">
  <tr>
    <td valign="top">
            <div align="left">top left </div></td>
    <td colspan="5" rowspan="5">

        <div  align="center">
  <!--        <img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />-->
  <img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />      </div></td>
    <td align="right" valign="top"><div align="right" class="style1"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 50 total points
ID: 18766808
Okay, try the following code.  What's going on the CSS box model may be supported oddly by IE (FireFox appears to handle it okay).  You might need to add the fullheight class to each element of the table down to the image.

This code appears correct in FF and IE 6 (sorry, no IE 7 at work):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

html, body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
        height: 100%;
}

td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
}

.hh {
      height: 100%;
      width: 100%;
}

.fullheight{
      height:100%;
      width: 100%;
}
.style1 {font-size: 12px}

-->
</style>
</head>

<body>
<!--<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">-->
<table  border="0" align="center" cellpadding="0" cellspacing="0" class="fullheight" width="100%">
  <tr class="fullheight">
    <td valign="top">
            <div align="left">top left </div></td>
    <td colspan="5" rowspan="5">

        <div  align="center" class="fullheight">
  <!--        <img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />-->
  <img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />      </div></td>
    <td align="right" valign="top"><div align="right" class="style1"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
 

Author Comment

by:Tammak1
ID: 18769104
This certainly helps, and after I put in some more fullheight class even in IE7 it performed better. But it seems that the right and left cells/can't be shrunk to only the size of the actual text contained in them.
Do you think that I would be better off just using css w/o table? can this be done in css?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18769403
>> Do you think that I would be better off just using css w/o table? can this be done in css?

Possibly, but if you Google for "CSS 100% height" you will see a ton of articles regarding inconsistent IE support for this element.  Using divs instead of a table will certainly help but you may never get it to look exactly how you want it with the current CSS support in IE.
0
 

Author Comment

by:Tammak1
ID: 18773967
I hear you. I am very new to this, I didn't realize that there was inconsistent support for css, especially in the new generation browsers. Would you redesign page or would you use a different technology (flash?), and if the latter what would that be?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18774205
Well, since I hate (HATE HATE) sites designed in Flash, I would be more likely to attempt to use a pure CSS design to achieve the effect.  The CSS box model (which is what is causing all the issues) works better with divs than tables.  I tend to specify a pixel height for elements and just forget about a liquid solution to the height problem...
0
 

Author Comment

by:Tammak1
ID: 18789292
Thank you very much, you have taught me a lot here. I was under false assumptions that all modern browsers handled css 100% and were consistent.

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 18789488
You're welcome
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Question about Dreamweaver CC 1 290
Debug PHP with Dreamweaver 6 614
Adobe Indesign CS6 4 79
Live mode in DW, need to creae Session 4 59
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now