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: http://operapatisserie.com/wholesale.html

Recommended Answers

All 8 Replies

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.

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

thks for the quick respond.

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

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

Any idea?

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

oki thks a lot

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.