Complex Page Layout

Is it possible to acheive the following?

I am not asking any one to do it. I just need a little direction.

I feel like this can be done with arrays and tables inside of div tags but how could you keep them in sync. And it would mean one div tag overlaping another div tag. Maybe?

My page needs left hand rows of assembly part numbers, top of page would be columns containing detail parts. The right hand needs rows containing update buttons for each record. Then I need a grid where quantities could be inserted at desired intersections of rows and columns. The rows should only scroll vertically and never be out of view. The columns(detail parts) should scroll horizontally between the assembly part rows and the update button rows.

Also, I would like this to be populated initially with jstl in the jsp file.

JSTL and JSP are red herrings. First figure out how you want to do this in HTML without worrying about how it's going to be generated. Only when you have the HTML, script and CSS working as you expect, worry about how to use JSP to generate the data dynamically.

Bear Bibeault wrote:JSTL and JSP are red herrings. First figure out how you want to do this in HTML without worrying about how it's going to be generated. Only when you have the HTML, script and CSS working as you expect, worry about how to use JSP to generate the data dynamically.

Okay, laying aside the data population can you get me headed in the right direction as far as the display goes?

Sounds like straight-forward, if intricate, CSS to me. I'd just go ahead and get started and post back with specific issues.

Bear Bibeault wrote:Sounds like straight-forward, if intricate, CSS to me. I'd just go ahead and get started and post back with specific issues.

A preliminary question. Would be be better to design it with width and height in percentages or specific px's?

Answer: that depends upon whether you want fixed or relative sizes.

Bear Bibeault wrote:Answer: that depends upon whether you want fixed or relative sizes.

I have my div tags set up on my page, however not with scrolling yet.

My first challenge is populating the header columns. I need them vertical which I have done but the width of the columns is the width of the input tag '20' characters. How can I get the TD tag to shrink after the rotation?

I have attached a file so you can see what I am tring to emulate.

I don't seem to be able to attach a file. It is eithe the wrong format or wrong size.

I would say you should code with ems and not hard-coded px values.

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Eric

I was curious if I could sort of pull off what you are trying to do. I have not played with CSS3 stuff in awhile

[fails in IE8 - did not test 9]

<!DOCTYPE html>
<html>
	<head>
		<style>
		
			body{
				font-size: 62.5%
			}
		
			table.report{
				font-size: 1.3em;
				border-collapse: collapse;				
			}
			table.report, table.report th, table.report td{
				border: 1px solid black;
				padding: 0;
				margin: 0;
			}
		
			table.report th.rotate div{
				-webkit-transform: rotate(-90deg);	
				-moz-transform: rotate(-90deg);
				-ms-transform: rotate(-90deg);
				-o-transform: rotate(-90deg);
				/* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */
				transform: rotate(-90deg);
				padding: 0; 
				margin:0;
				width: 1em;
				text-align:left;
			}
			
			table.report th.rotate{	
				width: 1em;
				/*height: 3em;*/
				overflow: hidden;
				text-align:right;
				padding-top: 5em;
			}
			
			
			
		</style>
	</head>
	<body>
		<table class="report">
			<thead>
				<tr>
					<th> </th>
					<th colspan=2">Blah Blah Blah</th>
					<th> </th>
					<th colspan=3">Blah Blah</th>
				</tr>
				<tr>
					<th>Data</th>
					<th> </th>
					<th class="rotate"><div>Column 1</div></th>
					<th class="rotate"><div>Column 2</div></th>
					<th class="rotate"><div>Column 3</div></th>
					<th class="rotate"><div>Column 4</div></th>
					<th class="rotate"><div>Column 5</div></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Product Info</th>
					<td> </td>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Example here: http://jsbin.com/oyigib/2/

I got the matrix working like I needed, except scraped the text rotation.

However, Is there a way to have a crosshair cursor that spans the entire page so the user can easily see the row-column intersection they are currently pointing at?

Steve Dyke wrote:I got the matrix working like I needed, except scraped the text rotation.

However, Is there a way to have a crosshair cursor that spans the entire page so the user can easily see the row-column intersection they are currently pointing at?

Capture the mouse position with mousemove, position 2or more elements to make the lines.

Eric

Eric Pascarello wrote:

Steve Dyke wrote:I got the matrix working like I needed, except scraped the text rotation.

However, Is there a way to have a crosshair cursor that spans the entire page so the user can easily see the row-column intersection they are currently pointing at?

Capture the mouse position with mousemove, position 2or more elements to make the lines.

Eric

Thanks for the response.
I decided to do this a little different also. When a mouseover event fires the header column and row cells highlight to yellow, on the mouseout they change back to default.

You probably want to use mouseenter and mouseleave.

Eric