66 replies [Last post]
pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

I have a created and published website using CSS and I have been trying numberous time to center the entire page. I have used script in the past to create different CSS files for different size resoluitons on computers to show a centered site. Can anyone help me center the entire site every time someone opens the site regardless of their resoultion?

http://www.mfpc.ca

I will include a copy of the CSS file as well, I hope someone can help me to center this site!

{ }

a:link{color: #ffffff;}
a:visited{color: #ffffff;}
a:hover{color: #ffff00;}

.squarebg{position: absolute;
top: 30px;
left: 389px;
height: 411px;
width: 500px;
z-index: 1;}

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

.cochrane{position: absolute;
top: 260px;
left: 415px;
height: 200px;
width: 765px;
z-index: 2;}

.cochraneinfo{position: absolute;
top: 260px;
left: 520px;
height: 200px;
width: 765px;
font-size: 16;
z-index: 2;}

.ramoth{position: absolute;
top: 355px;
left: 415px;
height: 200px;
width: 200px;
z-index: 2;}

.ramothinfo{position: absolute;
top: 365px;
left: 520px;
height: 200px;
width: 765px;
font-size: 16;
z-index: 2;}

.smallgroup{position: absolute;
top: 250px;
left: 550px;
height: 200px;
width: 765px;
font-size: 16;
z-index: 2;}

.link{position: absolute;
top: 350px;
left: 415px;
height: 200px;
width: 765px;
z-index: 2;}

.grid{position: absolute;
top: 190px;
left: 400px;
height: 200px;
width: 765px;
z-index: 1;}

.grid1{position: absolute;
top: 410px;
left: 400px;
height: 200px;
width: 765px;
z-index: 1;}

.morgan{position: absolute;
top: 470px;
left: 400px;
height: 200px;
width: 765px;
z-index: 1;}

.youth{position: absolute;
top: 370px;
left: 410px;
height: 200px;
width: 765px;
z-index: 1;}

.banner{position: absolute;
top: 675px;
left: 124px;
height: 200px;
width: 765px;
z-index: 1;}

.bgbox{position: absolute;
top: 0px;
left: 110px;
height: 200px;
width: 765px;
z-index: 0;}

.moviepic{position: absolute;
top: 80px;
left: 400.5px;
height: 600px;
width: 500px;
z-index: 2;}

.movienight{position: absolute;
top: 280px;
left: 630.5px;
height: 600px;
width: 500px;
z-index: 2;}

.sermonbg{position: absolute;
top: 80px;
left: 400.5px;
height: 600px;
width: 500px;
z-index: 2;}

.links{position: absolute;
top: 60px;
left: 400px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 1;}

.cat{position: absolute;
top: 510px;
left: 400px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 1;}

.filmopening{position: absolute;
top: 90px;
left: 630px;
height: 65px;
width: 250px;
font-size: 30;
z-index: 3;}

.opening{position: absolute;
top: 60px;
left: 402px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 3;}

.opening1{position: absolute;
top: 225px;
left: 402px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 1;}

.opening2{position: absolute;
top: 480px;
left: 400px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 1;}

.contact{position: absolute;
top: 75px;
left: 400px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.contactinfo{position: absolute;
top: 475px;
left: 400px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.contactpic{position: absolute;
top: 200px;
left: 124px;
height: 65px;
width: 250px;
z-index: 1;}

.cell{position: absolute;
top: 450px;
left: 620px;
height: 65px;
width: 250px;
z-index: 2;}

.outsidebox{position: absolute;
top: 260px;
left: 400px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.outsidebox1{position: absolute;
top: 260px;
left: 550px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.churchservices{position: absolute;
top: 450px;
left: 402px;
height: 65px;
width: 250px;
font-size: 14;
z-index: 1;}

.price{position: absolute;
top: 75px;
left: 400px;
height: 65px;
width: 250px;
z-index: 2;}

.priceinfo{position: absolute;
top: 95px;
left: 600px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.kushner{position: absolute;
top: 230px;
left: 410px;
height: 65px;
width: 250px;
z-index: 2;}

.kushnerinfo{position: absolute;
top: 250px;
left: 600px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.matthews{position: absolute;
top: 400px;
left: 410px;
height: 65px;
width: 250px;
z-index: 2;}

.matthewsinfo{position: absolute;
top: 420px;
left: 600px;
height: 65px;
width: 250px;
font-size: 16;
z-index: 2;}

.button1{position: absolute;
top: 200px;
left: 124px;
height: 65px;
width: 250px;
z-index: 1;}

.button2{position: absolute;
top: 200px;
left: 254px;
height: 65px;
width: 250px;
z-index: 1;}

.button3{position: absolute;
top: 234px;
left: 124px;
height: 65px;
width: 250px;
z-index: 1;}

.button4{position: absolute;
top: 234px;
left: 254px;
height: 65px;
width: 250px;
z-index: 1;}

.button5{position: absolute;
top: 268px;
left: 124px;
height: 65px;
width: 250px;
z-index: 1;}

.button6{position: absolute;
top: 268px;
left: 254px;
height: 65px;
width: 250px;
z-index: 1;}

.bible{position: absolute;
top: 530px;
left: 530px;
height: 200px;
width: 765px;
z-index: 2;}

.children{position: absolute;
top: 300px;
left: 124px;
height: 65px;
width: 250px;
z-index: 1;}

.dvd{position: absolute;
top: 530px;
left: 124px;
height: 200px;
width: 765px;
z-index: 1;}

.singlemoms{position: absolute;
top: 600px;
left: 124px;
height: 200px;
width: 765px;
z-index: 1;}

.pancake{position: absolute;
top: 460px;
left: 124px;
height: 200px;
width: 765px;
z-index: 1;}

.pics{position: absolute;
top: 460px;
left: 124px;
height: 200px;
width: 765px;
z-index: 1;}

.menu{position: absolute;
top: 17px;
left: 388px;
height: 500px;
width: 550px;
font-size: 16;
z-index: 1;}

.menuwords{position: absolute;
top: 23px;
left: 408px;
height: 30px;
width: 500px;
font-size: 16px;
z-index: 1;}

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

mod edit/<code> tags added/tph

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 15 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Sigh. No DTD, 37 html

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?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Wrap the whole page in a div

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*/
    }

You will never have a robust page due to using FrontPage, which is a piece of c##p. Your page breaks with a single increase of font size. This is a legacy of using absolute positioning for the total layout.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

pricer1969 I'm afraid that

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Thank you all for your

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!

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 12 years 42 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

I will take a stab and say

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.

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Thanks again for the advice;

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Having removed all the

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Did all of that - and Wow

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

having removed the postion

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

"loose the font tags, font

"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!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

pricer1969 wrote:"loose the

pricer1969 wrote:
"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.

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.

Quote:
By non breaking commands I assume you mean "br"?

Yes. Use bottom-margins instead.

Quote:
Lose all inline styling? Provide an example if you woulnd't mind? Would this be: style="width... etc.?

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

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

I am now using percentages

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.

AttachmentSize
mfpc.css_.txt 4.46 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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

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.

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

This last code {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!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Oh please ignore that, that

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

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?

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Ok, please have a look at

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Your content breaks out of

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;
}

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Hey, that worked

Hey, that worked great!

mfpc.ca/index1.html

What is next?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Er, you actually have to put

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!

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Okay, I will do this even

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

pricer1969 wrote:but you see

pricer1969 wrote:
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.

Yes Smile

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Do I style each of the ID's

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!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Move it under the H1 in the

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

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;}

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Aight, that is working

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Now we can move onto columns

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Ok Thanks! I did go ahead

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.

AttachmentSize
mfpc1.css_.txt 5.69 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

It's not, not for a site

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.

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Sorry sent the wrong file!

Sorry sent the wrong file! Oops!

AttachmentSize
mfpc.css_.txt 5.82 KB
pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

I'm having a hard time with

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!

AttachmentSize
mfpc.css_.txt 6.53 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Pricer while it is admirable

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:

Thank you for taking time to browse our site. I trust you will find it helpful and informative. Take time to check out all the links to find out what's happening at our Church.

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.

would become:

Thank you for taking time to browse our site. I trust you will find it helpful and informative. Take time to check out all the links to find out what's happening at our Church.

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Hugo, Thanks for your

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Ok, two things you can do

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.

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

TPH, we are still on track -

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.

AttachmentSize
mfpc.css_.txt 1.98 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Right let's get the

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

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

TPH,All done! Check out

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!

AttachmentSize
mfpc.css_.txt 2.4 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Two problems: 1) you're

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"

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Got it! Thanks!

Got it! Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Now add overflow: auto; to

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.

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Ok done, but not sure If

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

AttachmentSize
mfpc.css_.txt 2.58 KB
pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Here is the latest .css

Here is the latest .css file! Thanks again!

AttachmentSize
mfpc.css_.txt 3.2 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

#right: { that's why it's

#right: {

that's why it's not working Wink

Fix the typo and then we'll continue Smile

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

K, thank you! All done!

K, thank you! All done!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Okeydoke, now we're going to

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Okay, all uploaded and done!

Okay, all uploaded and done! Thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Next thing is to move the

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:

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Okay, that is dones as well.

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?

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

Just need a little more help

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Your H6 needs a clear: left;

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.

Verschwindende wrote:
  • CSS doesn't make pies

pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

This is what I still need to

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.

AttachmentSize
menu.jpg 10.27 KB
pricer1969
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2007-03-08
Posts: 38
Points: 0

I may have done it! Check

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

AttachmentSize
mfpc.css_.txt 2.92 KB