Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Location
    Sweden
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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/


  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •