Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question table row height problems

    I have a table (yes, I know it could probably be done better without a table, but I don't know how yet... so this is the best I can do) which is laid out with 3 columns and 8 rows. The top-most and bottom-most rows have all 3 columns merged into a single cell (header and footer). The center column has rows 2-7 merged into a single cell (content). The resulting layout is like this;

    Code:
    
    +--------------+
    |    header    |
    +---+------+---+
    | * |      | * |
    +---+      +---+
    |   |      |   |
    +---+      +---+
    | * |      | * |
    +---+      +---+
    |   |      |   |
    +---+      +---+
    | * |      | * |
    +---+      +---+
    |   |      |   |
    +---+------+---+
    |    footer    |
    +--------------+
    
    Now, so far it works fine. The cells with an asterisk in them are menu items, lmenu and rmenu, respectively. I defined the styles as follows;

    Code:
    <style type="text/css">
    <!--
    .header {
    	height:128px;
    	width:825px;
    	background-image:url(images/header.png);
    }
    .footer {
    	height:75px;
    	width:825px;
    	background-image:url(images/footer.png);
    }
    .content {
    	width:461px;
    	background-image:url(images/bckgrd2.gif);
    	border:hidden;
    	border-width:thick;	
    }
    .leftblank {
    	width:175px;
    	background-image:url(images/bckgrd.gif);
    }
    .rightblank {
    	width:189px;
    	background-image:url(images/bckgrd.gif);
    }
    .lmenu {
    	height:39px;
    	width:175px;
    	background-image:url(images/lmenu.png);
    	text-align:center;
    	vertical-align:middle;
    }
    .rmenu {
    	height:39px;
    	width:189px;
    	background-image:url(images/rmenu.png);
    	text-align:center;
    	vertical-align:middle;
    }
    -->
    </style>
    I set the TD class to the appropriate style in each case (such as <TD class="header" colspan="3" /> or <TD class="content" rowspan="6" />).

    You may notice I specified height of the lmenu and rmenu cells, but not the leftblank and rightblank. I also specified height of the header and footer, but not content. This seems to work as I want it in all browsers, when the table is empty. I get the layout desired, all background images look pretty and everything.

    Then I add content - and at first it still works; until the content in the central 'content' cell exceeds a certain height (roughly 240 pixels). At that point, all of the cells, lmenu and rmenu as well as left blank and rightblank, expand vertically to match. While my background images are okay with heights larger than 39px, I hate the way it looks.

    I tried setting a div inside the cell with the class of lmenu and rmenu ( <TD> <DIV class="lmenu"> left link 1 </DIV> </TD> ), and with that it works fine; partially. the div stays at 39px, but the cell it is in expands, leaving the background color above and below the background image...not what I want.

    Is there a way to limit the height of the three rows with menu items in the cells, and still allow the table as a whole to expand (only expanding the other three sidebar rows as it does so)?
    Last edited by kargrafx; 12-02-2006 at 12:28 AM.

  • #2
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What kills you is that Firefox displays it like you want. IE just sucks.

    I don't know of any way around this other than going to all CSS...which I know you don't want to do.

    If it helps you explain it to folks who may be able to help more. I did this:
    http://tyreeonline.com/tests/table_exp/

    All I did was put images in to show the sizes you WANT the left and right menus to be, with bright yellow background so you can tell when the cells get too big. If it's doing it correctly, you should see all green and just the blue and black images for your menus (which Firefox does). Yellow only shows up when it's misbehaving (IE).

    Another option: http://tyreeonline.com/tests/table_exp/fix.html
    But, the problem here is the blank sections don't grow either. I just put in 2 nested tables 6-rows high on either side of the content area (merged the side rows).

    Good luck!
    Last edited by Tyree; 12-02-2006 at 04:57 AM.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help, Tyree. It isn't so much that I don't want to use CSS; it was more that I don't know enough CSS to do it, and I did not want to come begging someone to write the code for me. So instead I did what I could and then asked for help with it.

    While waiting on responses, I did go out and google a lot of CSS layout tutorials, and by a bit of copy and pasting, a bit of self teaching, and mostly expanding on my basic knowledge of CSS, I came up with something that is pure CSS, and which functions similar to your 'fixed' example... I have the same problem that the bottom of the sides do not expand when the center does.

    Here are a couple of links; www.kargrafx.com/samplecss/sample1.html and www.kargrafx.com/samplecss/sample2.html - the first looks fine; the second shows the probem. I plan on having that center 'content' div actually holding an iframe, and the various content in may be long enough to bring about this problem...

    so any advice is appreciated!

    (in case you would rather see my horrible code instead of, or in addition to the links above, it is here...)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>sample css</title>
    
    <style type="text/css">
    	
    	body {
    		text-align:center;
    		background-color: #fff3cd;
    		}
    	
    	a:link {
    		text-decoration: none;
    		font-weight:bold;
    		color: #CC9999;
    		}
    
    	a:visited {
    		text-decoration: none;
    		font-weight:bold;
    		color: #CC9999;
    		}
    
    	a:hover {
    		text-decoration: none;
    		font-weight:bold;
    		font-style:italic;
    		color: #FF9999;
    		}
    
    	a:active {
    		text-decoration: underline;
    		font-weight:bold;
    		color: #FF99CC;
    		}
    
    	#frame {
    		width:825px;
    		margin-right:auto;
    		margin-left:auto;
    		margin-top:10px;
    		padding:0px;
    		text-align:left;
    		}
    		
    	#contentheader {
    		background:#fff3cd
    		}
    		
    	#contentleft {
    		width:175px;
    		padding:0px;
    		float:left;
    		background:#fff3cd;
    		background-image: url(images/bbg1.jpg);
    		}
    	
    	#contentleft p { height:24px}
    
    	#menuleft {
    		height:39px;
    		width:175px;
    		background-image:url(images/cats_head1.jpg);
    		text-align:center;
    		vertical-align:middle;
    		border-bottom-width: 32px;
    		border-top-style: none;
    		border-right-style: none;
    		border-bottom-style: none;
    		border-left-style: none;
    		}
    
    	#contentcenter {
    		width:461px;
    		padding:0px;
    		float:left;
    		background:#fff3cd;
    		}
    	
    	#contentright {
    		width:189px;
    		padding:0px;
    		float:left;
    		background:#fff3cd;
    		background-image: url(images/bbg3.jpg);
    		}
    	
    	#contentright p { height:24px}
    
    	#menuright {
    		height:39px;
    		width:189px;
    		background-image:url(images/cats_head2.jpg);
    		text-align:center;
    		vertical-align:middle;
    		}
    
    	#contentfooter {
    		background-image: url(images/footer.png);
    		width:825px;
    		height:75px;
    		}
    		
    	p,h1,pre {
    		margin:0px 10px 10px 10px;
    		}
    		
    	h1 {
    		font-size:14px;
    		padding-top:10px;
    		}
    		
    	#contentheader h1 {
    		font-size:14px;
    		padding:10px;
    		margin:0px;
    		background-image: url(images/header.png);
    		height:109px;
    		}
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
    <body>
    <div id="frame">
    	<div id="contentheader"><h1>&nbsp;</h1>
    	</div>
    	<div id="contentleft">
    		<div id="menuleft"><a href="#biography">Biography</a></div>
    		<p />
    		<div id="menuleft"><a href="#gallery">Gallery</a></div>
    		<p />
    		<div id="menuleft"><a href="#faq">Blog</a></div>
    		<p />
    		<p />
    </div>
    
      <div id="contentcenter">
    	  <h1>&nbsp;</h1>
    </div>
    
    	<div id="contentright">
    		<div id="menuright"><a href="#services">More Information </a></div>
    		<p />
    		<div id="menuright"><a href="#links">Links</a></div>
    		<p />
    		<div id="menuright"><a href="#contact">Contact Me</a></div>
    		<p />
    		<p />
      </div>
    	<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    	<div id="contentfooter"></div>
    </div>
    
    </body></html>

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Make the left and right cream colored bar background images into a single image wide enough to span the container and set that as a vertically repeating background on that container. That should create the illusion of columns that extend down to the footer.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was thinking about that approach, but I didn't know if you had images that wouldn't tile badly. You'll have to customize those flower background to repeat nicely. But, yeah, Arbitrator has a good suggestion there.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Make the left and right cream colored bar background images into a single image wide enough to span the container and set that as a vertically repeating background on that container. That should create the illusion of columns that extend down to the footer.
    The left and right cream color images have the border for the center area in them. The left image has a small 'shadow' on its right edge and vice versa... I can't just tile one of the two in the background...

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, I see what you meant now; or at least I see one way to do what you suggested...I made an image 825 pixels wide and 1 pixel tall, pasted the two images onto the left and right backgrounds onto the sides, and filled the center with my center color...then placed that as the background-image for my 'frame' div. Now it looks great!

    Next question; how do I vertically center the text in a DIV? I want the menu text to be vertical-align:middle, but setting that leaves it at the top of the div.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    The vertical-align property only vertically aligns the contents of a box when used on an element with display: table-cell. Otherwise, it vertically aligns inline content relative to a line of text. The second, normal usage is a bit hard to explain, so I won’t do so. Still, you can use this second method to your advantage; here’s an example. Basically, just set a container’s line-height equal to its height; you can only use this method to center one line of inline content and the box must have a defined height.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I think I have it all working fine now!

    Just curious; if you set the line height to half the hieght of the container, would you be able to center 2 lines of text, or would they both just be equidistant from the center and edge? I think it would work that way, giving you a line a 1/3 and a line at 2/3... maybe I should experiment.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Moving forward with this page, and trying to use more CSS in it to enhance my learning experience;

    If I use z-indexes instead of an iframe for the centercontent area, I can have the menu items change the z-index of the appropriate div and display it, right? I am assuming this based on dynamic drive's tab menu script which does this, though in it the menu items are tabs on the top of the display, instead of links to the right and left... but it should work the same.

    So, assuming I can figure this out, would it be possible to have an entire image gallery set up on one of these div's, and hidden via z-index? Would the javascript for the gallery be running constantly, or only when the div is visible? Are there any issues I should be aware of before (or, during - since I will be working on this a few moments after I post) I start trying to use this method?

    THANKS!

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    You could just hide the other div elements with display: none and switch them on and off as needed. Keep in mind that many browsers will load the content (images) of a hidden element even though it can’t be seen, so for users with slow connections, the page may seem to download slowly with no indication as to why while that content loads.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •