Centering CSS Website that is already created and published

Sigh. No DTD, 37 html errors. Did it possibly occur to you that the sticky messages on the top of the forum message list were there for a reason?

Wrap the whole page in a div of id #wrapper with these properties:

#wrapper {
    position: relative;
    margin: 0 auto;
    text-align: left; /*required due to IE centering hack*/
    width: 750px; /*adjust as needed*/
    }

body {
    text-align: center; /*centering hack for IE*/
    }

Use what I've given you, and get your church page published. Then study up on html and css so you can go back and recode it properly. It's a simple page and will be a good one on which to learn.

cheers,

gary

pricer1969 I'm afraid that you will probably need to understand and work with elements and layouts that are constructed with respect to the 'flow' of elements. Centering a site is simplicity itself in modern browsers and essentially involves a overall wrapper element that has a width and auto margins to center that in the viewport.

However you must first understand the use of a correct Valid DTD, how to validate markup to correct your errors and then why you must not use position:absolute as a positioning device for every single element on the page, normaly there is no need to use the position property and then when one does then often it is actually the float property that is used to place items within the space.

Hugo.

Thank you all for your comments. I do appreciate the fact that you weren't too hard on me. This website isn't the best by any means; however is used quite a lot. I'm never going to be an Elite Web Designer; just a volunteer who knows a little about this stuff to the point of publishing the site for our Church. I will, however attempt to resolve my issues with the advice given. I did wrap the site with the code provide, but to no avail it didn't work.

Thanks for you site and your skills and your input to our church's site!

I will take a stab and say the the reason the centering didn't work is because of all the position:absolute you have in there.

That kind of design doesn't need it.

Thanks again for the advice; I did remove all of the position: absolute code from the css script and still the same result. I'll keep trying!

Having removed all the position absloute will of course leave you without a layout as such with the elements just flowed in their natural order so it will need to be re-thought in respect of how the elements are placed, but first some essential errors need to be corrected.

You have no DTD so please copy and paste this to the very top of each page:

In the html tag you have some nasty MS stuff please remove.

In your stylesheet file you have a style tag which needs removing:

<style type="text/css">{  }

also in the markup you have a link tag in the body after the head elements close which will need to be removed

Although you have described some rules for #wrapper I don't see the actual element in the markup? is it there?

If you can get these things done then you're starting to head in the right direction.

Hugo.

Did all of that - and Wow does it look messed up. Please check mfpc.ca/index1.html I removed it from the web temporarily until I fix this up. If you can continue to help that would be great. Thanks for the help so far.

having removed the postion absloutes it will look a little strange.

there are a couple of things you will need to do:

If possible place an original copy of the page back up so that people can see the intended layout design.

loose the font tags, font tags shouldn't be used they are deprecated and need to be replaced by semantic markup elements.

loose all the non breaking spaces, you use CSS properties to acieve styling.

Loose all the inline styling. inline styling should be avoided especially where it comes to helping as it's impossible to overide them.

The content will need to be looked at from the point of view of placing it in semantic elements rather than empty generic div elements

"loose the font tags, font tags shouldn't be used they are deprecated and need to be replaced by semantic markup elements."

Could you please provide an example of how to do this - I'm sure it's basic CSS/HTML stuff but I'm not really exacly sure how to do this.

By non breaking commands I assume you mean "br"?
Lose all inline styling? Provide an example if you woulnd't mind? Would this be: style="width... etc.?

Thanks so much for your patience and understanding!

Could you please provide an example of how to do this - I'm sure it's basic CSS/HTML stuff but I'm not really exacly sure how to do this.

Have a look at the size of your text on the page. If you're using font tags to make the text appear big and bold, chances are you should use a header tag. If it's italic? Use <em>. Paragraphs? But the text in <p> tags.

Yes. Use bottom-margins instead.

Yes. Give the element an ID and target it that way.

I am now using percentages to place the Div's on the page. Nothing seems to be working with placing. Everything keeps moving around when I place one div - the other will move. Please help!

please check out: mfpc.ca/index1.html

Also I have attached the .css file for you all to look at. Please continue to help me if you can.

http://www.mfpc.ca/image001.gif

Is your site supposed to sit inside this image and not flow over the edges?

If so, it may make sense instead of using an image, to simply use a containing div with a white background and thick grey border.

This last code {border: width style......} is very new to me. I place the border width, then the style's mean what; also the omg color? Please help me, as this sounds like it could solve my problem. However, what about using % to place my div commands?

THIS HAS BECOME A VERY FRUSTRATING EXPERIENCE FOR ME - PROBABLY BECAUSE I AM NOT EDUCATED ENOUGH IN CSS - ALL I WANTED TO DO WAS CENTER MY EXISTING WEB PAGE. THANKS FOR ALL YOUR HELP ANYWAY!

Oh please ignore that, that was just my signature, a piece of irrelevant code designed to get a laugh

Keep at it, you'll get it into a workable state and feel great about how much you've learnt and feel a great sense of pride.

Try what I suggested, use a wrapper div and a solid grey background?

Ok, please have a look at the site now. The grey border, white background worked amazing. Thank you. But the rest of the page has shifted right a little and I'm not sure how to bring it back.

mfpc.ca

Your content breaks out of the box, but that's another matter.

Next step is to get the images out of the HTML, and use image-replacement.

Change this:

.logo{position: absolute;
top: 10px;
left: 7px;
height: 200px;
width: 765px;
z-index: 1;}

to this:

Mount Forest Pentecostal Church

h1 {
height: 200px;
width: 765px;
background: url(MFPClogo.png) no-repeat;
}

Hey, that worked great!

mfpc.ca/index1.html

What is next?

Er, you actually have to put the title inbetween the H1 tags, that's the whole point of image replacement.

What I forgot to code was moving the text, add text-indent: -99999em; to H1 {}

the next step is to do a similar thing with the items under the main logo.

Change this:

to this:

• Staff
• Missions
• Beliefs
• Core Values
• Sermons
• Movie Night

and put it in the HTML directly under the H1.

See if you can then style that in a similar way as we did the H1. Let me know if you get stuck!

Okay, I will do this even with the H1 - but you see the words across the screen then. hmmm..... I'm assuming this last piece of code that your forgot will take care of that. Thanks again.

Yes

Do I style each of the ID's or just the Button one? I actually did this and the results are on mfpc.ca/index1.html None of my button.gif pics showed up for some reason.

Let me know how to place these in different places. ie My logo needs to be shifted to the right a hair. Thanks again!

Move it under the H1 in the HTML code. We'll get round to removing the absolute positioning later

You can target ALL the list items with:

ul#buttons li {

}

This is a start:

ul#buttons, ul#buttons li { list-style: none; /* Removes the disc */ margin: 0; padding: 0; /* Zeroes the padding and margins */ }

ul#buttons li a {
display: block;
width: width of button;
height: height of button;
text-indent: -9999em;
}

ul#buttons li#but-staff a { background: url(images/staff.png) no-repeat;}
ul#buttons li#but-mission a { background: url(images/mission.png) no-repeat;}

Aight, that is working great. If you wouldn't mind, I would like to continue. This is very much helping. Thanks! mfpc.ca/index1.html

I have the whole left side re-coded to the proper format - but am unsure what to do about the right side. If you can assist me here, I should be able to fix it up. Thanks again.

Now we can move onto columns and floats.

Basically, what you're going to do is split the site up into two columns, the left and right.

Your left column will contain the logo, nav items, the image, and the other links.

The right will contain the stuff in the right hand box.

At the moment your content expands out of the right box, we can fix that with proper HTML.

Add two containing divs, so your site becomes:



Now what you'll need to do is recode the navigation in the top right of your site with an unordered list, like we did with the navigation on the right.

Have a go at that, then I'll explain about the curved borders

Ok Thanks! I did go ahead and place some items on the site using top: ??px; and left: ??px; Not sure if this is correct or not. Anyway I really do appreciate all the help. Have a look at the file attached below to see if I'm doing this correctly.

It's not, not for a site like this.

Forget about the positioning for now, in fact delete all the AP and top/left statements from the CSS for now.

We've got to get it marked up semantically FIRST, and then we'll move the bits around.

Sorry sent the wrong file! Oops!

I'm having a hard time with this stuff. I've made an attempt to make some of this work, but to no avail. mfpc.ca/index1.html I will attach the updated .css file with some of the work that I've done. Have a look and let me know what's happening. Thanks!

Pricer while it is admirable that you do try and work out stuff for yourself, in this instance I would hang back and just follow TPH's guidance, he's taking you through the construction in a very methodical and logical fashion , and you may find it frustrating if you are adding stuff and then having to remove it all the time.

In preperation for the next tranch of changes that TPH should instruct on it would help to clean up the markup slightly and also remove made up elements which you cant do I'm afraid. h7, h8, h9, h10 are all non existant elements these heading tags do not exist, the heading tags run from h1(largest/primary) to h6 (smallest/minor)

In your markup it would be wise to change this block for better semantic tags, so the following:

would become:

Do not hesitate to email us or call the office if you wish more information about our programs or our Church family.

We are pleased that you have taken time to stop by. MFPC is truly a family friendly Church that is anticipating seeing what the Lord has in store. Cathy and I truly have a desire to see God express His love and provision to our Church and to a society that is hurting and broken.

One of our goals is to attempt to spread the good news of Christ to all in the community of Mount Forest and beyond through practical and loving ministry. If you are looking for a Church home, MFPC welcomes you with arms wide open

As I think I said before font tags are no longer used, all the styling that you wish to effect on this text will happen through the stylesheet and will be approached last when the actual layout is settled.

Hugo.

Hugo, Thanks for your direction and advice. I am attempting to follow TPH as much as I know how, I was just having some problems with what he was asking me to do with the div id="right">..."left">. The reason I changed back the font color, size was he was going to start with me from the beginning. We will eventually get to this, but now I will change it because you have shown me what to do. Thanks Hugo and all who are assisting. PRICER

Ok, two things you can do for us so we can get back on track.

1) Remove ALL the absolute positioning, and top/left values from your CSS.

2) mock up a quick image showing how you want the final site to look.

Let us know when you've done that and we'll carry on.

TPH, we are still on track - I have done everything you have told me from the beginning. I'm just waiting for some new instruction. mfpc.ca/index1.html If you look at mfpc.ca you will see what I want the finished product to look like. I have kept it there until I finish the one we are working on: index1.html.

Sorry, if I've caused any confusion. Hope all of this helps - I will go ahead and remove all you just told me to. Thanks TPH and HUGO for your time and patience.

Right let's get the columns.

You see your end div tag for the right column?

Move it to the end of your HTML content, it needs to enclose the navigation AND all those paragraphs of text.

Then add float: left; to #left and #right

TPH,

All done! Check out the mfpc.css and let me know. mfpc.ca/index1.html

Can't get the buttons on the top right to show up. If you select all - you will see them but the *.gif's won't show up.

Thanks again!

Two problems:

1) you're referencing the OTHER menu with your CSS
2) CSS doesn't like spaces. <id="about us"> sees two separate IDs, "about" and "us"

Got it! Thanks!

Now add overflow: auto; to the containing ul and float: left; to each of the list-items.

Adding a border on the #right column and a negative top indent on the UL will be the next thing to do.

Ok done, but not sure If it's done correctly.

Here is the latest .css file! Thanks again!

#right: {

that's why it's not working

Fix the typo and then we'll continue

K, thank you! All done!

Okeydoke, now we're going to space out the items and get everythign more or less in the right place.

Replace your entire CSS with this - I've cleaned it up a bit and added a few things.

a:link, a:visited {color: #006;} a:hover {color: #ccc;}

body {
text-align: center;
background: transparent url('bg.jpg') fixed;
}

#wrapper {
border: 5px ridge #ccc;
background: #fff;
margin: 0 auto;
text-align: left; /*required due to IE centering hack*/
width: 70%;
overflow: auto;
}

#left {
float: left;
text-align: center;
width: 300px;
}

#right {
float: left;
border: solid #123781 2px;
text-align: left;
margin-top: 2em;
margin-left: 350px;
}

h1 {
height: 167px;
width: 250px;
text-indent: -99999em;
background: url('MFPClogo.png') no-repeat;
}

ul#buttons, ul#buttons li {
list-style: none;
margin: 0;
padding: 0; }/* Zeroes the padding and margins */
overflow: auto;
}

ul#buttons li a {
display: block;
width: 120px;
height: 24px;
text-indent: -9999em;
float: left;
}

ul#buttons li#but-staff a { background: url('staff.gif') no-repeat;}
#buttons li#but-mission a { background: url('missions.gif') no-repeat;}
ul#buttons li#but-belief a { background: url('beliefs.gif') no-repeat;}
#buttons li#but-values a { background: url('values.gif') no-repeat;}
ul#buttons li#but-sermons a { background: url('sermons.gif') no-repeat;}
#buttons li#but-movies a { background: url('movienight.gif') no-repeat;}

h2 {
height: 118px;
width: 250px;
text-indent: -99999em;
background: url('church.png') no-repeat;
}

h3 {
height: 50px;
width: 250px;
text-indent: -99999em;
background: url('pancake.gif') no-repeat;
}

h4 {
height:50px;
width: 250px;
text-indent: -99999em;
background: url('dvd.gif') no-repeat;
}

h5 {
height: 50px;
width: 250px;
text-indent: -99999em;
background: url('singlemoms.gif') no-repeat;
}

h6 {
height: 84px;
width: 765px;
text-indent: -99999em;
background: url('banner.png') no-repeat;
}

ul#menu, ul#menu li {
list-style: none;
margin: 0;
padding: 0; /* Zeroes the padding and margins */
overflow: auto;
}

ul#menu {margin-top: -10px;}

ul#menu li {float: left; margin: 0 0.2em;}

ul#menu li a {
display: block;
width: 90px;
height: 33px;
text-indent: -9999em;
}

li#aboutus a { background: url('aboutus.gif') no-repeat;}
li#ministries a { background: url('ministries.gif') no-repeat;}
li#links a { background: url('links.gif') no-repeat;}
li#vision a { background: url('vision.gif') no-repeat;}
li#contactus a { background: url('contactus.gif') no-repeat;}

.opening {
width: 475px;
height: 234px;
font-size: 16;
color: #006;
}

.churchservices {
width: 300px;
height: 100px;
font-size: 16;
color: #006;
}

Let me know when it's uploaded

Okay, all uploaded and done! Thanks.

Next thing is to move the bottom banner out of the #right div, so it sits at the bottom. Also, actually embed the HTML image in the page - so your HTML will become:

Okay, that is dones as well. It's almost done I believe.

mfpc.ca/index1.html

What about rounding the corners of that inside blue box?

Just need a little more help and we're done. I need to know how to arrange the menu in the middle-left of the page and the text on the bottom right of the page. Not really sure how to do this, except using breaks and that probably wouldn't go over to well. If you can help with this, I think we are all good to go.

pricer1969

Your H6 needs a clear: left; to move it underneath the columns.

As your left items all have unique IDs, simply adding a clear: left; to the 3rd and 5th will move them down, there should be no need for extra divs.

This is what I still need to accomplish. The clear: left; didn't seem to work. I have attached an image of what I need to accomplish. Thanks again for your help.

I may have done it! Check the .css file and tell me if this okay for the menu. I used margin-top: -??px; to solve it. If there is something else I can do let me know.

Pricer