/    Sign up×
Community /Pin to ProfileBookmark

Website Lay-Out Design – Changes when Zoomed

Copy linkTweet thisAlerts:
Nov 21.2012

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 [url]http://www.aljoufilaw.com[/url] and try to test the issue that I mentioned above. Thanks so much =)

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@tulburgNov 21.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.

example:

<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>

</body>
Copy linkTweet thisAlerts:
@jedaisoulNov 21.2012 — Why have you mixed DIVs and a table? I think that may have something to do with it.
Copy linkTweet thisAlerts:
@jedaisoulNov 21.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.
×

Success!

Help @www_aljoufilaw_ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...