Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Wedding Cakes showroom


Recommended Posts

Hi e/o,

 

I used to have a simple site with all pics of the cakes I've done a long time ago, but now thought osCommerce would be perfect for displaying them. I haven't done the relaunch yet, so this is still in my test area.

 

Please review my page

http://www.casin-group.com/hollywood

 

TIA

Monika

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

Hi e/o,

 

I used to have a simple site with all pics of the cakes I've done a long time ago, but now thought osCommerce would be perfect for displaying them. I haven't done the relaunch yet, so this is still in my test area.

 

Please review my page

http://www.casin-group.com/hollywood

 

TIA

Monika

 

Hi Monika

 

The site looks gorgeous but how come you don't use osc to sell?

 

You could make pdfs of your recipes with step-by step instructions on how to make and decorate each cake. And then sell them using the download function.

 

My first thought was - yes the cakes look gorgeous, but how do I make them?

 

If they are too hard for amateurs (which they probably would be), then brides could purchase the recipes to take to professional cake makers to make it for them, like, "I want this cake for my wedding, can you make it".

 

Just a thought.

Link to comment
Share on other sites

This might be nit picking. Edit the photos of the cakes with photoshop or something good. You need to correct the coloring and lighting levels. To many pictures are not exposed properly. Too much yellow in many.

 

Easily corrected with the right software.

Link to comment
Share on other sites

  • 2 weeks later...

It looks nice, it could be improved though, not sure what exactly is (maybe it is what cgchris99 said).

 

One problem: I had to dig up my old dusty IE browser to look at it as you probably intended it to look. Using FireFox (about 10% uses it these days) it looks quite bad. Probably this is not very difficult to fix.

Link to comment
Share on other sites

Have to agree with Julie that it's probably worth using osCom to sell the recipes or instructions on how to produce these cakes and use the download function to sell them.

The images are a bit poor and could do with enhancing a little. The logo needs sharpening up and being a bit brighter. Is it supposed to be yellow'ish.

The site layout suits your theme, I think it's a bit dark though. You could show off the images better as this is all the site is about. It may be worth having an even larger pop up image as you can't really see all of the detail, and tweak the colours etc in Photoshop or something similar. It's quite easy to do and worth the effort.

 

Looks good though :thumbsup:

 

Julian

A little knowledge is dangerous, I SHOULD KNOW.

If Life Begins At 40, What ends????

Link to comment
Share on other sites

It looks nice, it could be improved though, not sure what exactly is (maybe it is what cgchris99 said).

 

One problem: I had to dig up my old dusty IE browser to look at it as you probably intended it to look. Using FireFox (about 10% uses it these days) it looks quite bad. Probably this is not very difficult to fix.

 

 

Paul, I need your help. I know nothing about Firefox and just saw what it looks like in it, a major bummer.

 

If you need me to post my stylesheet or whatever just give me a holler.

 

TIA

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

Hi Monika,

Paul, I need your help. I know nothing about Firefox and just saw what it looks like in it, a major bummer.

 

If you need me to post my stylesheet or whatever just give me a holler.

 

TIA

I am glad you want to solve this problem. IE only sites allways make me feel a bit sad ;)

 

The centering problem has to do with the fact that "text-align: center" is not intended to center block elements (it's for text...). IE centers block elements using text-align center, but actually that is an IE bug.

 

To center a block element you need to make the left and right margin equal. In practice this usually means it is best to set both left and right margin to "auto".

 

So use something like this

.aBlockElementThatNeedsToBeCentered {
margin: 5px auto;
}

It's a shorthand for the margin settings: top 5px, right auto, bottom 5px, left auto. Better leave the text-align center in there too, old IE versions need it.

 

Following the above rule I tried to replace this part of your stylesheet:

.fixouterborder {
 width: 775px;
 border: solid; border-width: 0px;
 background: #666633;
 margin-top: 15px;
 text-align: center;
}

/*
.fixborder {
 width: 715px;
 border: 0px solid; 
 background: #FFCC66;
 margin-top: 30px;
 margin-bottom: 30px;
 text-align: center
}
*/

.fixpart1 {
 width: 765px;
 border: 0px solid; 
 background: #CC9933;
 margin-top: 5px;
 margin-bottom: 5px;
 text-align: center
}

.fixline1 {
 width: 763px;
 border: 0px solid; 
 background: #666633;
 margin-top: 1px;
 margin-bottom: 1px;
 text-align: center
}

.fixpart2 {
 width: 739px;
 border: 0px solid; 
 background: #CC9933;
 margin-top: 12px;
 margin-bottom: 12px;
 text-align: center
}

.fixline2 {
 width: 737px;
 border: 0px solid; 
 background: #666633;
 margin-top: 1px;
 margin-bottom: 1px;
 text-align: center
}

.fixpart3 {
 width: 725px;
 border: 0px solid; 
 background: #CC9933;
 margin-top: 6px;
 margin-bottom: 6px;
 text-align: center
}

.fixline3 {
 width: 723px;
 border: 0px solid; 
 background: #666633;
 margin-top: 1px;
 margin-bottom: 1px;
 text-align: center
}

.fixpart4 {
 width: 715px;
 border: 0px solid; 
 background: #CC9933;
 margin-top: 4px;
 margin-bottom: 4px;
 text-align: center
}

.fixmargin {
 width: 711px;
 border: solid; border-width: 0px;
 background: #663333;
 margin-top: 2px;
 margin-bottom: 2px;
 text-align: center;
}

.fixcenter {
 width: 699px;
 border: solid; border-width: 0px;
 background-image:url('images/pixel_pale.gif');
 color: #663333;
 margin-top: 6px;
 margin-bottom: 6px;
 text-align: left;
}

 

by this:

.fixouterborder {
 width: 775px;
 border: solid; border-width: 0px;
 background: #666633;
 margin: 15px auto;
 text-align: center;
}

/*
.fixborder {
 width: 715px;
 border: 0px solid; 
 background: #FFCC66;
 margin: 30px auto;
 text-align: center;
}
*/

.fixpart1 {
 width: 765px;
 border: 0px solid; 
 background: #CC9933;
 margin: 5px auto;
 text-align: center;
}

.fixline1 {
 width: 763px;
 border: 0px solid; 
 background: #666633;
 margin: 1px auto;
 text-align: center;
}

.fixpart2 {
 width: 739px;
 border: 0px solid; 
 background: #CC9933;
 margin: 12px auto;
 text-align: center;
}

.fixline2 {
 width: 737px;
 border: 0px solid; 
 background: #666633;
 margin: 1px auto;
 text-align: center;
}

.fixpart3 {
 width: 725px;
 border: 0px solid; 
 background: #CC9933;
 margin: 6px auto;
 text-align: center;
}

.fixline3 {
 width: 723px;
 border: 0px solid; 
 background: #666633;
 margin: 1px auto;
 text-align: center;
}

.fixpart4 {
 width: 715px;
 border: 0px solid; 
 background: #CC9933;
 margin: 4px auto;
 text-align: center;
}

.fixmargin {
 width: 711px;
 border: solid; border-width: 0px;
 background: #663333;
 margin: 2px auto;
 text-align: center;
}

.fixcenter {
 width: 699px;
 border: solid; border-width: 0px;
 background-image:url('images/pixel_pale.gif');
 color: #663333;
 margin: 6px auto;
 text-align: left;
}

And it already looks a lot better in Firefox then. Maybe it needs to be adjusted a little for IE after this change.

 

Also the are some errors in the CSS file. Since you already have firefox installed you might as well install Chris Pedericks webdeveloper tool on top of it, it includes a lot of tools, some of those can help a lot in finding HTML and CSS errors.

 

I am sure you will like it a lot :)

 

hth,

I"ll get back later to see how it goes :)

 

Paul

Link to comment
Share on other sites

Hi Monika,

 

I am glad you want to solve this problem. IE only sites allways make me feel a bit sad  ;)

 

The centering problem has to do with the fact that "text-align: center" is not intended to center block elements (it's for text...). IE centers block elements using text-align center, but actually that is an IE bug.

 

To center a block element you need to make the left and right margin equal. In practice this usually means it is best to set both left and right margin to "auto".

 

So use something like this

.aBlockElementThatNeedsToBeCentered {
margin: 5px auto;
}

It's a shorthand for the margin settings: top 5px, right auto, bottom 5px, left auto. Better leave the text-align center in there too, old IE versions need it.

 

Following the above rule I tried to replace this part of your stylesheet:

.fixouterborder {
?width: 775px;
?border: solid; border-width: 0px;
?background: #666633;
?margin-top: 15px;
?text-align: center;
}

/*
.fixborder {
?width: 715px;
?border: 0px solid; 
?background: #FFCC66;
?margin-top: 30px;
?margin-bottom: 30px;
?text-align: center
}
*/

.fixpart1 {
?width: 765px;
?border: 0px solid; 
?background: #CC9933;
?margin-top: 5px;
?margin-bottom: 5px;
?text-align: center
}

.fixline1 {
?width: 763px;
?border: 0px solid; 
?background: #666633;
?margin-top: 1px;
?margin-bottom: 1px;
?text-align: center
}

.fixpart2 {
?width: 739px;
?border: 0px solid; 
?background: #CC9933;
?margin-top: 12px;
?margin-bottom: 12px;
?text-align: center
}

.fixline2 {
?width: 737px;
?border: 0px solid; 
?background: #666633;
?margin-top: 1px;
?margin-bottom: 1px;
?text-align: center
}

.fixpart3 {
?width: 725px;
?border: 0px solid; 
?background: #CC9933;
?margin-top: 6px;
?margin-bottom: 6px;
?text-align: center
}

.fixline3 {
?width: 723px;
?border: 0px solid; 
?background: #666633;
?margin-top: 1px;
?margin-bottom: 1px;
?text-align: center
}

.fixpart4 {
?width: 715px;
?border: 0px solid; 
?background: #CC9933;
?margin-top: 4px;
?margin-bottom: 4px;
?text-align: center
}

.fixmargin {
?width: 711px;
?border: solid; border-width: 0px;
?background: #663333;
?margin-top: 2px;
?margin-bottom: 2px;
?text-align: center;
}

.fixcenter {
?width: 699px;
?border: solid; border-width: 0px;
?background-image:url('images/pixel_pale.gif');
?color: #663333;
?margin-top: 6px;
?margin-bottom: 6px;
?text-align: left;
}

 

by this:

.fixouterborder {
?width: 775px;
?border: solid; border-width: 0px;
?background: #666633;
?margin: 15px auto;
?text-align: center;
}

/*
.fixborder {
?width: 715px;
?border: 0px solid; 
?background: #FFCC66;
?margin: 30px auto;
?text-align: center;
}
*/

.fixpart1 {
?width: 765px;
?border: 0px solid; 
?background: #CC9933;
?margin: 5px auto;
?text-align: center;
}

.fixline1 {
?width: 763px;
?border: 0px solid; 
?background: #666633;
?margin: 1px auto;
?text-align: center;
}

.fixpart2 {
?width: 739px;
?border: 0px solid; 
?background: #CC9933;
?margin: 12px auto;
?text-align: center;
}

.fixline2 {
?width: 737px;
?border: 0px solid; 
?background: #666633;
?margin: 1px auto;
?text-align: center;
}

.fixpart3 {
?width: 725px;
?border: 0px solid; 
?background: #CC9933;
?margin: 6px auto;
?text-align: center;
}

.fixline3 {
?width: 723px;
?border: 0px solid; 
?background: #666633;
?margin: 1px auto;
?text-align: center;
}

.fixpart4 {
?width: 715px;
?border: 0px solid; 
?background: #CC9933;
?margin: 4px auto;
?text-align: center;
}

.fixmargin {
?width: 711px;
?border: solid; border-width: 0px;
?background: #663333;
?margin: 2px auto;
?text-align: center;
}

.fixcenter {
?width: 699px;
?border: solid; border-width: 0px;
?background-image:url('images/pixel_pale.gif');
?color: #663333;
?margin: 6px auto;
?text-align: left;
}

And it already looks a lot better in Firefox then. Maybe it needs to be adjusted a little for IE after this change.

 

Also the are some errors in the CSS file. Since you already have firefox installed you might as well install Chris Pedericks webdeveloper tool on top of it, it includes a lot of tools, some of those can help a lot in finding HTML and CSS errors.

 

I am sure you will like it a lot :)

 

hth,

I"ll get back later to see how it goes :)

 

Paul

 

 

ok lol I changed that part and corrected a few things, IE still looks cute, FF looks much better but why on earth do I only have the borders on the sides and not all around? Looks weird! At least it's centered now :-)

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

ok lol I changed that part and corrected a few things, IE still looks cute, FF looks much better but why on earth do I only have the borders on the sides and not all around?

Good question, I am not really sure why it happens, probably has something to do with the different box model interpretation. But I felt ( :) ) adding some padding could help, and it guess what, it actually does! Again not sure what happens in IE, a bigger chance it will have some unwanted influence this time I think.

 

So try adding:

padding: 1px 0;

(simular as with the margins of course: top and bottom 1px, right and left 0)

to the same boxes we've added the auto margins too.

 

It seems to help a lot in FF, interesting to see what it does to IE this time...

Link to comment
Share on other sites

Good question, I am not really sure why it happens, probably has something to do with the different box model interpretation. But I felt ( :) ) adding some padding could help, and it guess what, it actually does! Again not sure what happens in IE, a bigger chance it will have some unwanted influence this time I think.

 

So try adding:

padding: 1px 0;

(simular as with the margins of course: top and bottom 1px, right and left 0)

to the same boxes we've added the auto margins too.

 

It seems to help a lot in FF, interesting to see what it does to IE this time...

 

 

uhm ---- in IE the top one looks ok, the bottom is "paded", in FF both are padded ... but at least it's there. Is there a possibility to add an if statement to the css to do some stuff for IE and some for FF?

 

BTW, adding px to line height completely messes up text!

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

uhm ---- in IE the top one looks ok, the bottom is "paded", in FF both are padded ... but at least it's there. Is there a possibility to add an if statement to the css to do some stuff for IE and some for FF?

In general it's best to avoid browser dependend hacks as much as possible, but there are possibilities (rarely use it, so I can't tell any details now). Probably there will be a better solution, I will have another look later. Gotta get some sleep now (last night it was about 3:30 a.m.).

 

 

BTW, adding px to line height completely messes up text!

well 2px isn't much line-height (it is two screen pixels only!), so try more pixels or prob better: you can also try to use em's for the line-height (or something like 150% for example)

 

cu,

Paul

Link to comment
Share on other sites

Ok one last try (for now):

 

add:

  overflow:auto;

to all the surrounding boxes styles, I think it will work better, maybe still some finetuning needed of course.

Link to comment
Share on other sites

Ok one last try (for now):

 

add:

 ?overflow:auto;

to all the surrounding boxes styles, I think it will work better, maybe still some finetuning needed of course.

 

 

off to bed myself, but had to try ... I left it for you to see as it's just too funny of an effect!

 

nighty night!

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

-_- .............ahhh, good morning Monika,

 

I am not sure how it should look, but it looks nice to me now in both IE and Firefox.

 

I only see one small error left (apart from the scroll-bar color thingIEs):

H1 {

 font-family: Verdana, Arial, sans-serif;

 font-size: 10px;

 line_height: 20px;

 color: #663333;

 font-weight : bold;

}

