Hi guys, i'm new to the forums so please go easy on me! A few weeks ago i purchased a domain and set up a website and would love to hear what the web experts here think of the layout/design. It would be great if you could take a look and let me know what you think might need changing, adding etc. I've currently got the chrimbo decs up for the run up to christmas lol. Are they ok or tacky etc? The website is http://www.freeipodonline.co.uk It's a made with jquery so it's mostly all on one page, people have said switching between sections can be jumpy? I've looked at it in various browsers and can't see what they mean, are they right? Thanks Azza
I'll start off by saying that the site looks great and the jQuery is running smoothly in FF 3.5.5. Now, let me nitpick a little... Your white rounded corners are jagged. Make them smooth. I can see why you went with the large background graphic... For the glow around the ornaments. I think that a transparent PNG (IE PNG Fix for IE6) and tiled background would make for a quicker load, though. Cheers!
Nice little page there. Pops real nice and pretty to the point. Hope you do well and make lots of sales!
I agree. Takes a very long time to load (not 3 and half hours though). I actually thought there's no other background image than the blue background. Might be great if you make changes to the bg body so it loads faster.
Thanks everyone. The points made about the background, it is the bg body set in css, how would i use a transparent png on top of a tile background? Thanks
Nice looking website.. it loads smooth here but the images kinda slow when i want to see an enlarged images.
I was wrong about IE6 compatibility. I couldn't get IE PNG Fix to center without introducing a horizontal scroll and scrolling would make your visitors work too hard. (I'm sure that there's a work-around, but it's beyond me at the moment.) The only compromise I could come up with was to load the old image for IE6. (It's still worth doing for the majority of people who use newer browsers.) The following code requires a seamless "tiled.gif" snowflake pattern and a transparent PNG (same as the old image but without the background): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> html { background: #459EDF url(images/tiled.gif) repeat; } body { padding: 0; margin: 0; background: url(images/transparent.png) no-repeat center top; width: 100%; display: table; /* Learned this from WebDesignerWall */ } #container { padding-bottom: 50px; /* Make sure that "Contact" page is longer than transparent PNG. Looks like you've already taken care of this somewhere else. */ width: 560px; margin: 35px auto 0 auto; background-color: #fff; height: 500px; /* Just filling space. */ } </style> <!--[if lt IE 7]> <style type="text/css"> body{ background: url(images/bg-body.png) no-repeat center top; } </style> <![endif]--> </head> <body> <div id="container">Example Only</div> </body> </html> Code (markup): I've attached an image of the code in use. It works in FF, O, S, Ch and IE.
Thanks for massive help, i tried using this code but for some reason there was a blank block across the top of the page with the tile image starting below it, and then another gap at the bottom of the page. Do you know what could be causing this? Thanks again. Thanks for that mate, but what makes you think it's bad for SEO?
I came close to mimicking the problem with the "50% 0" background values... The top of your master.css should look like this: /* Title: Master styles for screen media */ html { background: #459EDF url(../img/tiled.gif) repeat; /* Check img path */ } body { font-family: Arial, Helvetica, sans-serif; color: #5d5d5d; font-size: 11px; line-height: 16px; [COLOR="Red"]/* background: #009fdc url(img/bg-body.png) 50% 0 no-repeat; */[/COLOR] background: url(../img/transparent.png) no-repeat center top; /* Check img path */ width: 100%; display: table; text-decoration: none; } Code (markup): And the last style in the head portion of your HTML should be this: <!--[if lt IE 7]> <style type="text/css"> body{ background: url([COLOR="SeaGreen"]PUT THE RIGHT PATH HERE[/COLOR]/bg-body.png) no-repeat center top; } </style> <![endif]--> Code (markup): If you have problems with this, put your result online as index2.html / master2.css (etc.).
Why not use seamless background for faster loading? And the pops look like fake buttons, they made me click a couple of times and realized that there're no hyper links.
Many thanks to ywp, have updated with the code put posted and as far as i can see it works perfectly. With the now transparent background being css based is there a way to make the image clickable? I'm only asking because myst dg thought 'baubles' where buttons, which makes me think visitors could be thinking the same. Thanks again your your help, it's much appreciated!