12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Can this be done? If so how......

by steve m
10 replies
  • WEB DESIGN
    • |
Hi Warriors,

I would just like to pick at some of your brains. I was just wondering if by any chance this can be done.

I would like to make a website that is say for instance a picture frame.

So when you go to the home page a picture frame will apear. Only when you scroll down the picture farme stays in place but the content on the picture will scroll down instaed of the actual picture frame.

I hope I have explaind myself properly, I think you will get where I am coming from.

if theis can be done can you please explain to me how I would go about doing it as I cant seem to figure it out.

Thanks in advance

Steve M
  • Profile picture of the author getsmartt
    Easy answer...create a table 3 colums wide, 3 rows tall in the center cell place an iframe that contains a link to your page of pics.

    table width and iframe will have to be sized correctly

    top 3 cells will contain the top of the picture frame

    bottom 3 cells contain bottom of picture frame

    center left and right cells contain righ and left picture frame

    This could also be acheived with CSS, but is beyond my ability to throw something together quickly.

    Quick ascii layout below *'s contain Images of picture frame X's designate iframe area

    *************
    *************
    **XXXXXXXXX**
    **XXXXXXXXX**
    **XXXXXXXXX**
    **XXXXXXXXX**
    *************
    *************
    Signature

    Was mich nicht umbringt, macht mich stärker

    {{ DiscussionBoard.errors[1337646].message }}
  • Profile picture of the author VisualWebEffects
    ugh please for the sake off all that is right in the world DON'T USE A TABLE.

    you can achieve this by using CSS and Div/Layers.

    3/5 div's and some css and you will be good to go.

    3 div's:

    1: Main Container - this div is the primary parent. it, along with it's style sheet ensure that all it's children are centered in the page no matter what the res of the visitor.

    2: secondary parent - this layer contains the 'picture frame' image as a background.

    3: Content Container - this layer holds the content, manually set it's width and height. Then set the css property: overflow to : auto. this will produce scroll bars when viewed in the browser for content that exceeds the bounds of the layers size.

    --

    alternatively you can add a couple more layers if you want to reduce the 'picture frame' file size and increase page load times. the 'secondary parent' in this case is broken down into 3 layers. 'top of picture frame image', 'Tileable background of picture frame image that makes up the left and right sides of the frame' which also serves to be the parent to the content container, and the footer part of the image or bottom of the picture frame.

    ---

    Tables, please don't use them. Tables were NEVER ment to be used for page layout. their intended purpose form the tiem they were included in the html lang definition were ment for tabular data, or data pulled from a database, data that was ment to be displayed in a cell like format, much like how excel spread sheets display data.

    And even that idea is out the window nowadays.

    I stopped using tables for just about everything save a quick mockup long ago.

    Use Css And Xhtml it is the way to go for modern websites. check out w3c.org for details on it. there is some good tutorials there as well.
    Signature
    VisualWebEffects- Web Application Development, PC Software Development and Identity Design services
    {{ DiscussionBoard.errors[1338554].message }}
    • Profile picture of the author steve m
      Originally Posted by VisualWebEffects View Post

      ugh please for the sake off all that is right in the world DON'T USE A TABLE.

      you can achieve this by using CSS and Div/Layers.

      3/5 div's and some css and you will be good to go.

      3 div's:

      1: Main Container - this div is the primary parent. it, along with it's style sheet ensure that all it's children are centered in the page no matter what the res of the visitor.

      2: secondary parent - this layer contains the 'picture frame' image as a background.

      3: Content Container - this layer holds the content, manually set it's width and height. Then set the css property: overflow to : auto. this will produce scroll bars when viewed in the browser for content that exceeds the bounds of the layers size.

      --

      alternatively you can add a couple more layers if you want to reduce the 'picture frame' file size and increase page load times. the 'secondary parent' in this case is broken down into 3 layers. 'top of picture frame image', 'Tileable background of picture frame image that makes up the left and right sides of the frame' which also serves to be the parent to the content container, and the footer part of the image or bottom of the picture frame.

      ---

      Tables, please don't use them. Tables were NEVER ment to be used for page layout. their intended purpose form the tiem they were included in the html lang definition were ment for tabular data, or data pulled from a database, data that was ment to be displayed in a cell like format, much like how excel spread sheets display data.

      And even that idea is out the window nowadays.

      I stopped using tables for just about everything save a quick mockup long ago.

      Use Css And Xhtml it is the way to go for modern websites. check out w3c.org for details on it. there is some good tutorials there as well.

      Thanks for that. Is a bit confusing though for me bit I'll figure it out. Wil the scroll bar be on the inside content layer or will the scroll bar be where it will normally be on the right of the screen?

      If its in the acctuall midle layer is there a way to make it so it will be where it normally will be on the right?

      Thanks

      Steve
      Signature
      ccleaner
      {{ DiscussionBoard.errors[1338786].message }}
    • Profile picture of the author getsmartt
      Originally Posted by VisualWebEffects View Post

      ugh please for the sake off all that is right in the world DON'T USE A TABLE.

      you can achieve this by using CSS and Div/Layers.

      I knew someone could come up with a CSS layout (as I stated)
      , all-in-all though if you are just using a picture frame and scrolling images inside the frame, there is not really a semantic reason for using CSS, and the table code might even be lighter.

      Again quick and dirty, and it works
      Signature

      Was mich nicht umbringt, macht mich stärker

      {{ DiscussionBoard.errors[1340525].message }}
      • Profile picture of the author cma01
        Originally Posted by getsmartt View Post

        I knew someone could come up with a CSS layout (as I stated)
        , all-in-all though if you are just using a picture frame and scrolling images inside the frame, there is not really a semantic reason for using CSS, and the table code might even be lighter.

        Again quick and dirty, and it works
        I agree with Visual . . . uggh! Tables on a web site are like using wallpaper, a pain to get rid of and usually unnecessary.

        All you really need is one division
        - set the width and height to the dimensions of the picture frame
        - set the picture frame as the background image
        - set the padding to push the content within the frame borders
        - set the content to scroll vertically

        And that's it.
        Signature
        "Wise men talk because they have something to say; fools, because they have to say something."
        ~ Plato
        {{ DiscussionBoard.errors[1340686].message }}
  • Profile picture of the author VisualWebEffects
    yes, the scrollbars are on the right side. that is the default.

    here is a screen shot of a quick picture frame based web page i mocked up this morning to illustrate

    http://www.visualwebeffects.com/test...amewebpage.png
    Signature
    VisualWebEffects- Web Application Development, PC Software Development and Identity Design services
    {{ DiscussionBoard.errors[1339371].message }}
  • Profile picture of the author VisualWebEffects
    oh and yes the entire thing is centered in the browser. the width of the mockup is set to 782 pixels wide.
    Signature
    VisualWebEffects- Web Application Development, PC Software Development and Identity Design services
    {{ DiscussionBoard.errors[1339374].message }}
  • Profile picture of the author steve m
    That is pretty much how I want my page to work. With the content that will scroll in the frame. So its default to have the scroll bar where yours is, there is no way to keep the original one instead?

    If not that wont be to much of a problem.

    Thankyou for your time also

    Steve
    Signature
    ccleaner
    {{ DiscussionBoard.errors[1340305].message }}
  • Profile picture of the author VisualWebEffects
    it is possible, but not 123 for sure. it is probably best to use the default location for simplicity.

    Hit me up via PM and i will send you the sample so you have a base to work with.
    Signature
    VisualWebEffects- Web Application Development, PC Software Development and Identity Design services
    {{ DiscussionBoard.errors[1340488].message }}
  • Profile picture of the author Goinon
    Tables, no tables.........the debate lives on, I started using tables, and as I ahve progressed I have realised that there is defiantely a need to learn CSS if you really want to perfect your craft, if you want soemthing that is for a week or a month, sure don't spend too much time on it, tables for sure, howver if you want something that will be easy to change then go CSS.
    {{ DiscussionBoard.errors[1341693].message }}

Trending Topics