Help/consulting: 9 page grid with anchor navigation

erneholm · 01-24-2013, 03:33 PM

Hi guys!

I need some consulting on what way to go to make something like this (check image).

The idea is a page that resizes (optional) to the window.
When you first visit the site, it should show #home. Then by clicking anchorlinks you will get to the different parts of the site. I will use a scrollTo script so the visitor see how the page is scrolling, etc. but the problem is getting the layout.

How would you go about. I appreciate any pointers on how to tackle this, or what to google.

Thank you!

PS. Check out the latest site I made if you want

: http://koppi.se/

COBOLdinosaur · 01-24-2013, 06:29 PM

Just a set of divs with a css attribute of float:left;
or
a set of divs with display:table-cell inside a set of divs with display:table-row within a div with display:table
or use a table if the data is tabular

I've got some grid formats here.

Excavator · 01-24-2013, 07:57 PM

Hello erneholm,
I think this might be a little more js than I'm prepared to dig into today. Look at an idea I had for the markup though, using ap so you can place those outer grid elements off the screen -

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="jquery.scrollTo-1.4.3.1.js"></script> 
<style type="text/css">
html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
}
#tl, #tm, #tr,
#ml, #home, #mr,
#bl, #bm, #br {
	height: 100%;
	width: 100%;
	position: absolute;
}
#tl {top: -100%;left: -100%;}
#tm {top: -100%;left: 0;}
#tr {top: -100%;right: -100%;}
#ml {top: 0;left: -100%;}
	#home {top: 0;left: 0;}
#mr {top: 0;right: -100%;}
#bl {bottom: -100%;left: -100%;}
#bm {bottom: -100%;left: 0;}
#br {bottom: -100%;right: -100%;}
</style>
</head>
<body>
	<div id="tl">Top Left</div>
    <div id="tm">Top Middle</div>
    <div id="tr">Top Right</div>
    <div id="ml">Middle Left</div>
    <div id="home">
    	<ul id="nav">
        	<li><a href="#tl">Top Left</a></li>
        	<li><a href="#tm">Top Middle</a></li>
        	<li><a href="#tr">Top Right</a></li>
        	<li><a href="#ml">Middle Left</a></li>
        	<li><a href="#home">Home</a></li>
        	<li><a href="#mr">Middle Right</a></li>
        	<li><a href="#bl">Bottom Left</a></li>
        	<li><a href="#bm">Bottom Middle</a></li>
        	<li><a href="#br">Bottom Right</a></li>
        </ul>
    <!--end home--></div>
    <div id="mr">Middle Right</div>
    <div id="bl">Bottom Left</div>
    <div id="bm">Bottom Middle</div>
    <div id="br">Bottom Right</div>
</body>
</html>

That jQuery ScrollTo can be found here. I'm not sure yet that's the right one for this.