need some help with 960 grid

syn3rgyz · Mar 25, 2011

Doing this as a class group project, I'm doing the front end while other members are doing the backend. I'm using the 960 grid system, to try and position everything. It is my first time really doing a project using CSS and the 960 grid system.

I'm using javascript to include other html files.Excluding the header and footer, I created 6 divs for the main content area and want each div to include a different html file. 2 Rows of 3 divs.

The problem I have come across is that the divs are stacking ontop of each other and I cant really control how wide each div is even though i gave it a grid_8 class. On top of that they are stacking ontop of each other, and it gets cut off at the bottom even after I scroll down. I also want to make the footer stay at the bottom but instead of being fixed on the bottom of the browser at all times I want to scroll all the way down to be able to see it.

Here is what it looks like atm, I gave borders to the divs so you can see how they are stacking http://i53.tinypic.com/2lbzgp.png

Any help is appreciated.

Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript" src="javascript/jquery-1.5.min.js"></script>
<script type="text/javascript" src="javascript/ticker.js"></script>
<script type="text/javascript" src="javascript/stock.js"></script>
<script type="text/javascript" src="javascript/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="javascript/dataTable.findRow.js"></script>
<script type="text/javascript" src="javascript/jquery-ui.1.8.10.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.metadata.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script type="text/javascript" src="javascript/jquery-impromptu.3.1.min.js"></script>
<link rel="StyleSheet" href="css/jquery-ui-1.8.10.custom.css" type="text/css" >
<link rel="StyleSheet" href="css/examples.css" type="text/css" >
<link rel="StyleSheet" href="css/client.css" type="text/css" >
<link rel="StyleSheet" href="css/style.css" type="text/css" >
<link rel="StyleSheet" href="css/960_24_col.css.css" type="text/css" >
<link rel="StyleSheet" href="css/text.css" type="text/css" >
<link rel="StyleSheet" href="css/reset.css" type="text/css" >
</head>
<body>
	<body>
	<div class="container_24" style="border: yellow solid 1px;">
		<!-- HEADER BEGINS -->
		<%@include file="header.html" %>
		<!-- HEADER ENDS -->
		
		<!-- MAIN CONTAINER BEGINS -->
		  	<!-- BEGIN ROW 1 -->
		  	<div id="topleft" class="grid_8" style="border: red solid 1px;" width="25%" height="100%">
		  		<%@include file="topleft.html" %>
		  	</div>
		  	
		    <div id="topcenter" class="grid_8" style="border:blue solid 1px;" width="25%" height="100%">
		  		<%@include file="topcenter.html" %>
			</div> 	
			
			<div id="topright" class="grid_8" style="border: green solid 1px;" width="25%" height="100%">
		  		<h1>TOP RIGHT BLAH BLAH</h1>
			</div>
			<div id="clear"></div>
			<!-- END ROW 1 -->
			
			<!-- BEGIN ROW 2 -->
			<div id="bottomleft" class="grid_8" style="border:green solid 1px;" width="25%" height="100%">
		  		<%@include file="bottomleft.html" %>
		  	</div>
		  	
		    <div id="bottomcenter" class="grid_8" style="border:red solid 1px;" width="25%" height="100%">
		  		<%@include file="bottomcenter.html" %>
			</div> 	
			
			<div id="bottomright" class="grid_8" style="border:blue solid 1px;" width="25%" height="100%">
		  		<h1>BOTTOM RIGHT BLAH BLAH</h1>
			</div>
			<!-- END ROW 2 -->
				
		 <div class="clear"></div>
		<!-- MAIN CONTAINER ENDS -->
		
		<!-- FOOTER BEGINS -->
		<div id="siteinfo" class="grid_24">
	    	<%@include file="footer.html" %>
		</div>
		<!-- FOOTER ENDS -->
	</div>
</body>
</html>

*edit forgot to mention i've put <div id="clear"></div> into the header.html and footer.html etc

calebb · Mar 26, 2011

That was written by one of my roommates in college. I'll send him an IM & let you know if he has time to take a look at your post!

Quickly glancing through your code, it looks like you might not be nesting your divs correctly... I assume you've gone through their example code or some of the 960 code generators on the web? i.e., this one

syn3rgyz · Mar 26, 2011

Ive gone through a few example codes, but I didnt use their code generator. Wasnt quite sure how to use it effectively since im including some different html files into it.

At first I feel like im not nesting my divs properly either and I spent a whole day checking my code over and I didn't wanna post on here and ask unless I'm really stuck.

syn3rgyz · Mar 27, 2011

anyone can suggest where else I can get help, since I'm like stuck right now with the project.

wags · Mar 31, 2011

I'm taking a couple stabs in the dark, but here's what jumped out at me. First, is there a reason you're using the "loose" doctype? I don't know how important it is for the 960 grid system, but it looks like the demo sites all use "transitional" or higher (up to html5).

Second, have you tried stripping out some of your extras to see if you can get the basic layout to work? I would make a test page that doesn't have all that JavaScript, and maybe trim out some of the extra CSS if you can. Those included html pages could be tricky... what kind of markup is contained in those? Try adding some static text to those divs while you build the framework of your page. If everything looks good, start adding it all back in until you pinpoint what is causing it to break.

It's a little tedious, but maybe that will help! Good luck!

Jonowxeno · Mar 31, 2011

I just took a look at your code.

1. You aren't linking correctly to the CSS file, you have "css/960_24_col.css.css" Get rid of the extra .css then it should apply classes.
2. You have two <body> tags, remove extra
3. Remove all the width="25%" you don't need to set the width since the css has it set.

I'll post code correct code once I download the 960 grid.

EDIT: Here you go, I had to take off the borders because it adds width to the boxes which means it wouldn't fit the 3 columns. You can re-insert your includes in the relative boxes

Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="javascript/jquery-1.5.min.js"></script>
<script type="text/javascript" src="javascript/ticker.js"></script>
<script type="text/javascript" src="javascript/stock.js"></script>
<script type="text/javascript" src="javascript/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="javascript/dataTable.findRow.js"></script>
<script type="text/javascript" src="javascript/jquery-ui.1.8.10.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.metadata.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script type="text/javascript" src="javascript/jquery-impromptu.3.1.min.js"></script>
<link rel="StyleSheet" href="css/jquery-ui-1.8.10.custom.css" type="text/css" >
<link rel="StyleSheet" href="css/examples.css" type="text/css" >
<link rel="StyleSheet" href="css/client.css" type="text/css" >
<link rel="StyleSheet" href="css/style.css" type="text/css" >
<link rel="StyleSheet" href="css/960_24_col.css" type="text/css" >
<link rel="StyleSheet" href="css/text.css" type="text/css" >
<link rel="StyleSheet" href="css/reset.css" type="text/css" >
</head>
<body>
<div class="container_24">

	<div id="topleft" class="grid_8">
		<p>TOP left</p>
	</div>
	<div id="topcenter" class="grid_8">
		<p>TOP center</p>
	</div>
	<div id="topright" class="grid_8">
		<p>TOP RIGHT </p>
	</div>
	<div id="clear"></div>
	<div id="bottomleft" class="grid_8">
		<p>BOTTOM Left</p>
	</div>
	<div id="bottomcenter" class="grid_8">
		<p>BOTTOM center</p>
	</div>
	<div id="bottomright" class="grid_8">
		<p>BOTTOM RIGHT BLAH BLAH</p>
	</div>
	<!-- END ROW 2 -->
	<div class="clear"></div>
	<!-- MAIN CONTAINER ENDS -->
	<!-- FOOTER BEGINS -->
	<div id="siteinfo" class="grid_24">
		<p>Footer Goes Here</p>
	</div>
	<!-- FOOTER ENDS -->
</div>
</body>
</html>

Jonowxeno · Mar 31, 2011

Oh ya, and for your footer issue, your footer should be at the bottom of the page with your current code. The reason it doesn't and because you have no content to push it down. If you always want it at the bottom even with no content take a look at this
StickyFooter

syn3rgyz · Apr 1, 2011

^ thank you for your help so much I have no idea how I missed all those, I inserted the include html files, and now the first row shows up fine, but the bottom left div is stuck under the top right div now. Also the footer doesn't get pushed down even with more content, I just get a scroll bar and the content in the middle will scroll down, it makes it look like i'm using frames.

Jonowxeno · Apr 2, 2011

I'll need to see your new code + non-960 css you're adding to see whats wrong. Or if you have a url, I can look at whats going on too.

syn3rgyz · Apr 2, 2011

I'll try to find a host to upload it to, as of now every things local

syn3rgyz · Apr 3, 2011

I uploaded the files to a host but the javascript doesn't seem to be working
http://synergy.elementfx.com/SwiftTrading/WebContent/

it seems like currently if the top right div has too few content, the bottomleft div gets pushed to appear right underneath the top right div

Jonowxeno · Apr 3, 2011

Are you guys working on it right now? I tried the link and first I got a server error, then I got a blank page with nothing in the source code.

syn3rgyz · Apr 3, 2011

