Newbie - Amatuer webdesigner struggling with CSS/Screen resolution Problems

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Rufanuf
    New Member
    • Nov 2006
    • 5
    #1

    Newbie - Amatuer webdesigner struggling with CSS/Screen resolution Problems

    Hi all,

    I hope I can find a charitable knowledgeable person to help me!

    Im an amatuer webdesigner, I am learning webdesign so I can create a dynamic website for my business.
    My first ever website was designed using Xara...but I very quickly became aware of its limitations, and so went about studying CSS and HTML so I could try and design a site from scratch.

    Several months later!! Im 80% towards getting my own design live, but my problem is having only ever worked in one screen resolution, to my dissapointment I put the site live and emialed a few friends and they mostly said the site was broken the link to my site is here. (Are we allowed?)

    http://www.siamfishing tours.com/Mynewwebsite2/Index.htm

    Can anyone give me some lines of CSS that might make the site work properly in other screen resolutions please.

    The biggest issues seem to be with overlaping columns of text, and pictures that are a fixed size, getting lost behind columns etc.

    Thanks


    Ruf
    Tags: None
    • AricC
      Recognized Expert Top Contributor
      • Oct 2006
      • 1885
      #2
      I've noticed problems with the 800x600 and 1280x1024. The first problem you are having is that your background image is 1024px wide so when the resolution is greater than 1024 your image will repeat. You may want to consider a background image that repeats.

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Let's get your page started out right. First, your doctype is incomplete and puts IE into quirks mode. Use this one:

          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

          Second, you have some closing tags like this, />, which are Xhtml only. Remove the slash.

          Then, use the W3C html validator and the CSS Validator to find and fix your errors. Don't use them until you fix the first two items. Don't forget the size issue mentioned by AricC.

            Comment

            • Rufanuf
              New Member
              • Nov 2006
              • 5
              #4
              Originally posted by AricC
              I've noticed problems with the 800x600 and 1280x1024. The first problem you are having is that your background image is 1024px wide so when the resolution is greater than 1024 your image will repeat. You may want to consider a background image that repeats.
              Hi Aric C,

              Thanks for your input. The problem I have is that the single (non repeating in the horizontal plane) background Im using is an integral part of the design. It is suppose to resemble the sky fading from day time (behind the palm trees) to nighttime (behind the night scene). Its a part of the design I would liek to keep if at all possible. Obviously if I use some sml repeaing imagery for the background (in order to overcome screen resolution fitment) I will lose this gradient effect....any suggestions? I noticed a lot of designer have their whole site just design to 800 wide, and then have a command (which I dont know) that centres the whole thing...then as screen resolution increase they simply have a wider and wider pale bule band (the default colour in HTML) either side of the site content.....how is this achieved? What CSS command centres a site in the viewport?

              Thanks

              Ruf

                Comment

                • Rufanuf
                  New Member
                  • Nov 2006
                  • 5
                  #5
                  Originally posted by drhowarddrfine
                  Let's get your page started out right. First, your doctype is incomplete and puts IE into quirks mode. Use this one:

                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">

                  Second, you have some closing tags like this, />, which are Xhtml only. Remove the slash.

                  Then, use the W3C html validator and the CSS Validator to find and fix your errors. Don't use them until you fix the first two items. Don't forget the size issue mentioned by AricC.

                  Thanks Dr Howard,

                  I was aware I was running in quirks mode it was the only way I could seem to get the site to function at all! Im taking your advice and trying to amend this now, also taken out the XHTML slash mark after the stylesheet command (thats the only one I could see?)

                  But what Im really interested to understand is how others make their sites appear presentable in all 3 resolutions, without losing their design integrity. Or is this simply not possibly when working with background images that do not scroll left to right???

                  Thanks

                  Ruf

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      The reason they are overlapping is because the divs inside content, and content itself, are all positioned absolutely. This will remove them from the normal flow which is why they will overlap each other.

                      What you can do is float the divs and set a width. (I'm leaving the house right now so I must be brief). Take the divs inside content and add float:left; width: 30%; and that should line them up in a row. You may have to set the right one as float: right; Remove the position: absolute; though.

                      Experiment with that and google for help if you need it but see if that gets you started.

                        Comment

                        • cassbiz
                          New Member
                          • Oct 2006
                          • 202
                          #7
                          I found this tutorial which I believe will help you.

                          CSS Tutorial

                            Comment

                            • PlexusMaldon
                              New Member
                              • Nov 2006
                              • 8
                              #8
                              Originally posted by cassbiz
                              I found this tutorial which I believe will help you.

                              CSS Tutorial
                              also, ref your gradient issue, have a look on Techrepublic.co m - if my memory serves me correctly there's a couple of articles on there about making colour-gradient backgrounds with CSS.

                                Comment

                                • AricC
                                  Recognized Expert Top Contributor
                                  • Oct 2006
                                  • 1885
                                  #9
                                  To make it 800px use width: 800px in your CSS then add margin-right: auto; margin-left: auto to center it.

                                    Comment

                                    • Rufanuf
                                      New Member
                                      • Nov 2006
                                      • 5
                                      #10
                                      Thanks for your comments here gentlemen...

                                      Ive now put my site live...dysfucnt ional as it is, in the hpe some people may help me correct the CSS

                                      Thanks

                                        Comment

                                        • Rufanuf
                                          New Member
                                          • Nov 2006
                                          • 5
                                          #11
                                          PS:

                                          The CSS is here:-

                                          http://www.siamfishing tours.com/no1stylesheet.c ss

                                          I think a big part of my frustration revloves around wanting the image in .bg to stretch and fit into the viewport, to creat the desired effect regardless of the users screen resolution.

                                          To date I cannot make this stretch command work in anything other than quirks mode, which means I cant validate the site as well (another drawback)

                                          So any CSS genuises out there can help me make this site render in all (most) browsers, without losing its design integrity
                                          ....a few days free holiday up for grabs!!!

                                          Cheers

                                            Comment

                                            Previous template Next
                                            Working...