...

View Full Version : About screen resolution and frame backgrounds (newbie).



akiskyd
02-13-2005, 05:45 PM
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?

rmedek
02-13-2005, 07:04 PM
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. :)

akiskyd
02-14-2005, 04:30 PM
Sorry to be late, but I'm taking my exams these days. :D
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!

_Aerospace_Eng_
02-14-2005, 05:34 PM
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

<!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

rmedek
02-15-2005, 11:56 PM
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.

akiskyd
02-16-2005, 11:45 AM
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!!!) :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum