Results 1 to 4 of 4

Thread: Website Lay-Out Design - Changes when Zoomed

  1. #1
    Join Date
    Nov 2012

    Website Lay-Out Design - Changes when Zoomed

    Hi, I have a website that I am working on right now and I need your help. Everything seems to be working now except for one thing. If you view the website in 100% zoom level, the lay-out seems to be in order and okay, like the alignment of the menu.

    However, if you try to change the zoom level to say 130%, the alignment of the menu changes and goes out of place. My client does not want this and he wants to keep the lay-out the same without any changes even if you zoom in or out.

    What seems to be causing this problem, and what are the ways how to solve this? Your opinions and suggestions are really appreciated.

    I really appreciate if you could please take a look at the website at http://www.aljoufilaw.com and try to test the issue that I mentioned above. Thanks so much =)

  2. #2
    Join Date
    Nov 2012
    From my point of view, you are using the wrong measurements, take for instance, your body is 1024px; and your side div is 320px; by the time you re-size your browser or views in a smaller resolution, the size remains constant where by going beyond the required. A quick suggestion is to convert the sizes to percentage.

    <body style="width:1024px;">
    <div id="right-pane" style="width:30%;display:block;height:100%;background-color:#000000;">&nbsp;</div>
    <div id="main-pane" style="width:70%;display:block;align:left;float:left;background-color:#ffffff;">&nbsp;</div>


  3. #3
    Join Date
    Mar 2012
    Why have you mixed DIVs and a table? I think that may have something to do with it.

  4. #4
    Join Date
    Mar 2012
    And the classes seem excessively complex. E.g.:

    id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">

    I cannot make sense of it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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