just a typo: line_height should be line-height

 

And apart from that I would expect that:

line-height: 1.5;

also would result in an error message, but it does not (as you already noticed), I would change it to:

line-height: 150%;

though, just to be sure. Else you'll never know how another broswer (or even only other browser version) handles it.

Link to comment
Share on other sites

much better in FF now :-), thanks a bunch ... still have a problem with the padding adding a px or two to my thin line on bottom border, but I will have to live with that right?

 

I'll be playing with the pics next week!

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

much better in FF now :-), thanks a bunch ... still have a problem with the padding adding a px or two to my thin line on bottom border, but I will have to live with that right?

Glad I could help, I like these kind of puzzles (sometimes :) ).

 

It is possible to make it look exactly the same in IE and Firefox, but the question is if it's worth the trouble. With IE it depends a lot on the version what is needed to make it pixelperfect, since each version has it's own bugs. To also make it work in old IE browser versions for example you should not use any padding at all, only margins (due to the so called "box model" problems).

 

cu,

Paul

Link to comment
Share on other sites

Glad I could help, I like these kind of puzzles (sometimes :) ).

 

It is possible to make it look exactly the same in IE and Firefox, but the question is if it's worth the trouble. With IE it depends a lot on the version what is needed to make it pixelperfect, since each version has it's own bugs. To also make it work in old IE browser versions for example you should not use any padding at all, only margins (due to the so called "box model" problems).

 

cu,

Paul

 

 

yep, it's annoying me that it messes up my IE bottom border right now ... I read somewhere you should use = for Mozilla and : for IE or vice versa ... any truth in this? I too love puzzles and coding as you know ;-)

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

yep, it's annoying me that it messes up my IE bottom border right now ... I read somewhere you should use = for Mozilla and : for IE or vice versa ... any truth in this? I too love puzzles and coding as you know ;-)

 

nope it should always be : regardless of the browser.

 

It is IE5 that has problems with the box model. The correct(W3C) standard is you set the width of the content and then add on margin and borders. Mozilla etc implement it correctly, IE 5 does not, it subtracts the margin and borders from the width

 

#box {
     width: 100px;
     margin: 10px;
     border: 5px;
}

 

Mozilla etc would see it as 130 pixels wide (100+10+10+5+5)

IE 5 sees it as 100 total and only 70 pixels for content (100-10-10-5-5)

 

So the fudge is to use the voice-family property which a bug in IE5 causes it to ignore what comes after it

 

#box {
     border: 5px;
     margin: 10px;
     width: 130px;
     voice-family: "\"}\"";
     voice-family: inherit;
     width: 100px;
}

 

IE5 will set the width to 130px gets to voice family thinks its the end of that declaration, meanwhile other browsers carry on and read the second width property which overwrites the first width property setting it to 100px

 

(discovered by Tantek Celik www.tantek.com)

Link to comment
Share on other sites

yep, it's annoying me that it messes up my IE bottom border right now ...

I don't see it, here looks the same in IE6sp2 on XP and Firefox (not sure how it *should* look, but it looks fine to me), have you solved it ? Or do you use another IE version or something?

 

Remember that with IE6 a lot depends on the rendering mode,

 

For example:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

makes IE6 act more like IE 5, a.o. boxmodel is wrong

 

or:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

makes IE follow standards better (like Firefox and other browsers), a.o. box model is ok

 

B.t.w. this is not a bug but a feature, it can be tricky if you don't know about it though.

Link to comment
Share on other sites

You have helped me in the past, so here goes.

 

Dont take this the wrong way, but the colours are not the best. My idea of wedding colours is pretty limited, so dont quite know what to suggest. It might just be the greens, but it doesnt float my boat i am affraid.

 

I also think that the border is too wide, making the page look too narrow, but hey what do i know.

 

The only other critisism i have is with the pictures. It would be better to have more pictures showing the detail on the cakes, aswell as the cakes themselves.

 

Thats about all really. Apart from that nice site.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...