Free XHTML & CSS3 One-Page Template

Very nice! Thanks for the great freebie :)

One suggestion I would make is having the 'Go Up' button at the base of each section, rather than just in the footer.

Why you include jQuery before closing body tag? And why not in the header?

Hi there,
A very nice article about HTML 5 and CSS. I'm need to stuyd more about these topics, but I have one question: is there an alternative to get the round corners to work in IE 7? In my version of IE, 7.0.5730.11CO, it is not working.

If you have a suggestion I'm all ears.
Thanx,
Casimir

@Batfan
Actually this was the initial idea. However I decided to keep it clean and sacrifice some of the functionality (and decrease the laziness factor of the template).

@Pavel
It is considered a good practice to include the JS files at the bottom of the page (the browser does not have to wait for all the JavaScript includes to load so it can show the page). I've left the HTML5 enabling script in the head, though, because it does not work if it is included in the body.

@Casimir
Unfortunatelly IE does not support CSS rounded corners yet. You could optionally use the jQuery Corner plug-in. It is used in this manner:

$('nav, article, nav ul li a,figure').corner("10px");

I have no idea how it would look in the template though.

Thank`s Martin for the tip and for the answering my question!

I'm playing around with this lovely template, and like Batfan I'm interested in having the 'Go Up' button at the end of each section. In fact, I've put it at the end of a section and it works fine, but it jumps rather than doing the smooth gliding thing that makes it so classy. Is there anything I can do to make it slide?

@ Jude

This is because the scrollTo plug-in (responsible for the smooth page scroll) is not monitoring those new links. To fix this, you have to change this line in script.js:

$('nav a,.footer a.up').click(function(e){

To this:

$('nav a,a.up').click(function(e){

By removing the footer part of the selector, we are telling jQuery to look for links with a class set to up in the whole page, and not just the footer.

Ah yes, I got that to work. Now when I go DOWN from the navigation to an article on the page it jumps not scrolls. Have I done something stupid?

Hi,
sorry I'm still trying to sort the CSS XHTML Template. All I have done is replace a single image. The first 2 of yours, work fine, but the final image has no rounded corners. What is trick please.

http://www.maiocv.com/test/cssTemplate/template.html

Many, many, thanks,

Barton

@ Barton

The only difference with the images I've used is that they have dark backgrounds, which blend with the border. If you look closely you will see that they are also not being rounded.

You can easily solve this problem by just using rounded PNG images in the first place.

Thanks Martin,

I though that you may have been using something similar to this method and I had missed it:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Thanks for the reply.

Sorry wrong link:

http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Great template....I really like the look and its simplicity. Great Job! I posted it up on my site @ http://resourcehive.com/2010/04/06/free-xhtml-css3-one-page-template-tutorialzine/

playing around with this, as you can see the most fustrating thing is that the images although i have saved a transparent png are coming out as squares

http://chunkfive.com/tests/test2.html

http://chunkfive.com/tests/images/test1.png

also in the tutorial part of this what sort of script is the white bit that hovers with a link back to the tutorial.

great work with the site all the tutorials are brilliant

This is great work, Ideal template for a quick job, Thank you :)

thank you wery much

thanks all! very very good templates.

@Pavel You might load jquery at that exact point just in case your page doesnt fully load, so you can show at least your page if it fails. Thats becoming a gd practice these days :)

Great Template, thanks for sharing!

Since a lot of users using the "back" button of the browser, is there a possibility that the user is going back to the top of the site when he or she clicks the "back" button of the browser?

the menu doesn't eccept external links because of the script.js how can I change that?