1 reply [Last post]
eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

Hello there,

I'm having trouble with a layout - it's a menu - content (scrolling) - status layout which I've tried to achieve through a single table:

----------------------------
| Menubar |
----------------------------
| Content | |
| | | <- Scrollbar
| | |
| | |
| | |
| | |
| | |
| | |
----------------------------
| Statusbar |
----------------------------

So I've defined body, html { height: 100%; width: 100%; overflow:hidden } and a table #bodywrap {height:100%; width: 100%}
and then defined rows and cells for the menubar, content and statusbar (here #footer)

My trouble is when content overflows, the table expands and height > 100% (i.e. it expands out below the browser window)

Here is the code in full, with test data (apologies for some //commented code there while I was trying to fix this):

html:

<!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 name="keywords" content="meta" />
 
	<title>EdwardCaine.com</title>
 
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="javascript.js"></script>
		<link href="widgets/textThumbs/textThumbs.css" rel="stylesheet" type="text/css" />
		<link href="widgets/events/events.css" rel="stylesheet" type="text/css" />
		<link href="widgets/newslist/newslist.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
	<table class="bodywrap" cellspacing=0 cellpadding=0>		<tr id = "menu"><td>
 
	<ul id="menubar">
 
		<li><a href = "index.php" >Home</a></li>
		<li><a href = "about.php" >About</a></li>
		<li><a href = "compositions.php" >Compositions</a></li>
		<li><a href = "piano.php" >Piano</a></li>
		<li><a href = "teaching.php" >Teaching</a></li>
		<li><a href = "lecturing.php" >Lecturing</a></li>
		<li><a href = "design.php" >Web Design</a></li>
		<li class = "cap"></li>
 
	</ul>
	</td></tr><tr id = "cwrap"><td id = "content">
 
<table cellpadding=0 cellspacing=0 style="width:100%;height:100%;"><tr><td class = "document"><h1>EdwardCaine.com</h1><h4>Welcome to <b>EdwardCaine.com</b>. I am a composer and freelancer based in York, UK</h4><hr class = "divider" /><h1>Latest News</h1>		<ul class = "newslist"
 
<li><h1>Graduation Performance</h1><h2>16/7/09</h2>Bright Cecilia were/are performing my setting of "Ye Banks and Braes" at the graduation ceremony for University of York Students today and tommorrow! <div class = "event"><img src = "img/bhproject.jpg" /><h1>Black Hair Ensemble Residency Project</h1><h2>Tue, 11th November 2008, 4.30pm</h2><h3>Sir Jack Lyons Concert Hall, University of York</h3></div></li><li><h1>New Piece and Premiere: En un vergier sotz fuella d'albespi</h1><h2>10/6/09</h2>For Alto and Bass throat-singing duet.<br />Comissioned by Robin Bier and dedicated to  her ensemble <a href = "http://www.ensemblebrightcecilia.com/">Bright Cecilia</a> this piece is a setting of the ancient Occitane poem "en un vergier sotz fuella d'albespi" and will be premiered this friday (12th June) at 2pm in the University of York Music Department Rhymer Auditorium.<div class = "event"><img src = "img/bc.jpg" /><h1>"Lost Songs" by Bright Ceclia</h1><h2>Fri, 12th June 2009, 2.00pm</h2><h3>Rhymer Auditorium, University of York Music Department</h3></div></li><li><h1>Premieres Moved</h1><h2>10/6/09</h2>Oweing to funding problems the Late Music Concert Series has now been pushed back to November. This means that the premieres of my new pieces Quartet and sop.fl.vcl.atem have moved. No specific date yet - watch this space!<div class = "event"><img src = "img/bc.jpg" /><h1>"Lost Songs" by Bright Ceclia</h1><h2>Fri, 12th June 2009, 2.00pm</h2><h3>Rhymer Auditorium, University of York Music Department</h3></div></li><li><h1>Madrigale III first draft</h1><h2>22/4/09</h2>Charlotte Bishop of the Black Hair Ensemble has kindly recorded the first two pages of Madrigale as they are (in preperation) for use in the Huddersfield Conference this weekend. To have a listen, click play on the media player above.<div class = "event"><img src = "img/Salvatore_Sciarrino.jpg" /><h1>Conference in Huddersfield</h1><h2>Sat, 25th April 2009, 9.00am</h2><h3>Centre for Research in New Music, University of Huddersfield</h3></div></li><li><h1>String Quartet World Premiere</h1><h2>8/3/09</h2>This is to be performed by a young quartet featuring Cerys Jones on Sunday the 6th December 2009. </li><li><h1>Date set for new Trio Atem piece!</h1><h2>8/3/09</h2>My next piece written for the excellent Trio Atem group will be performed in the Late Music Concert Series this year in a lunchtime concert on the 3rd October 2009. This will be a world premiere</li><li><h1>My Own Homecoming</h1><h2>1/3/09</h2>I've recently sold my first piece of sheet music on scotchsnap.com - an arrangement of "Ye Banks and Braes of Bonnie Doon". This has led me to start writing settings of Robert Burns for choir. It's Robert Burns 250th Anniversary and prime time to be setting his words! I've already finished one setting (Green Grow the Rashes, O;) and am working on a second (To A Mountain Daisy)</li><li><h1>Kreutzer Workshop!</h1><h2>31/1/09</h2>Yesterday some of the sketches for my string quartet were workshopped by the Kreutzer Quartet at the University of York. It was very helpful and I hope to work with them again in the future!</li><li><h1>SPNM Video Interview and Photoshoot</h1><h2>10/1/09</h2>The full video interview made by the SPNM on december the 8th 2008 has been released and I've added it to this website - use the player at the top of the page to watch it or go to my <a href="http://www.spnm.org.uk/?page=shortlist/composer.html&id=300">SPNM profile</a>. Also a number of good photos were taken by a professional photographer - a useful help!
</li><li><h1>New Links page</h1><h2>8/1/09</h2>You may notice that the SPNM link at the top of the page has been superseded by a "Links" Section - click on it to find more information, composer friends and relevant organisations!</li><li><h1>SPNM Video Interviews - "Highlights" posted</h1><h2>5/1/09</h2>Enjoy this clip of me throat singing to an amused cameraman! Also includes selections from interviews by fellow SPNM Composers!
</td></tr></table>
 
	</td></tr><tr id = "footer"><td>
 
<table id = "footText" cellpadding=0 cellspacing=0><tr><td>Copyright &copy;2009 Edward Caine</td><td class = "footRight"><a href = "contact.php">Contact</a> - <a href = "links.php">Links</a> - <a href = "resources">Resources</a> - <a href = "forum/">Forum</a></td></tr></table>	</td></tr></table>
 
 
 
</body>
 
</html>

css:

/* @override <a href="http://localhost/me/style.css" title="http://localhost/me/style.css">http://localhost/me/style.css</a> */
 
body, html
{
 
	height: 100%;
	width: 100%;
 
	overflow: hidden;
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 
}
.bodywrap
{
 
	height: 100%;
	width: 100%;
	//display: block;
	//position: absolute;
	//left: 0;
	//right: 0;
	//top: 0;
	//bottom: 0;
	overflow: hidden;
}
#menu
{
	height: 63px;
	background: url(img/headback.gif) repeat-x;
	overflow: hidden;
	//display: block;
}
#menu td
{
	height: 63px;
	min-width: 580px;
	background: url(img/headhead.gif) no-repeat right 0;
	vertical-align: bottom;
 
}
#content
{
 
	//height: 100%;
	overflow: auto;
	//display: block;
	background: #393838 url(img/back.png) no-repeat -103px top;
}
/* #cwrap
{
	display: block;
	overflow: hidden;
 
	height: auto;
} */
.document
{
	height: 100%;
	width: 540px;
	background: white;
	margin: 0;
 
	opacity: 0.96;
 
	padding: 60px;
	padding-top: 20px;
	overflow: auto;
}
 
a
{
	text-decoration: none;
	color: #5799d1;
}
a:hover
{
	color: #8bccff;
}
.wrapper
{
	padding: 30px;
	padding-left: 40px;
	//display: block;
	overflow: visible;
	width: 10px;
}
#footer
{
	display: block;
	height: 10px;
}
#footer td
{
	height: 25px;
	background: url(img/footback.gif) 0;
	padding: 0;
	margin: 0;
	display: block;
 
}
 
 
 
.bodywrap td
{
	vertical-align: top;
}
 
#menubar
{
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 24px;
	overflow: visible;
	display: block;
}
#menubar li
{
	display: inline-block;
}
#menubar li a
{
	color: white;
	text-decoration: none;
	font-weight: 40000;
	font-size: 12px;
	display: block;
	height: 12px;
	padding-top: 4px;
	padding-bottom: 7px;
	padding-left: 20px;
	padding-right: 20px;
}
#menubar li a:hover
{
	background: url(img/sel.gif) repeat-x;
}
 
 
 
.document h1
{
	font-weight: normal;
	font-size: 24px;
	color: #38649f;
	margin-bottom: 20px;
	font-weight: 300;
}
.document h4
{
	font-weight: 300;
	line-height: 24px;
	font-size: 18px;
	margin-bottom: 30px;
	margin-top: 20px;
}
.document h4 b
{
	font-weight: 600;
}
.divider
{
	border: 3px solid ;
	color: #ecf0f3;
 
}
.widgets
{
	width: auto;
	background: url(img/wback.png) repeat-y -30px;
 
}
 
#footText
{
	width: 100%;
	padding: 0;
	margin: 0;
	color: white;
	font-size: 12px;
 
}
#footText td
{
 
	padding:5px;
	background: none;
	display: table-cell;
}
#footText td.footRight
{
	text-align: right;
}
#footText td.footRight a
{
	color: white;
}
#footText td.footRight a:hover
{
	color: #8bccff;
}

Any help much appreciated!

Best
Edd

eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

quick addendum

Just an addition really - when I set #content { height:500px } for example it works (but obviously not flush to the browser window) - see pic:

Screen shot 2010-02-23 at 01.31.12.png

Many thanks
Edd