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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Understanding the table height

    To understand the height property...why doesn't the table, tr or div height work in this scenario?

    Code:
    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Title </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
    <script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
     <script> 
    	function scrollToAnchor(aid){
    		var aTag = $("a[name='"+ aid +"']");
    		$('html,body').animate({scrollTop: aTag.offset().top},'slow');
    	}
      $(document).ready(function () { 
    	$("#aID1").click(function() {
    		scrollToAnchor('id1');
    	});
    	$("#aID2").click(function() {
    		scrollToAnchor('id2');
    	});
    	$("#aID3").click(function() {
    		scrollToAnchor('id3');
    	});
    	
    }); 
      </script> 
    <style type="text/css" media="screen"> 
    html 
    {
    	height:100%; 
    	max-height:100%; 
    	padding:0; 
    	margin:0; 
    	border:0; 
    	background:#fff; 
    	font-size:80%; 
    	font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
    	/* hide overflow:hidden from IE5/Mac */ 
    	/* \*/ 
    	overflow: hidden; 
    	/* */ 
    }
    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
    #content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:200px; position:relative; z-index:3; word-wrap:break-word;}
    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;}
    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:51px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
    .pad1 {display:block; width:18px; height:50px; float:left;}
    .pad2 {display:block; height:100px;}
    #content p {padding:5px;}
    
    </style>
    </head>
    <body>
    <div id="printhead">www.s7u.co.uk - Cutting Edge CSS</div>
    <div id="head"><div class="pad1"></div>Header
    <a id="aID1" href="#">ID 1</a><a id="aID2" href="#">ID 2</a><a id="aID3" href="#">ID 3</a>
    </div>
    <div id="content">
    <a name="Top"></a>
    <div class="pad2"></div>
    <div style="height:100px">
    <table width="600px"  style="height:100px">
    	<tr  style="height:100px">
    		<td>
    			<a name="id1"/>
    			<b>ID1</b>
    			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    			<a name="id2"/>
    			<b>ID2</b>
    			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    			<a name="id3"/>
    			<b>ID3</b>
    			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    		</td>
    	</tr>
    </table>
    </div>
    <div class="pad2"></div>
    </div>
    <div id="foot">Footer</div>
    </body>
    </html>
    EDIT: the content is taking the full higth instead of limiting to 100px...
    Last edited by diegolaz; 06-07-2012 at 02:01 PM. Reason: more info

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    As you have discovered the content over rides the height. That's cause table are not to be used for layout and that's what it looks like what your doing here. A table with 1 row that has 1 td.

    Use divs, the the height can be controlled with overflow.
    PS you do not need jquery to scroll to an anchor see http://www.w3schools.com/tags/tag_a.asp
    and http://www.w3schools.com/tags/tryit...._link_bookmark

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks, I also have a div in there that didn't work. I'll try with the overflow.

    the jquery is for the animation on the scroll, which I haven't played with yet.

    The idea is to have an are and show 1 div at a time (1 of 3), with each div filling the full height and having an animation effect on scroll.

    thanks for your answer

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thanks for sharing fantastic information about Understanding the table height. It is very important part of the proper web designing. In web designing two ways for design table first is table tag and second is div tag this both tags are very easy to create table.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by williamxaviers View Post
    In web designing two ways for design table first is table tag and second is div tag this both tags are very easy to create table.
    No No No - if you have tabular data then you use the table tag. If you don't have tabular data then you work out what the content actually is and use the appropriate tag that matches the content. Only if there is no tag for that type of content do you use a div.

    If you want a table-like / grid layout then you'd use the CSS commands display:table, display:table-row, and display:table-cell to make your paragraphs, lists or divs behave as if they were parts of a table - but only for the one specific media as you'd likely want the content laid out differently for other media.

    Replacing table-itis with divitis is just replacing one meaningless set of tag soup with another.
    Last edited by felgall; 06-08-2012 at 09:36 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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