that is a free webhost I found to upload it to so its a different server. Thats weird though, all i see is the source code for my jsp file which looks like what you gave me. Maybe you should try again, if not try adding index.jsp to the path then click login and the email should be [email protected] password is test

Jonowxeno · Apr 4, 2011

Looks like your free hosting doesn't support JSP files so they're aren't compiling hence just the source code is showing up. It looks like the free hosting is just PHP and the paid hosting also supports ASP.NET but I don't see JSP support from quickly looking over their site.

But looking at the source code, it looks like you took off the class="grid_8" from the div columns.

syn3rgyz · Apr 4, 2011

that is the index.jsp where the user logs in and the divs are set to invisible so that when they click login the divs appear, the client.jsp is the one that shows the dashboard with the 2 rows and 3 column divs
http://synergy.elementfx.com/SwiftTrading/WebContent/client.jsp
do you think it will fix it if i change it to an html file and enclose the javascript files in <script> tags?

when i asked this question on stackoverflow someone mentioned that no one uses jsp pages anymore, so if i were to do this how else would i be doing it while still having the javascript parts work

Jonowxeno · Apr 5, 2011

Ok I just want to clarify couple things first.
.jsp = Java Server Pages (there still are websites using it, but PHP, ASP.NET, Ruby are more common) I don't think you're actually using Java anywhere, so you can re-write like below
javascript = scripting language, the code between the <script> tags are javascript and in those .js files

You could rewrite the page like so and rename it to index.html if that free hosting has Server Side Includes parsing enables (it should otherwise you can enable it in .htaccess but I don't know if free hosting allows you to put one)

Notice the difference in how to use include.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="javascript/jquery-1.5.min.js"></script>
<script type="text/javascript" src="javascript/ticker.js"></script>
<script type="text/javascript" src="javascript/stock.js"></script>
<script type="text/javascript" src="javascript/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="javascript/dataTable.findRow.js"></script>
<script type="text/javascript" src="javascript/jquery-ui.1.8.10.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.metadata.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script type="text/javascript" src="javascript/jquery-impromptu.3.1.min.js"></script>
<link rel="StyleSheet" href="css/jquery-ui-1.8.10.custom.css" type="text/css" >
<link rel="StyleSheet" href="css/examples.css" type="text/css" >
<link rel="StyleSheet" href="css/client.css" type="text/css" >
<link rel="StyleSheet" href="css/style.css" type="text/css" >
<link rel="StyleSheet" href="css/960_24_col.css" type="text/css" >
<link rel="StyleSheet" href="css/text.css" type="text/css" >
<link rel="StyleSheet" href="css/reset.css" type="text/css" >
</head>
<body>
<div class="container_24">
	
	<!-- HEADER BEGINS -->
	<!--#include file="header.html" -->
	<!-- HEADER ENDS -->
	
	<div id="topleft" class="grid_8">
		<!--#include file="topleft.html" -->
	</div>
	<div id="topcenter" class="grid_8">
		<!--#include file="topcenter.html" -->
	</div>
	<div id="topright" class="grid_8">
		<!--#include file="topright.html" -->
	</div>
	<div id="clear"></div>
	<div id="bottomleft" class="grid_8">
		<!--#include file="bottomleft.html" -->
	</div>
	<div id="bottomcenter" class="grid_8">
			<!--#include file="bottomcenter.html" -->
	</div>
	<div id="bottomright" class="grid_8">
		<!--#include file="bottomright.html" -->
	</div>
	<!-- END ROW 2 -->
	<div class="clear"></div>
	<!-- MAIN CONTAINER ENDS -->
	<!-- FOOTER BEGINS -->
	<div id="siteinfo" class="grid_24">
	   <!--#include file="footer.html" -->
	</div>
	<!-- FOOTER ENDS -->
</div>
</body>
</html>

Otherwise, you can re-write in PHP using php includes, see this page

syn3rgyz · Apr 6, 2011

I'll try your suggestion out when I get home, I didn't really know what jsp pages were used for.
I think they are using something called servlets in the backend, maybe that has something to do with java.

need some help with 960 grid

syn3rgyz

Gawd

calebb

[H]F Junkie

syn3rgyz

Gawd

syn3rgyz

Gawd

wags

Weaksauce

Jonowxeno

Limp Gawd

Jonowxeno

Limp Gawd

syn3rgyz

Gawd

Jonowxeno

Limp Gawd

syn3rgyz

Gawd

syn3rgyz

Gawd

Jonowxeno

Limp Gawd

syn3rgyz

Gawd

Jonowxeno

Limp Gawd

syn3rgyz

Gawd

Jonowxeno

Limp Gawd

syn3rgyz

Gawd