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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    About screen resolution and frame backgrounds (newbie).

    Well, i'm new to web-stuff, and that's my little problem:
    I've made a 3-framed page and cropped a gif in three parts, one for each frame to be used as a background. With the help of some CSS coding, I managed to make them look as one total background. But that's ok in 1024x768 screen res. When I switch the res, the images do not match with one another. How can I solve this?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, if you used percentages for your frames, when you change resolutions you might have a problem here and there. We'd have to see a link or some more info (a screenshot maybe?) to help out, otherwise it's just guesswork.

    Depending on what the site is looking like, you may be able to avoid frames altogether, and find another alternative to using the background images. Sometimes it's easier to use one huge background image that piece three together, and it doesn't always mean more file size or download time.

    Anyhoo, post a link or screenshot and we'll see if we can help you out.

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry to be late, but I'm taking my exams these days.
    Well, I've attached a small screenshot of the main page in 1024x768 res and another to 800x600 res to this post. I've created the frames because I want the links on the left to show their targets in the frame to the right, without the bg images of the top and left frames to be changed. The frames are not by percent. They are exactly the same pixel dimensions as the bg images. Thanks for answering!
    Attached Files Attached Files

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    that same layout can be achieved easily without using a frameset, and you wont have to worry about trying to match up images. You can just use one iframe with the allowtransparency="true" feature just to make IE happy, and then use just one big background image that is centered so no matter what their resolution they wont see a repeat image. Here try this layout I just made
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html,body {
    margin:0px;
    padding:0px;
    height:100%;
    background-color:#FFFFFF;
    background-image:url(yourbackgroundhere.jpg);
    background-repeat:no-repeat;
    background-position:center;
    overflow:hidden;
    }
    #container {
    height:100%;
    }
    #top {
    height:20%;
    width:100%;
    color:#FFFFFF;
    background-color:#000000;
    }
    #holder {
    width:100%;
    height:80%;
    }
    #leftside {
    float:left;
    height:100%;
    width:20%;
    color:#FFFFFF;
    background-color:#000000;
    }
    #content {
    height:100%;
    width:80%;
    color:#FFFFFF;
    float:right;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top">banner area doesn't scroll</div>
    <div id="holder">
    <div id="leftside"><a href="http://www.google.com" target="main">Google</a></div>
    <div id="content"><iframe name="main" src="http://www.codingforums.com" scrolling="auto" frameborder="0" allowtransparency="true" width="100%" height="100%">Your browser does not support frames</iframe></div>
    </div>
    </div>
    </body>
    </html>
    any links you have set their target to "main", the background colors are there just so u can get a visual
    Last edited by _Aerospace_Eng_; 02-14-2005 at 05:40 PM.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    For something like this I'd recommend using one huge background image-- with a monochromatic color scheme like that a gif wouldn't take up too much file size-- and ditching the frames.

    The thing is that the bg images, links, etc would be cached, so when you clicked on a new link it's not as if the page would have to reload that part. If you were using frames for ease of coding I'd recommend using server-side includes.

    Not trying to get you away from frames; I just think that it would be easier to get the effect you're looking for without them.

  • #6
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK guys, thanks for helping me in this. The iFrame is a great idea (first time I hear about iframes, but I told you I'm new in this stuff). I'll search deeper into the matter. There's a lot stuff to learn about HTML and CSS. No need for most posts...(in this thread f course!!!)


  •  

    Posting Permissions

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