CodingForums.com - Help/consulting: 9 page grid with anchor navigation

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Help/consulting: 9 page grid with anchor navigation (http://www.codingforums.com/showthread.php?t=286375)

Help/consulting: 9 page grid with anchor navigation

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/

http://12manytimes.com/projects/gridlayout.jpg

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.

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.