Member Avatar for baol

Hi would like to center all my webpage. I am noviced in web design. I have try a lot of different way to make it center but it doesn't work. When i zoom out or in, everything move. I would like that every stay in same place.
Each sub menu(products) does the same problem i don't know how to fix it.
Please if any one can help me. Thank you.

Here is the link of my website:

  • 4 Contributors
  • 8 Replies
  • 269 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Short diagnostic and a compact pattern that usually fixes both the “centered page but images/submenus move when zooming” symptom and the “orange header/footer must span the full browser width” request.

The symptom reported by (images and some submenus shifting at zoom) is usually caused by mixing absolute positioning or percentage offsets with elements that should be inside the centered container. ’s idea to wrap the page and ’s 100%-wide background-behind-centered-content are both on the right track; the example below uses a single centered wrapper and creates true full-width header/footer bands with CSS so there’s no fragile pixel-offset math or extra DOM footers to manage.

<body>
  <div class="site-wrap">
    <header class="site-header">...centered header content...</header>
    <nav class="main-nav">...nav + submenu markup...</nav>
    <main class="content">...images and content...</main>
    <footer class="site-footer">...centered footer content...</footer>
  </div>
</body>
html,body { margin:0; height:100%; }
.site-wrap { width:1000px; max-width:100%; margin:0 auto; position:relative; z-index:2; }
body::before, body::after {
  content:"";
  position:fixed;
  left:0; right:0;
  height:120px;
  background:#f57b00; /* orange band */
  z-index:1;
  pointer-events:none;
}
body::before { top:0; }    /* full-width header band */
body::after  { bottom:0; } /* full-width footer band */
.content img { display:block; margin:0 auto; max-width:100%; height:auto; }
.main-nav .submenu { position:absolute; left:50%; transform:translateX(-50%); }

Practical troubleshooting notes: validate the DOCTYPE/HTML as suggested; look for any element positioned with fixed px/percent offsets (those often break when zooming); center images with display:block;margin:0 auto and use max-width:100% so they scale; for dropdowns avoid left/right pixel offsets — use left:50% + transform:translateX(-50%) or position them relative to the centered container. For the “Bar & Brownies” submenu the most likely cause is an absolutely positioned dropdown tied to the page rather than the wrapper; making it position relative to the wrapper (or using the transform-centering technique) will keep it aligned at all zoom levels.

Recommended Answers

All 8 Replies

Member Avatar for JorgeM

When i zoom out or in, everything move

Can you clarify what it is you mean? When I visited your page, the content appears to be in the center of the screen.

Member Avatar for baol

the think is when u zoom out or in all the pictures are not center anymore.

thks for the quick respond.

Member Avatar for baol

i think that i figure out how to do it.
i am trying to fix all sub menu now. if you want u can check Bar & Brownies sub menu for test

Member Avatar for baol

I have fixed the center problem, now I would like to extend the orange header footer for full page.

Any idea?

Member Avatar for JorgeM

OK, yes with regard to the footer, what I have done in the past is actually have two footers. One footer that spans 100% width, and the other that spans the specified width.

The footer with 100% width is given a lower z-index so it is placed behind the footer with the specified width.

With this approach, no matter what size the browser window is, the page content is centered and the footer spans 100% across the page.

I posted an example on another thread. Take a look: http://www.daniweb.com/web-development/web-design-html-and-css/threads/445182/design-fixed-layout-for-all-computer-screen

Edited by JorgeM
Member Avatar for baol

oki thks a lot

Member Avatar for mattster

When you are trying to center the .navbar ul, the header, content and footers serperatally, it is VERY hard to center them properly at all zooms. Here is probably the easyist way:

<body style="background:url(mainbg.jpg) repeat-x;">
    <div style="width: 1002px;margin:auto;">
    <!-- stick EVERYTHING in here, so its centered. -->

        <div style="background:url(header.jpg);">...</div>

        <div id="content"><!-- content --></div>
    </div>
<div id="footer">...</div>
</body>

If you sort of see what I mean (haven't explained very well), the mainbg.jpg will be the header, nav and content bg's all put together and repeated.

This is the esiest example: here

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.