My Site redone with CSS

[ecampsite.co.uk]

Hey guys, I'd really like your opinion on my upgraded design for my site, I've taken comments in, and redone my site with css and think I've done quite a good job, the link is,

www.ecampsite.co.uk (http://www.ecampsite.co.uk)

I would really appreciate your comments about cross browser compatibility, appearance, accessibility and the search function which i really like! The links refer to the old version of the site, but if you all like this version the rest will be in the same style.
I appreciate all your comments!!!
Cheers
Craig

[Ubik]

Very nice.

I would not use the full screen - it makes it look sparse.

Maybe trim it up to a specific size.

You can get some great css layouts for your site from by googling 'CSS +Jello'

[KDLA]

Agreeing with Ubik about the space factor. It looks a little like little pieces of your page floating on the water.

It's looking good. Keep workin' away!

Good Luck -
KDLA

[LJK]

Hi -
It's an okay site but agree w/ above comments.
Might be a good idea to break up that acreage with some
backgrounds on the left and right columns.

If you're just starting to learn ANY css, then good going!

If you're truly interested in learning it, then consider dropping the table to structure the layout. [Many would disagree w/ that, but IMHO it's kind of like having hardwood flooring on top of shoddy carpeting ;-).]

Enjoy yourself,
El

[ecampsite.co.uk]

Cheers for the feedback! I did wonder how it would display on larger resolutions, i can only test up to 1024!!! I've modified some of the css and it should display in the center now and leave space on either side. Thats only in res greater than 1024, otherwise a different stylesheet kicks in and displays it full width to fit all the content on. This will be up in a few hours when i get chance to upload my new files!!
Thanks again you guys!!!
Cheers
Craig

[ray326]

I think I'd set a fixed width of 750-800px and center the whole thing.

[ecampsite.co.uk]

Hi again,

I've just added a background to the middle, modified the left column so that the nav doesnt go across 2 lines, and put an image next to the navigation to draw the visitors eye towards that. Do these make it look any better???

Cheers

Craig

[somecallmejosh]

I like the aesthetic of the site, it looks really nice. You could conserve a bit on bandwidth, and minimize your download time by separating your CSS from your HTML document. There are oodles of resources that explain this procedure...

<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" title="The name of your style sheet" />

It looks as though you've combined XHTML and HTML. Closing <li> tags (</li>) is required in XHTML, whereas, which you've done. Way to go... However, <br> tags are deprecated in XHTML. The W3C recommends a specific DOCTYPE for XHTML documents, that is a different than HTML documents. Check out the following link to read more about DOCYPTES and how they can help your site.

http://www.alistapart.com/stories/doctype/


<a href="wlothian.php#1"><font size=1>Linwater Caravan Park</font></a>
You are declaring a font size in your markup. This should be handled through CSS. Declare the size, color, and other visual elements of your <a> tags in your CSS.

Same goes for your table attributes...
<table
align=center
cellspacing=0
cellpadding=0
border=0>
This could all be handled via CSS.

I hope this helps. I really believe you've made the right choice in switching over to CSS. That combined with your knowledge of PHP will be quite marketable.

[ray326]

Much better.

[ecampsite.co.uk]

Thank you for all your comments, I have taken a lot on board and I hope you like the (very nearly) finished product!

www.ecampsite.co.uk

I especially like the search box on my site! That took some work, but I got there. I like the look and feel of my site now! How about you, do you think it is an improvement or a waste of time??
Cheers
Craig

[polaskiglass]

There alot going on on the front page. There's a couple of things that you might consider here. Animated graphics can be cool, however, they can also compete with what really matters. I would opt for a very subtle animation. All visual information operates on a hierarchy. Consider what the most important elements of your page are. What do you want your potential client to focus on? A good rule of thumb is to try to keep your audience from having to think too much.

The color palette is very nice. The page falls apart in a couple of browsers. You might want to try and use fixed width tables to control that. When you are laying out your visuals, try using 'grid'. Using a grid allows you to make alignments of visual elements and 'charging' the design with energy. Watch those text alignments.

I think that the content is really good and the site is a useful tool. Remember, I am a graphic designer..and I see things like this every day and I tend to be more critical as a result. Hopefully this stuff is helpful to you. Good Effort!

[ray326]

Does anyone else see the left nav reposition itself with the first hover or is that a quirk of my system?

[NetNerd85]

This site requires Javascript to be turned on.
Please enable Javascript to view this site.Never force users to do anything. Make the default CSS sheet the 800x600, this should work well for all those that don't have JS enabled.

The site looks good, keep up the good work :)

[KDLA]

The only repositioning I see is, during the mouseover, the text moves over about 5px to allow for the border/background/padding of the hover effect.
Maybe you're just quirky? ;)

KDLA

[aamir619]

it looks great to me well done

[somecallmejosh]

Looks great. Are you using a DB for the backend of your site?

I've been trying to find information on creating effecting search boxes for quite some time. There doesn't seem to be much posted on the internet under the search phrases I've used... ("search boxes", "search boxes + CGI", etc..)

Any advice, Craig? Thanks in advance.

[ecampsite.co.uk]

Hey josh!
Thanks you!
The search is amazing, and there is no database in site, it is just javascript! But really easy to modify and flexible too. It works using a javascript file and xml, but it simple. Go to www.tipue.com the search box is on there, its a download, there's also a forum and help so if you get stuck there's plenty of help, and the best thing, its absolutely free!!!! :)
Hope that helps you!!!
Craig

[somecallmejosh]

Craig,

Thank you so much.... :D

[dera]

remove all this
SCRIPT language="JavaScript" type="text/javascript">
<!--
if ((screen.width>=1280) && (screen.height>=1024))
{
//alert ("1280 X 1024");
document.write ("<link REL=STYLESHEET TYPE='text/css' HREF='main3.css'>");
}
else if ((screen.width>=1024) && (screen.height>=768))
{
//alert ("1024 X 768");
document.write ("<link REL=STYLESHEET TYPE='text/css' HREF='main2.css'>");
}
else if ((screen.width>=800) && (screen.height>=600))
{
//alert ("800 X 600");
document.write ("<link REL=STYLESHEET TYPE='text/css' HREF='main.css'>");
}

//-->
</SCRIPT>

<noscript><center><br><br><br><br><br><br><br>
This site requires Javascript to be turned on.<br>
Please enable Javascript to view this site.<br>
Thanks,<br>
ecampsite.co.uk</center><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><Br><br><br><br><br>
</noscript>

you should not render your page differently according to peoples resoultions your site should be compatable with all resolutions, use fixed widths, if you don't wish to use fixed wish put all your content with in a container and assign a fixed width in css.

[ecampsite.co.uk]

you should not render your page differently according to peoples resoultions your site should be compatable with all resolutions, use fixed widths, if you don't wish to use fixed wish put all your content with in a container and assign a fixed width in css.

This means that it is compatible with all resolutions, it simply means that it is enhanced for those with various sizes. I tried using a fixed width, but I believe it simply just wasnt the right style for my site.

Have you used the search yet Josh?

[somecallmejosh]

Craig,

I've gone to and downloaded the zip files from the site. I've been looking for tutorials (the one's I've come across seem to be a bit vague). I've looked through your markup to see how you've got it set up, but I have yet to completely figure it out (haven't spent that much time yet either). I'd love to get your input in another thread.

Have you considered using a fluid width layout for your site, in an effort to avoid the need for multiple stylesheets and the javascript?

Setting min and max widths on your containers will help with those issues. Dan Cederholm talks about this in his Bulletproof Web Design book. I HIGHLY recommend it. Either that, or check it out for free at http://www.alistapart.com/articles/fauxcolumns.

[babag]

Nice easy on the eyes and pretty clean. Looks good here. Good job.

[ecampsite.co.uk]

Do you like the snow on the site??? Thought I'd make it a bit seasonal???

[ecampsite.co.uk]

just 1 bump!

[powerdemon]

This page is not Valid HTML 4.01 Transitional!

Error Line 41 column 22: document type does not allow element "STYLE" here.
<style type='text/css'><!--

Error Line 130 column 6: end tag for element "HEAD" which is not open.
</head>

Error Line 131 column 5: document type does not allow element "BODY" here.
<body>



css-validator:
Errors
URI : http://www.ecampsite.co.uk/
Line: 97 Context : h2
Invalid number : padding only 0 can be a length. You must put an unit after your number : 4

Line: 103 Context : h3
Invalid number : padding only 0 can be a length. You must put an unit after your number : 4

[ecampsite.co.uk]

cheers for that, will try and sort them out

[vasam]

I'd suggest to make the fixed by width.
Also, update somehow your logo.. looks blured.

Good job!