Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Should i center or not?


lindsayanng

Recommended Posts

I am debating about centering my website.. I was thinking about centering the main content, but letting the header and footer stretch across at 100%

 

I know that right now, my header stretches past some monitors, i am going to fix that by changing the size of my banner.. but i was just thinking about centering the main content. The websites with the centered content just look more professional for some reason.. What do you think?

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

  • Replies 75
  • Created
  • Last Reply

OOPS!! i forgot to post my link to my site so you can see what I am thinking about

 

Furry Family Supplies

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I prefer centered myself, I think it looks best. I also prefer fixed width over pages that always stretch out to 100%. But as most poeple have 1024x768 I wouldent exceed that width.

 

:)

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Why would you prefer a fixed width over a stretched one if it is just the header and footer??? Just curious..

 

I also saw that you had a post on how to easily center a site.. woudlthat would for me even though i havent used any <div> and only tables??

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

Why would you prefer a fixed width over a stretched one if it is just the header and footer??? Just curious..

 

I also saw that you had a post on how to easily center a site.. woudlthat would for me even though i havent used any <div> and only tables??

 

 

You can use the <center> before the first table in the header.php and use </center> after the last </table> in the footer.php. That should work.

Do or Do Not, there is no try.

Link to comment
Share on other sites

I dont know if you noticed, i DO NOT want to center the header and foot. I only want the main content (the left and right columns and the main) centered and fixed width.. I know how to center the WHOLE page, but i;m a little leery of doing just the center on my own.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I dont know if you noticed, i DO NOT want to center the header and foot. I only want the main content (the left and right columns and the main) centered and fixed width.. I know how to center the WHOLE page, but i;m a little leery of doing just the center on my own.

 

Then you can take every page for example and add the <center> before the table and </center> after the last table. This will center just what you are asking. You will have to do this for every page though unless you create a class in the stylesheet and then add the class to the first table in each page. As far as the width, just add width="850" or whatever you wish. If you go with the css idea, it will be easier to just add the class to each page.

Do or Do Not, there is no try.

Link to comment
Share on other sites

I have to scroll from left to right to see the right column, and my resolution is 1024 x 768. I'd keep the header and footer the same size as all the other parts of the store. Is there a reason why you want it different?

 

I love the bird graphic and I do like the color scheme. It fits your store niche. When are you going to make the cat graphic? (I have 3 cats! Maine Coons...)

Link to comment
Share on other sites

Why would you prefer a fixed width over a stretched one if it is just the header and footer??? Just curious..

 

I also saw that you had a post on how to easily center a site.. woudlthat would for me even though i havent used any <div> and only tables??

 

There is no problem mixing tables & div, my technique simply wraps the table in a div, sorry michael but there is a much easier way:

 

I never use <center> its depreciated & would prevent validation by w3c if you go that route, but you don`t need it.

 

To achieve your aim

 

At the very start of header.php add:

 

<div id="header">

 

then at the very bottom of header.php add:

 

</div><div id="content">

 

 

At the very start of footer.php add:

 

</div><div id="footer">

 

 

then at the very bottom of footer.php add:

 

</div>

 

then add to your css:

 

#content {

width: 900; margin: auto;

border: 0px solid #999999;

text-align:center;

}

#header {

width: 100%; margin: auto;

border: 0px solid #999999;

text-align:center;

}

#footer {

width: 100%; margin: auto;

border: 0px solid #999999;

text-align:center;

}

 

 

and add to the BODY tag

 

text-align:center;

 

Obviously set width above to whatever you need.

 

Stretched header & footer can work, it depends on your content, try it & see, with the above its very easy to change any time.

 

;)

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

well, i wanted the header to fit to 100% because, as you can see, i have a lot in the header. To make it look nice, i was going to insert a graphic that will stretch and repeat so it will fit on any size. This way the login box, beanner, and shopping cart will fit across you screen, underneath that i wanted to have some type of divider image. Something like a bar that goes across with the orange, white and green lines that are on my box headers. I could make it three parts and have the center repeat to fit to any screen.

 

Same with the footer. Right now i have the date stamp and ip address, i want to get rid of that and add the matching divider bar at the footer above the footer information. Maybe have it hold the privacy, terms, contact us, ect.

 

 

I'm really excited to try this. I think it is going to make a WORLD of difference on how professionaly done my site is going to look. I just didnt want to loose the content space in the header. And I also plan on putting more things in the footer like the SSL seal, ect.

 

I will keep you all updated on how this goes.I have to do more research on making a three piece divider bar that repeats in the center to stretch, but it shouldn't be too hard i wouldnt thinK!! i know i CAN be done..

 

also, THANKS SAM! i will get to work on this as soon as i get home to my laptop. I've said it a THOUSAND TIMES, i'm scared to do ANY work from my office PC. Im more comfortable with my mac.

 

And webbydeb, thanks for the compliments. I did that bird drawing by hand, and if you click small animals, you can see more drawings i did by hand. I have been waiting to do the other ones until the functionality of the site and basic layout is done.. i can whip those out pretty quickly once i get started.. If you want, you can send me a pic of your maincoon and i can make him into the CATS category cat :) if you click on ADOPTION STORIES on the left colum box, you can see a picture of one of my 4 cats.!!

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

ok SAM.. just one little issue, and i think (im SURE) it was something i missed.

 

the width is set perfectly, but its not centered.. Any suggestions on what i might have done?? I added the text-align: center to the body, but it seems to have done nothing

 

heres the site, can you please tell me what i missed or did wrong??

 

THANKS

FURRYFAMILY SUPPLIES

 

edited because i called SAM same

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

ok SAM.. just one little issue, and i think (im SURE) it was something i missed.

 

the width is set perfectly, but its not centered.. Any suggestions on what i might have done?? I added the text-align: center to the body, but it seems to have done nothing

 

heres the site, can you please tell me what i missed or did wrong??

 

THANKS

FURRYFAMILY SUPPLIES

 

edited because i called SAM same

 

I note it is centered for firefox, its just ie thats misbehaving. I see you put the code at the end of your css, maybe something else in there is upsetting it, try putting them immediatly after the body tag.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

I`ve spotted it, you still have a table open at the bottom of your header, your not allowed to have div crossing table boundaries, so ie has quite correctly ignored it (but only in part!!) Firefox has been naughty & ignored your error, so looks Ok.

 

Make sure you have as many <table> as </table> in your header. (The rest as well.

 

:o

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

maybe i am missing the issue, but i can't see where i am missing a </table> i did, just for the heck of it, try adding a </table? to the very end of the code, before the closing <?php tag and it didnt make any changes.. I also THOUGHT i saw where it was, but closing out that table screwed with my table's layout.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

ok, i got it centered, but my breadcrum and header nav bar are all showing smushed in the left side. I tried adding colspan="3" to it, but there is nothing

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

Your tables are still messed, I get your breadcrumb in the header of your login box in the header, personally I would get rid of that, I think it totallly messes your header anyway.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

you think i should get rid of the breadcrum or the login box?

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

you think i should get rid of the breadcrum or the login box?

 

 

The login, definatly keep breadcrumb, I added login to my breadcrumb to provide simple option & keep it clean.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

thats a good idea.. put the email login and the password fields in the breadcrum.. and i can align it right and get rid of the my account stuff because that is in the shopping cart AND it shows up if you already have an account..

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

Oy.. i just logged in to my account and now its showing centered, the breadcrum is all messed up BEFORE logging in, but the shop is centered, but once you are logged in, the shop goes back to left align

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

There's still trouble with your header, sometimes its a good idea to go back to the default (header) & then put back what you've added before, probably easier than trying to find the needle.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

yea.. the thing is, the default is SOOO far from what i have, that its probably going to take a lot of messing to just get it to where it is.. The thing is, i had A LOT of help from someone with putting the cart and login in the header.. But i am going to try it on my own... and i THINK i might make some changes too - like putting the login in the top nav. where the breadcrumb is.

 

Thanks so much for your help. I;ll be back if i have some issues

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I`ve spotted it, you still have a table open at the bottom of your header, your not allowed to have div crossing table boundaries, so ie has quite correctly ignored it (but only in part!!) Firefox has been naughty & ignored your error, so looks Ok.

 

Make sure you have as many <table> as </table> in your header. (The rest as well.

 

:o

Hey Lindsay,

I think the open table Sam is referring to is from when we added a table to hold your osc. Remember You put in your header.php right before the first table, <table><tr><td>. Then in footer.php you put </td></tr></table>.

 

The way Sam had do is better so you could probably remove the other ones.

 

You do still have some problems with your tables though. The box under your search box on the right has this

</table>
<tr>
   <td> 
<!-- topics_eof //--><!-- article search //-->
	  <tr>
		<td>

Right after the </table> should be </td></tr>. You may want to check that box. I still think there is a missing </table> somwhere in your index.php file too. I think it's in this part, <!-- main_categories //-->, not sure though.

 

If you want to put the loginbox in the row with your breadcrumb, I still have all of those files we were working on. Just let me know.

Link to comment
Share on other sites

I dont even SEE a closing </table> in either articles box files.. that is REALLY weird.. I opened articles and articles search, but i just see an open tr and td which i closed at the end, but i didnt even SEE a <table> or a </table>

 

Thats another snippet from a contributions.. but yes, i like the idea of having the login in the breadcrumb. I am also thinking i am going to make a square background image to place as the background of that table (instead of the basic orange) and have it repeat.. and have something matching in the bottom..

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I'll get those and post it for you.

 

The boxes in right and left collumns don't have <table or </table>. They are already nested inside of a table so you only need the <tr><td> and </td></tr>.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...