SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How do I get my site to appear correctly in different resolutions?

    I am new at the developing side and need some assitance. I work at a very small company where I am both the designer and the webmaster.... Question...I have designed a site in Dreamweaver...it looks fine at 800x600 but at any other resolution the background image starts to repeat its self. Can anyone tell me why and how to fix it? We want to make a good web presence...and this problem isn't a good first impression... Thanks in advance for your help!

  2. #2
    SitePoint Addict Scud's Avatar
    Join Date
    Jan 2002
    Location
    Los Angeles
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stick this code in the head:

    <style type="text/css">
    BODY { background-image:url(back.gif); repeat: NO-REPEAT;}
    </style>


    just replace the name of back.gif with whatever the image is that is repeating.

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you so much....I think I better start studing HTML!!

  4. #4
    SitePoint Zealot bizboostdesign's Avatar
    Join Date
    Jan 2002
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scud: how does that code actually work. It doesn't look familar...

    Also nenew: I think flash websites appear the same in all resolutions. But i don't know if you would want to make a flash site....

  5. #5
    SitePoint Zealot Tiggy's Avatar
    Join Date
    Mar 2002
    Location
    Lancashire, UK
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nenew - actually I would say that peice of code is more CSS than HTML, great for changing the design of your site quickly if you need to.

    bizboostdesign - it works by telling the browsers that support the CSS repeat property not to repeat it.

    A good book on the topic is O'Reilly's "Cascading Style Sheets: The Definitive Guide" - even if it is a little out of date, I still recommend it, got some nice Netscape workarounds in there too!

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You also have a cool thing at criticalmass.com
    try change resolution on screen.

  7. #7
    SitePoint Enthusiast limmystar's Avatar
    Join Date
    Feb 2002
    Location
    Sydney, Australia
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you able to show us the page by adding a link so we can look at it?
    Limmystar

  8. #8
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image

    try making your background image with "blank" space on the bottom and on the right so that when a user with larger screen opens site, he will see background in upper right corner but not in rest of site.

    what i would recommend though is to use a table.
    draw a table in dreamweaver by clicking on the table layout button located on the bottom-right of the toolbar, then click on the draw table button, on the lower section in the toolbar. make your table the size you want it generally, after drawing, there should be a properties box that lets you edit the width and height of the table. set it too sumthin like 750x500 and then add cells using the button next to the table button. make your cells the size of your graphics, and make sure to set these lengths by the pixel in the properties window, making them stay the same all the time

    another way to do it (will not work in IE3) is to use cascading style sheets (CSS) that are fixed to an exact location on the screen. Using CSS you can map multimple images over eachother and create a background image that is behind your other images without setting an actual background file in the site properties window. check this out, www.ineedcameras.com. I used css on that page and have a transparent image for a background that wont move while scrolling text or resizing the browser window.

    Hope this helps at all...

  9. #9
    SitePoint Member
    Join Date
    May 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    but i thought that it isn't possible to get webpages to look exactly the same in all browsers. Is it?
    I like food. It's good. I like CSS, too.

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by me123
    but i thought that it isn't possible to get webpages to look exactly the same in all browsers. Is it?
    Modern browsers that support standards well can come pretty close. That is, if you code using standards-compliant markup. Opera (even version 6) still displays compliant code a bit differently from IE and Mozilla in some cases, but IMO, Opera doesn't yet have a big enough market share to make it matter.

  11. #11
    SitePoint Enthusiast steamengine's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just thankful that browsers have come a long way and are much more standards-compliant now than they used to be 3 years ago! And thank goodness most people have upgraded. :-)

    Those of you who started a few years back will know what I mean. Remember when you couldn't set page margins to zero in... what was it, Explorer 2? Ah, bygones...
    "we make internet"
    celticempire.com

  12. #12
    SPF Lifer
    Join Date
    Apr 2000
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by steamengine
    I'm just thankful that browsers have come a long way and are much more standards-compliant now than they used to be 3 years ago! And thank goodness most people have upgraded. :-)

    Those of you who started a few years back will know what I mean. Remember when you couldn't set page margins to zero in... what was it, Explorer 2? Ah, bygones...
    Ahh, I remember the days. I am also thankful that very few users are using Netscape as of late.

  13. #13
    SitePoint Enthusiast mephitic's Avatar
    Join Date
    May 2002
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what about just using a table. I use a table at about 755 pixels and then everything stays lined up and the same no matter what the res is as long as it's 800x600 or better.

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Westborough, Massachusetts
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mephitic
    what about just using a table. I use a table at about 755 pixels and then everything stays lined up and the same no matter what the res is as long as it's 800x600 or better.
    That's exactly what I've been doing for years to keep control of layout. I design the layout to fit well on the lowest resolution screens and constrain it with a table.

    Another way to prevent a background from repeating is to make the image 1280 pixels wide.
    "Living life in the fun lane!"

  15. #15
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by ThomFoolery
    Another way to prevent a background from repeating is to make the image 1280 pixels wide.
    I know a few people (mostly graphic designers) who have their screen resolution set to 1600xsomething so even making a background that wide doesn't garauntee it won't end up tiling. Using CSS to prevent tiling is a much mor ereliable option.

  16. #16
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nenew: Just use the CSS method that scud described
    Tables and making huge images are really crude ways of achieving this. I beleive this technique works even in the dreaded netscape 4

    Older browsers will simply take no notice of it if they don't support it, and if you implement everything properly you're site should degrade to work quite nicly in older browsers

  17. #17
    SitePoint Zealot DigitalCreation's Avatar
    Join Date
    Jun 2002
    Location
    'down under'
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't it true if you set a 1200 px wide background image to try and prevent tiling you're loading the entire image? So you would be loading that much extra for no apparent reason, .. yeah, .. scuds answer is the way to go.

    just my .02
    Digital Creationz


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
  •