11 replies to this topic

[zeroradius]

Hey guys,

I am working on a site and there is a "bar" on the left hand side consisting of 6 (now 7) cells. They are spaned by a cell that holds the main content to be displayed on the page. The original 6 cells on the left "bar" all have heights asigned to them in pixels from a css document. On the seventh and last cell on the left bar i asigned it a class in the css caled .heightsaver I made it set so that it looks like this - height:100%; The fuctionality of this cell is so that when the maincontent cell expands beond my original design the other 6 cells on the left bar stay the height I want and only the 7th cell gets taller. This did not work. I took the height attribute out of the .heightsaver class and instead tried to go old school in the html and put

<tr><td class="heightsaver" height=100%>

I also tried puting the 100% in qoutes. This did not work eaither. Any body know how I can get the cell to behave like i want it to?

Thanks in advanced
~Zero

[Xav]

100% would mean the whole height, including the space that all the other 6 six cells are occupying. If you set heights for all of them except the last, the last one should automatically resize to align with the main content cell.

You ought to be using CSS and <div>s instead of a table. What happens with your page at the moment?

[zeroradius]

I am using css. Using div is a personal prefrence I think tables function better. Thanks for the advice thouh. I removed the 100% and it is still doing the same thing. Also just for a note, puting 100% usualy makes it take up 100% of the remaining space, that is how i usualy do things and it has always worked in the past.

[Xav]

The whole point of a table is that the cells are aligned with each other. Could you describe exactly what is happening with no height=100% set?

Also, CSS and <div> layouts are not just preferences. They offer significant speed increases to rendering tables.

[zeroradius]

All seven cells expand and lose their pre set deminsions the same as before, there is no other way to describe it that I can think of.

It is still a prefrence becuse the other way works and it is up to the developer to decide. To many times have I seen sites that look good on a small monitor turn into crap on my large monitor. I prefer to give up the speed to gain the knowlage that my page will render the same way no matter how it is viewd.

[Xav]

Try setting max-height as well as height in the CSS.

[zeroradius]

No this did not work eaither. Maybe I messed somthing up in the code and I am overlooking it because how long i have been repeatedly re-reading this thing. Here is the code.

insex.php

<table class="mainTable">

            <tr>

               <td colspan="2" class="banner">

                  banner here

               </td>

            </tr>

            <tr>

               <td colspan="2" class="bar">

                  <?php include("navigation.php"); ?>

               </td>

            </tr>

            <tr>

               <td class="bar">

                  Log-In

               </td>

               <td rowspan="7" class="contentholder">

                  <div align="center">

                     <?php include("news.php"); ?>

<br /> a <br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a

                  </div>

               </td>

            </tr>

            <tr>

               <td class="leftbar">

                  <?php include("loginAndMail.php"); ?>

               </td>

            </tr>

            <tr>

               <td class="bar">

                  Change Layout

               </td>

            </tr>

            <tr>

               <td class="leftbar">

                  <?php include("choselayout.php"); ?>

               </td>

            </tr>

            <tr>

               <td class="bar">

                  Adds

               </td>

            </tr>

            <tr>

               <td class="leftbar">

                  <div align="center">

                     <?php include("addrotator.php"); ?>

                  </div>

               </td>

            </tr>

            <tr>

               <td class="heightsaver">

                

               </td>

            </tr>

            <tr>

               <td colspan="2" class="bar">

                  <div align="center">

                     © MoronsPlayingWithFire2008

                  </div>

               <td>

            </tr>

         </table>

Note: All of the (<br /> a )s where just to make the page streach out to test it.

mainStyle.css

body 

{

	background-image:url(backgrounds/myBg.png);

	color:#ffffff;

}

table

{

	background-color:#5490da;

	color:#000000;

	height:2px;

	border:0px;

	border-color:#000000;

	padding:0px;

	border-spacing:0px;

	border-collapse:collapse;

}

hr

{

        size:1;

        width:550px;

        color=#000000

}

.mainTable

{

        width:800px;

}

h1

{

	color:#000000;

}

.bar

{

	background-color:#2265b7;

	color:#000000;

	height:25px;

        max-height:25px;

}

.banner

{

  width:100%;

	height:100px;

	background-color:#5490da;

}

.formFiled

{

	background-color:#2265B7;

	border:2px;

	border-color:#000000;

	border-width:2px;

	border-style:solid;

}

.leftbar

{

        background-color:#4b8efc;

	color:#000000;

	height:75px;

        max-height:75px;

        width:150px;

}

.contentholder

{

        width:650px;

}

.content

{

        width:550px;

}

.heightsaver

{

       background-color:#000000;

       color:#000000;

       width:150px;

}

[Xav]

How about the CSS command "table-layout: fixed"?

If not, I have been reading Problem with fixing Table cell height for you and, before they start arguing, they decide that <div> tags and CSS are far superior. ;)

[zeroradius]

hmm, might work but if i need to put extra stuff in a cell i want it to automaticly fix to the right height not cut off.

eh, div will make my life a lot more difficult unless there is an option in photoshop that I have never seen before you can't export as div :( . Not to mention what I said before about some sites looking like crap on larger monitors because of Div.

Maybe I will take the guys advice on there and use nested tables, would prefer not to but if that is what it takes that is what it takes.

[Xav]

Give it a go, I suppose! But remember, nested tables are never the way forward. :)

[zeroradius]

Well I found a great article: Web Development and Design in London: Using Divs versus using Tables.

It has helped me see where you are coming from with Divs'. Read it and maybe you will see where I am coming from with tables. Keep in mind that even though the actual design has not been implemnted yet on my site I prefer my sites to be visualy pleasing. My site is a site for relaxing and having fun and does not need good SEO.

Edit: Almost forgot, Thanks for the help.

[Xav]

I'm not stopping you from using tables... I'm merely suggesting. :)

For example, I used tables in this site: Home - Stav Cinemas

But I used <div> tags and CSS in this one: Abolish the Slave Trade

Mainly because I didn't know how to use CSS to build layouts at the time, the cinema project was done with one big table. The slaves project was made with about five <div> sections (two for the header, one to hold all the content and two for the columns).