SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Images

    Hi,

    I am fairly clued up about HTML and I can do most HTML coding off the top of my head. However, one thing I have yet to come to terms with is background images.

    The sites I have set up so far have used frames, usually splitting the screen into three areas, a header, toolbar and a main viewing area.

    Uptil now I have just used the normal IE border divider (the dull grey thing) to separate the frames areas but I have now decided that I want my sites to look more professional than this.

    On one of my sites I have got a background image on two out of three frame areas, the header and the toolbar. This is just a simple image of a logo and it is repeated (tiled) to fill the whole of the frame. This looks okay but it doesn't look very good where the two frames meet up as the images don't line up with one another.

    What I would like to do, and what I have seen on other sites, is to have a background images in the header and toolbar areas that blend into one another where they meet. For example, I want a blobby type image running up the left hand side of screen to meet and fit in with a similar blobby type background that runs across the top of the screen. But these images wouldn't be tiled, the one image would fill the whole frame, etc. [Hope this is clear???]

    I know how to turn the frame borders off so that isn't a problem, but I would like to learn how to create background images for frames that need to meet up, etc.

    Is it a case of trial and error to get the shapes to match up? What size do I have to make the background images? Will the users screen resolutions effect the images? Is it possible to do this in frames or is there another way of doing it?

    I have found this quite hard to explain so I hope you can understand what I am getting at here.

    I would appreciate any advice.

    Thanks

    Bobski

  2. #2
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Background Images

    Originally posted by Bobski
    Uptil now I have just used the normal IE border divider (the dull grey thing) to separate the frames areas but I have now decided that I want my sites to look more professional than this.
    I'm afraid in that case you would be well advised to stop using frames all together. The disadvantages of using frames (difficulty of bookmarking, confusing navigation, search engines can't index them, bad accessibility for text-reading browsers and browsers like lynx) far outweigh any possible advantages. Dumping frames will also make it far easier to solve your background problem

  3. #3
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try it this way...

    Make one big image that incorporates the header and the toolbar. Then use a program, such as Adobe's Image Ready, to cut the image in two.

    Providing you make sure that the height of the header graphic and the width of the toolbar graphic match that of the frames they will go in, everything should match up.

    I should mention, too, that this doesn't have to be done with frames. You can copy the layout of your frames page with a table and it can also be accomplished using CSS, but unless you know what you're doing here, you could run into problems if you want to support different browsers and resolutions.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, thanks for your replies, much appreciated.

    You have really got me thinking now!

    If you know of any decent examples/tutorials/articles that show you how to create this sort of thing without using frames, could you post a link to them here please?

    I have not worked with CSS before but I have heard of them. Again, if anyone knows of any decent examples/tutorials/articles on the subject then please let me know.

    Just out of interest, my website which I am considering changing can be found at http://www.haddenhamunited.co.uk and I would like change it to look and work similar to this website http://www.footballnews.co.uk. Note how my background images don't line up, etc. but the Football News ones do.

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For what it's worth, don't give up on frames just because SKUNK tells you to. He's a programmer...so his opinion doesn't matter!

    Frames are a perfectly valid method of displaying information. Every point against frames that Skunk mentioned can be overcome with a little elbow grease.

    Besides...if frames were really bad then they would have gotten dropped in the xHTML spec:
    http://www.w3.org/TR/xhtml1/ (Search for frames on that page.)
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They HAVE been dropped from the XHTML spec though - or at least from XHTML 1.0 Strict (they've been relegated to a seperate "XHTML 1.0 Frameset" specification).

    My biggest gripe against frames is ideological (and nothing to do with being a programmer :P). A fundamental concept of the web and hypertext is the idea of documents that link to each other. Framres break this model - instead of a document that links to other documents you get weird hybrid pages that display two or three documents at once all linking to each other in strange ways. Clicking a link in a frame may not even load a different page (most of the time it will change the page viweed in another frame). There are plenty of resources on the web about why frames are a bad idea so I'll leave it at that.

    I haven't used frames on any of the sites I have developed over the past three years and I can honestly say I haven't missed them for a second.

    As for the original question, the football news site that you wish to emulate uses tables for layout rather than frames. Even this form of layout is going out of fashion now as it directly ties the content of your page to the presentation (something which CSS is designed to avoid), but it is favourted by most developers as it is easier to get the same efect across different browsers.

    I recommend redesigning your site to use a table or CSS based layout as opposed to frames. However, if you wish to stick with frames you should be able to get the images to line up by setting the frame borders to 0 and ensuring that the width of your left hand frame is an exact multiple of the width of your background image. Doing so should line up the background images in the two frames that contain them.

  7. #7
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and it seems that frames are due for the chop when XHTML 1.1 rolls around... at least according to the draught specification:
    This document type is essentially a reformulation of XHTML 1.0 Strict using XHTML Modules. This means that many facilities available in other XHTML Family document types (e.g., XHTML Frames) are not available in this document type.
    As I understand it frames will be relegated from the standard specification to an optional XHTML module.

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Skunk, (sorry Creole) frames my seem to make things simple but they are a pain in the butt. When you change resolutions, they doesn't appear the same as the design resolution, plus all the reasons that Skunk mentioned.

    Back in the day when you had to pretty much hand code everything, they were helpful, but now with Dreamweaver, and the ability to use reuse whole sections of code with a single click, it seems to me that this technolgy has become obsolete. And is due to be shelved.


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But there's more to frames than just the desire to reuse code. I personally don't think that's ever been a reason and it's never been a reason for ME to use them. I use frames because I want to display a portion of the site persistently (navigation, banners, etc) as the user scrolls in the other frame. Frames are the ONLY way to do this with plain code (barring any dHTML jiggery).

    All in all,, like I've said before, use the tech that works best for your situation. I personally hope frames stay around as they are darn useful.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't you use Iframes for this?
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  11. #11
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    I use frames because I want to display a portion of the site persistently (navigation, banners, etc) as the user scrolls in the other frame. Frames are the ONLY way to do this with plain code (barring any dHTML jiggery).
    CSS can do this now using "fixed" positioning, and the CSS property required to achieve this effect works in IE5+ (and probably IE4), NS6+, Mozilla and Opera. See here for an example:

    http://cita.rehab.uiuc.edu/courses/2...0/slide15.html

  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, and iframes are fantastic. But their implementation is poor. Frames work properly in every browser.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  13. #13
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Skunk
    CSS can do this now using "fixed" positioning, and the CSS property required to achieve this effect works in IE5+ (and probably IE4), NS6+, Mozilla and Opera. See here for an example:

    http://cita.rehab.uiuc.edu/courses/2...0/slide15.html
    CSS alone cannot accomplish a persistent navigation. That example simply uses fixed (absolute) positioning to remove an object from the regular flow of the document. It does not keep it's position in the WINDOW as the navigation found here does:
    www.plusoneonline.com/home
    As you scroll down in the bottom frame, the top navigation stays in view.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  14. #14
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <sigh>

    Looks like I was wrong - Internet Explorer strikes again. It seems the fine folks at Microsoft conveniently forgot to add support for the CSS fixed property. I use Mozilla so I hadn't noticed this glaring ommission, but sure enough if you visit the page I linked to above in IE the fixed thing doesn't work. I even knocked up my own demo of fixed positioping which works a treat in Mozilla but fails miserably in IE:

    http://www.bath.ac.uk/~cs1spw/demos/...placement.html

    How very frustrating. Looks like frames will be around for a bit longer (or at least until MS get their act together).

  15. #15
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Score :

    Creole 1

    Skunk 0


    Will there be a round 2?


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  16. #16
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Skunk
    <sigh>

    Looks like I was wrong - Internet Explorer strikes again. It seems the fine folks at Microsoft conveniently forgot to add support for the CSS fixed property. I use Mozilla so I hadn't noticed this glaring ommission, but sure enough if you visit the page I linked to above in IE the fixed thing doesn't work. I even knocked up my own demo of fixed positioping which works a treat in Mozilla but fails miserably in IE:

    http://www.bath.ac.uk/~cs1spw/demos/...placement.html

    How very frustrating. Looks like frames will be around for a bit longer (or at least until MS get their act together).
    Skunk...

    I just took a look at the test page in Mozilla...that is indeed a nice property. I don't know if I agree with it being CSS though. It's not strictly presentation. It's nice however. I do indeed wish that IE supported that.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  17. #17
    long gone but not forgotten AljapaCo's Avatar
    Join Date
    Aug 2001
    Location
    Sweden
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Image Ready and i-frames would be nice instead of an ordinary frame site!!
    T O B I A S - S T R A N D H | visit my site here
    OPERA7 /MSIE6 /FireFox 1.1/Win2000 /ADSL /17" Screen /1024x768
    god doesn't create genius, he clones me.............


Bookmarks

Posting Permissions

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