Free XHTML & CSS3 One-Page Template
In response to this week's tutorial, where we are creating a HTML5 & CSS3 template, here is the pure XHTML version. It is compatible with all browser versions, SEO friendly, and features a sleek jQuery scroll effect. Perfect for those cases when you need something up fast.
It is easily modifiable and the code is properly commented.
Just download it from the button above, extract it from the archive, and upload it to your server.
Free for personal and commercial use, as long as you keep the link at the bottom.
The revolutionary web design tool for creating responsive websites and apps.Learn more
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?
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.
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).
Unfortunatelly IE does not support CSS rounded corners yet. You could optionally use the jQuery Corner plug-in. It is used in this manner:
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?
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:
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?
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.
Many, many, thanks,
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.
I though that you may have been using something similar to this method and I had missed it:
Thanks for the reply.
Sorry wrong link:
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
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?