Member Avatar for Just69

Hey, Please help. I have designed my site using Corel Draw X3 then published to html. I then imported the files to Dreamweaver with no problem. Site is working great except that i need the page to automatically adjust to whatever res the user is on to fit the page correctly in the centre. I dont know much about designing in code. I am a graphic designer, so please use very explicit directions on what to do . LOL...thanx Webpage is

  • 5 Contributors
  • 4 Replies
  • 139 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by snuffmigruff

Dani AI

Generated

A quick plan that builds on the replies already here: wrap your whole page in one container, make that container flexible (so it scales with different screen widths), and use a centering technique that matches how you want the page to behave (horizontally centered only, or centered both horizontally and vertically). pointed to a wrapper approach; and touched on centering limits—modern CSS gives simple, reliable options and Dreamweaver CS3 can apply them without deep coding knowledge.

Steps in Dreamweaver CS3

  1. Open your page, switch to Design or Code view and select all page content.
  2. Insert > Layout Objects > Div Tag and give the new div an id like sitewrapper so it contains everything.
  3. Open the CSS Styles panel, create a new rule for #sitewrapper in your external stylesheet, save, then preview in a browser.

Two practical CSS approaches (copy into your stylesheet)

Modern (flexbox — easy horizontal + optional vertical centering)

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: flex-start;  /* change to center for vertical centering */
}
#sitewrapper {
  width: 100%;
  max-width: 980px;
  box-sizing: border-box;
  padding: 0 20px;
}

Legacy fallback (works back to older browsers)

body { text-align: center; }
#sitewrapper {
  display: inline-block;
  text-align: left;
  width: 980px;
  max-width: 100%;
}

Extras and troubleshooting

  • Add <meta name="viewport" content="width=device-width,initial-scale=1"> for mobile scaling.
  • Make images flexible: img { max-width:100%; height:auto; display:block; } so sliced artwork doesn’t break the flow.
  • If Corel-exported HTML used absolute positions or tables, convert those slices into normal block elements inside #sitewrapper (remove inline positioning and width attributes where appropriate).
  • As hinted, replace navigation built with image maps by real anchor links or CSS sprites for better accessibility and indexing.
    Test across browsers and use the browser dev tools to inspect the wrapper and see which rules are taking effect.

Recommended Answers

All 4 Replies

Member Avatar for DigitalExtreme

There are a few ways to do this. The best is to create a div tag and then list it in your css file as center. If you do a quick check on google the first few answers are the best.

Member Avatar for almostbob

and get rid of the graphic maps
they work wonderfully, as,
great way to keep yourself out of google

Member Avatar for MidiMagic

you can center horizontally. You can not center things vertically in a practical way that works on all browsers and computers.

Stop thinking of a webpage as a screenful or as a sheet of paper. Think of it as a scroll.

Member Avatar for snuffmigruff

if you are trying to center horizontally just use css. margin-right:auto; margin-left:auto;

If you are trying to center vertically then I guess my only advice is to quit since it's not possible. Cheers!

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.