Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2010
    Posts
    3
    Member #
    23203
    Hey guys,

    I'm new here and new to web design.

    I'm trying to code a website that's horizontally scrolling. *eek* I know, I know. I've attached the basic files and here's the source.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <link rel='stylesheet' href='style.css' type='text/css' media='screen' />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
    </script>
    <script src='js/jquery.localscroll-min.js' type='text/javascript'>
    </script>
    <script src='js/jquery.scrollTo-min.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>
    $(document).ready(function () {
    $.localScroll.defaults.axis = 'x';
    $.localScroll();
    });
    </script>
    </head>
    
    <body>
    <div id="wrapper">
    <table width="200%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a name='blog'></a><img src="images/background/images/blog_bg.gif" width="1399" height="1200" /></td>
        <td><a href='#store'><img src="images/background/images/store.gif" width="201" height="1200" /></a></td>
        <td><a href='#blog'><img src="images/background/images/blog.gif" width="200" height="1200" /></a></td>
        <td><a name='store'></a><img src="images/background/images/store_bg.png" width="1400" height="1200" /></td>
      </tr>
    </table>
    </div>
    </body>
    </html>
    It works great on my monitor, 1600x1200. But for other monitors, I know that it won't be true.

    My question is how do I align it so that the "store" element lines up dead center right on most resolutions? Also, is using tables and images a good idea?

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Gucci's website does horizontal scrolling well.

    Gucci - 2010 fall winter men's ready to wear

  4. #3
    Junior Member
    Join Date
    Aug 2010
    Posts
    3
    Member #
    23203
    It's a good example but not what I want to do. Here's a diagram to explain better what I'm trying to do.

  5. #4
    Junior Member vinnz21's Avatar
    Join Date
    Aug 2010
    Location
    Philippines, now in US
    Posts
    28
    Member #
    23208
    same here, it is nice in my monitor

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Gotcha... can't really explain how to do that in simple terms, so I just did it for ya instead...

    Two-Fold Layout

    Cheers.

  7. #6
    Junior Member
    Join Date
    Aug 2010
    Posts
    3
    Member #
    23203
    Thanks for your help!

    I looked at the page source...I didn't realize that javascript was required. I'll be tinkering with your code and learn a lot from it.


Remove Ads

Posting Permissions

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

Search tags for this page

two sided border website div
,

two sided website

,
two sided website design
,
what is two sided align html
Click on a term to search for related topics.
All times are GMT -6. The time now is 11:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com