12 replies [Last post]
roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

Hi all,

http://slimmerkoken.be is my first site built with php/MySQL and extensive use of CSS : http://slimmerkoken.be/styles.css

The site is in Dutch...
Please check also the 'printing' (called 'afdrukken' in dutch), as there is a special .css file for printing. http://slimmerkoken.be/print.css

I checked for XHTML at W3C, and the pages look the same in IE6, Safari3 and FF2.

I am happy with my results so far, but there is probably a lot that could be improved when judged by you Smile

Thanks for your constructive criticism Wink

roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

There is one known problem

There is one known problem that I can't get fixed :
* search for 'Cuba', you should find Cuba Libre
* click on the recipe details..

The green bars (which are H1 tags), run under or over the image, which is floated right...
so the H1 don't float nicely around the image.

Any tips on getting this fixed are also very welcome.

Triumph (not verified)
Anonymous's picture
Guru

roobroup wrote:... I checked

roobroup wrote:
... I checked for XHTML at W3C ...

Did you? 9 errors

roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

Ooops, I checked it at

Ooops,

I checked it at http://jigsaw.w3.org/css-validator/
Now I realize that only checked the CSS...

Ok thanks for the info, I'll work out those XHTML problems asap.

roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

I now checked my site and

I now checked my site and resolved the errors. Thanks for your feedback on this, I've learned something!

However, at the page that shows the recipe-details, there remain 2 problems which I can't get fixed :

http://www.slimmerkoken.be/recipes.php?recipeId=24

http://validator.w3.org/check?uri=http://www.slimmerkoken.be/recipes.php?recipeId=24

Those attributes are there for some Javacript to submit the form on changing the selected option...
Can that be done in a 100% clean way ?

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

'onChange' needs to be

'onChange' needs to be 'onchange'

'name' will have to go but we might need to see the script in order to suggest the alternative

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

roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

ok, both remaining problems

ok, both remaining problems are solved.
I could change name='...' to id='...' and the javascript still works. (at least in EI6)

Time for some more feedback...

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 48 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

That's a pretty good looking

That's a pretty good looking site. Here are a few things I saw:

* You might want to give your design a max-width, perhaps in pixels. The design didn't break when I used a full screen browser window on my wide-screen monitor, but it did look a bit odd. If you use ems as the width, then the size will scale with font size.

* Take a look at the background around http://slimmerkoken.be/media/menu.png - it doesn't quite match the background color that it's against, so there's a faint grey box visible. To fix that, I would delete most of the background out of the image, and just let it be transparent.

* When I looked at the Cuba Libre recipe (http://slimmerkoken.be/recipes.php?recipeId=1) in Firefox 2, I noticed that the image of the drink was on top of the green "tips" bar a bit. You might want to add some margin and/or clear fix to keep those elements apart.

That's about it. Good site!

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

Thanks

Thanks Katie,

Katie wrote:

* Take a look at the background around http://slimmerkoken.be/media/menu.png - it doesn't quite match the background color that it's against, so there's a faint grey box visible. To fix that, I would delete most of the background out of the image, and just let it be transparent.

The problem is that when I make background transparent, I can't have the drop shadow of the button...
Also I spent quite some time matching the button background color with the surrounding background, but for some mysterious reason, it keeps getting unmatched...
Example : I set the background to #A0A0A0 in my graphics program (PaintShop Pro 9) and then I capture the webpage with PSP.
I found that the color was no longer #A0A0A0 but eg. #A2A2A2...

Katie wrote:

* When I looked at the Cuba Libre recipe (http://slimmerkoken.be/recipes.php?recipeId=1) in Firefox 2, I noticed that the image of the drink was on top of the green "tips" bar a bit. You might want to add some margin and/or clear fix to keep those elements apart.

This is the problem I mentioned in msg#2 in this topic. I am aware of it, but have too little CSS knowledge to fix it....

Again, thanks Katie !

isedeasy
Offline
Enthusiast
Bristol
Last seen: 10 years 13 weeks ago
Bristol
Timezone: GMT+1
Joined: 2008-02-09
Posts: 74
Points: 12

Change the background colour

Change the background colour of the image to #a8a8a8

or change

#menu { background-color:#a8a8a8; }

to...

#menu { background-color:#b0b0b0; }

"If a man is trying to hang himself from the tree in my yard but the knot keeps slipping and allowing him to fall before it kills him do you expect someone to go out and teach him to tie a better knot?" - Triumph

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 48 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Check out this new .PNG file

Check out this new .PNG file that I've attached. I took your original menu.png into Photoshop, copied it into a new image with a transparent background, and then used the Magic Wand to select all of the #B0B0B0 grey color. Now you can have a small variation in the background color behind the image without the box being noticeable.

AttachmentSize
menu2.png 1.2 KB

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

roobroup
roobroup's picture
Offline
newbie
Antwerpen, Belgium
Last seen: 14 years 27 weeks ago
Antwerpen, Belgium
Timezone: GMT+1
Joined: 2008-03-10
Posts: 7
Points: 0

Thanks

I did both :
* replace the button with the one made by Katie (transparent background)
* change the bgcolor in the stylesheet to B0B0B0 and now the button blends perfectly.

Thanks !

what about my H1 green bars running over/under my picture floated right... any hints there.

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 48 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

roobroup wrote: what about

roobroup wrote:

what about my H1 green bars running over/under my picture floated right... any hints there.

I think you probably need to take a look at clearfix (http://www.google.com/search?q=clearfix). Since your image is floated right, it's removed from the normal flow of the document.

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon