• From: israel
  • Registered: 2008-12-22
  • Posts: 26

Topic: resolution problems

hy..

(long time no see.. been in a vacation...)

first of all i want to thank u all and stefan.... because of your help today my father business have his own web site...
and i dont need to tell u what it means this days of economic chaos...

this is my site for now (there is more to be done- more text, photos.. english version.. etc..) -

www.blacksmith-yt.co.il

so... my problem is-

my site wont stay the same in different resolutions.

i work with 768*1024.. but if i change the resolution the site get all messy and disordered..

what code i need to put in so the site wont change no metter which resolution is apllyed?


thanks.. amit

  • Registered: 2009-01-13
  • Posts: 486

Re: resolution problems

Place the following rule on the Body:

margin: 0 auto;

and remove the margin-right: 26 px; from the wrapper to centre the site.

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

thanks but it didnt work..

i thought of replacing all the PX definitions to %...

u think its worth the effort?

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: resolution problems

for starters, add a doctype (HTML 4.01 strict).

This works:

div#site {

width: 950px;

height: 570px;

margin: 10px auto 0;

background: rgb(237,228,201);

}

I am not sure why you think you need the wrapper and the site divisions - I'd think one would be enough.

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

well thelma.. thank u very much!!! big_smile

it helped....

so i guess the "auto" attribute made the difference?? but why? how?



and i have now other problem.. about the Doctype...

is that the right way???-

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

because after i had put this line some elements on the pages got a little messy (the header and the nav bar is crooked)

do u know why?

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: resolution problems

"margin: 0 auto" tells the browser that the body element has a 0 top and bottom margin, and to equally space ("auto") both the left and the right margins.

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

and if i want the top and bottom to be auto to?



other thing... i just found out i have a bigger problem after i added the Doctype... not only the navbar and headers are misplaced..

when i hover on the small images in the gallery.. they didnt become enlarged....

why it hapend? and how can i fix things to be the way they were and also keep the doctype?

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

by the way.. i found out now that the correct line is-

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

but still... the problems are the same...

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: resolution problems

amitte wrote:

by the way.. i found out now that the correct line is-

No, that's not correct - see here: http://www.w3schools.com/tags/tag_DOCTYPE.asp

Use a validator, and make sure there are no coding errors.

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

for starters, add a doctype (HTML 4.01 strict).

that what u said...

now im confused... i wrote in html 4.01...

ok but what of the 3 i need - strict? Transitional? or frameset?

and yep.. i'll try the validator

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: resolution problems

Frameset would be if you were using frames (don't do that).  Of the other 2, strict is best - it forces you to write the cleaner code, while transitional does allow deprecated and presentational elements.  And if you're wondering if you should use HTML or XHTML - read this

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

ok thanks
i'v been using the validator and it solved all of my problems..
another small step.. big_smile

13 Reply by arc

  • arc
  • New member
  • Offline
  • Registered: 2009-08-11
  • Posts: 2

Re: resolution problems

HI all...
I am new to this blog..I have same resolution problem..but I really dont know that I need to insert the div code to CSS or to the main html code..anyone can please help me...I am stuck in this problem since long time...:|


Thank you in advance for ne help....

Arc

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: resolution problems

Arc, how about you start a new topic (rather than just adding on to this one) and fully explain what issue you are having. Post a link and/or the code you are using so we can better help you.

  • From: israel
  • Registered: 2008-12-22
  • Posts: 26

Re: resolution problems

sorry arc.. i didnt understand your q..

if u kindly repeat it more clearly i could be helpfull..

amit

16 Reply by arc

  • arc
  • New member
  • Offline
  • Registered: 2009-08-11
  • Posts: 2

Re: resolution problems

Hi all..
sorry for this late response....I am crating a site and I am having problem with resolution in different browse.

here is the code..


{
<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="95%" id="header">
   
  </table>
  </center>
</div>
<div align="center" >
  <center>
    <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="95%" id="main" cellpadding="0">
        <tr>
              <td width="189" valign="top" bgcolor="#EEEEEE">
              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="leftnav">
             
         </table>
              </td>
                    <td width="70%" valign="top" style="padding-left:10px; padding-top:4px; padding-bottom:10px; padding-right:10px">



                    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="body">
                      <tr>
                        <td width="100%"> |BODY| </td>
                      </tr>
                    </table>
              </td>
                          <td width="173" valign="top">
                          <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="rightside">
                            <tr>
                       
       <td width="100%">
            </td>



                            </tr>
                           
                          </table>
              </td>
                              </tr>
                                                                                                                      </table>
                                                                                                                        </center>
                                                                                                                        </div>
                                                                                                                       
<div align="center">
  <center>
    <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="95%" id="footer" cellpadding="0">
                                  <tr>
                                        <td width="100%" valign="top" align="center" bgcolor="#44556F" style="padding: 5">
                                              <a href="index.html">HOME</a> |
                                              <a href="info.html">INFO</a> |
                                              <a href="ind.html">SITE MAP</a> |
                                              <a href="contact.html">CONTACT</a> |
                                            </td>
      </tr>
    </table>
  </center>
</div>

<div align="center">
  <center>
    <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="95%" id="footer2" cellpadding="0">
                                                            <tr>
                                                                  <td width="100%" valign="top" align="center"> |FOOTER| </td>
                                                                      </tr>
                                                                         
                                                                                                                      </table>
                                                                                                                        </center>
</div>

}

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: resolution problems

Arc  - I think resolutions may be the least of your problems.  The center tag is deprecated, tables should be used for tabular data and not layout - plus, you have a couple tables in there that don't even have any rows or cells.  And when you say "padding: 5" --- 5 what?  px, %, em, cm, or o'clock?

Any chance you can just post a link so we can see the entire page?