View Full Version : Help/consulting: 9 page grid with anchor navigation

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/


01-24-2013, 06:29 PM
Just a set of divs with a css attribute of float:left;
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 (http://coboldinosaur.com/pages/div-tab-art.html) here.

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 -
<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-"></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%;}
<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>
<!--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>

That jQuery ScrollTo can be found here (http://flesler.blogspot.com/2007/10/jqueryscrollto.html). I'm not sure yet that's the right one for this.