4 Replies Latest reply on Mar 15, 2010 10:38 AM by Nancy OShea

    Display Issues - Scaling To page. CS4

    LornaEvil87 Level 1
      I am trying to get my website www.thegees.co.uk to display sitting tight so that it scales to the screen size and pretty much views the same on all pcs. Looking on the one pc in internet explorer it sits tight, the logo and 'click here' are right next to each other and basically the page is filled. Looking on the laptop it has gaps and white space. I've spent hours on this. I just cant figure it out. I've tried 100% tables. I cant get the hang of making the preset templates look how I like. Got a limited knowledge of CSS. Is there something stupid Im missing?? Thanks
      Lorna

        • 1. Re: Display Issues - Scaling To page. CS4
          martcol Level 4

          I think that it is doing what you describe because of the 100% width.

           

          Using 100% width on that element pretty much means 100% of the browser window.  That's why it looks so different on your laptop. I'll bet your laptop is a bit wide screen?  You should see the page on my kick-ar$e 26" monitor!

           

          You could try fixing the width of the table to an acceptable size and just stick it all in a <div id="wrapper"> and centre that on the page? That's the quickest way of dealing with different size monitors.

           

          You centre an element using margin: 0 auto in your CSS - there are a couple of other things to do but you can google it easy enough and find a tutorial if you want.

           

          If you're not too hot on CSS then I think a flexible/elastic/liquid layout is jumping in at the deep end.

           

          Martin

          • 2. Re: Display Issues - Scaling To page. CS4
            LornaEvil87 Level 1

            The person who Im doing it for really wants the whole page filled and everything tight though, so I was advised to use a mixture of div and 100% tables with fixed width element inside. He wants the two images at the top to sit right next to each other - no white space, no matter what browser size. Do you know a way round this? Thanks so much

            • 3. Re: Display Issues - Scaling To page. CS4
              martcol Level 4

              I'm not too good with table layouts but you could use align="right" and align="left" in the cells with those images.

               

              If that's what I understand you are trying to achieve?  Looks cronky to me though!

               

              Martin

              • 4. Re: Display Issues - Scaling To page. CS4
                Nancy OShea Adobe Community Professional & MVP

                Images don't resize to screen width. I think you'll have best results with a fixed width, centered layout.

                 

                Try adding this to your CSS:

                 

                body {width: 900px; margin:0 auto; background:#006600}

                 

                table {background:#FFF}

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com