Have something to say? Contribute New Article Reply to this Article
How do I center my page?
I'm currently redesigning my website in Dreamweaver CS5. My site was previously made in iWeb, which centered the page automatically in any browser at any resolution. When I preview my site in Safari using Dreamweaver, the whole page seems aligned left.
Another issue (which I should probably also post in the JavaScript forum) is that a JavaScript menu bar I'm using is sticking even more to the left. Is there any way to align it center, then center the entire page?Any help is appreciated. If you need sample code, please say so.
The
Apple
Newsreel
Welcome to the newly redesigned Apple Newsreel. In the course of the last month or so, I've re-worked the entire site from the ground up to provide a completely different user expreience. Feedback is appreciated on the new look, so please, visit the Contact page and send me an email with your honest opinion.
You will notice that there is a double space between paragraphs. I'm currently working on it; for now, HTML (the programming language this site is written in, much like almost every other site on the web) has many limitations which can be bypassed, but take time. And since I wanted to get the new site up and running as soon as possible, you'll see kinks get fixed over the next few weeks.
The site's already outfitted with all the reviews and most of the news from the old site, and a nifty new menu bar (the grey bar on top of the screen which you can use to easily jump between sections of the site). And to further simplify navigation, I'm including a complete site navigator, which can be found in the "Map" tab.
You'll notice a couple of other features: wide columns, a Facebook "Like" button instead of a whole Facebook widget, and less ads.
Once again, I'd like to ask you to donate if you like the site's content. Being a student, I have no other source of income for the stuff I review. If you do feel like donating, there's an orange PayPal button below. It's a secure connection, so don't worry.
With that, I leave you to enjoy the site.
Sorry, I'm still a bit of a novice to raw code. (I previously just used iWeb, which relies on a design interface). Could you please elaborate?On which part? Divitis is wrapping things in divs that aren't always needed. For instance wrapping an image in a div. You can style any block level element just as you might a div.
As far as the css I suggested. Wrapping your page content in a wrapper div, which is generally a standard practice, allows you to specify a width and then center your page using the margin auto method. Here I used the css shortcut or css shorthand of:
margin: 0 auto;
which basically means margins top and bottom gets 0px or margin, and left and right margins get the auto value and so will automatically center your page no matter what screen resolution someone is using.
I followed your instructions, and added a wrapper-calss to the whole thing
<div class="wrapper", div id="wrapper">And then added a CSS rule to that wrapper with the margin set a auto (as Dreamweaver said that 0 auto is not a default value) to no effect. I then tried setting it to 0 auto despite Dreamweaver's complaints, and still to no effect. This is how my code looks right now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Apple Newsreel - Home</title>
<style type="text/css">
Web {
font-family: "Helvetica Neue";
}
.TitleApple {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.Wrapper {
margin: auto;
}
</style>
</head>
<body>
<div class="Wrapper" id="Wrapper">
<div id="id5" style="height: 41px; left: 464px; position: absolute; top: 112px; width: 68px; z-index: 1;" class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_438_535" style="padding: 0px; font-size: 13px;">
<div class="graphic_textbox_layout_style_default">
<p style="font-size: 36px; padding-top: 0pt; text-align: justify; font-family: 'Helvetica Neue'; font-weight: light; color: #797979;" class="paragraph_style_4">The</p>
</div>
</div>
</div>
<div id="id" style="height: 65px; left: 497px; position: relative; top: 123px; width: 127px; z-index: 1;" class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_438_535" style="padding: 0px; font-size: 13px;">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 48px; color: #CECECE;" class="TitleApple">Apple</p>
</div>
</div>
</div>
<div id="id2" style="height: 33px; left: 587px; position: absolute; top: 123px; width: 113px; z-index: 1;" class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_438_535" style="padding: 0px; font-size: 13px;">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 28px;" class="paragraph_style_4">Newsreel</p>
</div>
</div>
</div>
<div id="id3" style="height: 261px; left: 288px; position: absolute; top: 246px; width: 566px; z-index: 1;" class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_438_535" style="padding: 0px; font-size: 13px;">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple">Welcome to the newly redesigned Apple Newsreel. In the course of the last month or so, I've re-worked the entire site from the ground up to provide a completely different user expreience. Feedback is appreciated on the new look, so please, visit the Contact page and send me an email with your honest opinion.</p>
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple">You will notice that there is a double space between paragraphs. I'm currently working on it; for now, HTML (the programming language this site is written in, much like almost every other site on the web) has many limitations which <em>can </em>be bypassed, but take time. And since I wanted to get the new site up and running as soon as possible, you'll see kinks get fixed over the next few weeks. </p>
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple">The site's already outfitted with all the reviews and most of the news from the old site, and a nifty new menu bar (the grey bar on top of the screen which you can use to easily jump between sections of the site). And to further simplify navigation, I'm including a complete site navigator, which can be found in the "Map" tab.</p>
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple">You'll notice a couple of other features: wide columns, a Facebook "Like" button instead of a whole Facebook widget, and less ads.</p>
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple">Once again, I'd like to ask you to donate if you like the site's content. Being a student, I have no other source of income for the stuff I review. If you do feel like donating, there's an orange PayPal button below. It's a secure connection, so don't worry.</p>
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple">With that, I leave you to enjoy the site.</p>
<p style="padding-top: 0pt; font-family: 'Helvetica Neue'; font-size: 13px; color: #000; text-align: justify;" class="TitleApple"> </p>
</div>
</div>
<p> </p>
</div>
</div>
</body>
</html>
I also can't find a way to get rid of all those divs, as whenever I select one, it highlights a text box that I need.
margin: 0 auto; is actually shorthand for saying margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; (in that order), and as 'teedoff' said, you need to give that div a width in order to center it...
lol ha I forgot about this post and have been sidetracked since yesterday. Until Shaya's post was emailed and reminded me.
As he explained, margin: 0 auto; is shorthand. But again you must specify a width for it to center.
Your code above....margin: auto; is not complete either. You leave out the top and bottom value of 0. So maybe it's griping because you cant set set top and bottom margins to auto, although you probably can, and I've never had DW gripe about this particular style issue.
One more thing, you dont need a div with a class AND id of wrapper. Set it to one or the other. ID's can be used only once on a page, whereas classes can be used over again. For defining page structures(layouts) I normally use id's. So:
works fine just that way.
Then #wrapper {width: 960px; margin:0 auto;}will work for your css.
Thanks, I figured it out. I'll still have to check back on this thread for reference for a short while, but I consider the problem completely solved.
That being said, the time it would take me to de-div all my pages would be incredible, and I'll just opt for re-coding them from scratch.
Once again, thanks!
This question has already been solved
You
View similar articles that have also been tagged:
center dreamweaver html java page
© 2012 DaniWeb® LLC
