Build a Sleek Portfolio Site from Scratch
There’s nothing like building an entire site to show you a good overview of how a CSS layout should work. In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.
Print This Post
Horizontal CSS Menus That Grow on You
In this quick tutorial, I'm going to discuss how to create a neat little menu effect. I'm dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it's a list menu.
We're going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it's going to get taller and the text larger and bold. I'll link to a finished example at the end of the tutorial.
Let's begin by setting up the XHTML for the menu. This is pretty straightforward and simple. We just want to make an unordered list and give it an id of "navlist".
Print This Post
Accessible Graphical CSS Menus
When designing a web site, it's generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let's face it, though, sometimes that's not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here's a little trick that will give you the best of both worlds. We're going to build a graphically-based navigation menu out of an unordered list.
Print This Post
Create a Glossy CSS menu
Menus are a very important part of contemporary web design, for the simple reason that if there’s no menu, people can’t do much really, like a shopping centre or mall with no floor. The hard part when making a menu is to make it look good and make it accessible… (you don’t want an amazing Flash menu as a main nav because people may not have Flash Player, hence it’ll be inaccessible). Luckily for us though CSS is vastly cross-browser, yes i know even supported in IE believe it or not!
Print This Post
Design a mirror website flash navigation menu
In this lesson you will see how easy it is to create a nice Flash website menu interface and make it work also! Particularly, you will learn how to:
- Create simple buttons and duplicate them,
- Make your link text look crisp and readable,
- Make mirror copies of your buttons easily,
- Design and code a simple navigational system.
In the Flash example below you can see what you are going to create with this tutorial. Try clicking the buttons!
Print This Post
Build a CSS Menu with Rollovers
This article is for people who have little to no experience with CSS. I will explain very detailed which codes to use and how to use them. At the end of this tutorial, you can code yourself this rollover menu, completed in CSS and HTML.
Print This Post
Step 6 – Design the Layout
Once you know what your site will contain you can begin the layout design process. This is basically the look and feel of your website. During this phase you will finalize on the layout of the pages.
Print This Post
Live Help
Coupons
Social Badge
Subscribe
Links
Recent Comments
- Katherine Campbell on 301 Redirect – The SEO way to rename or move files or folders
- Rusty on Center Multiple DIVs with CSS
- Zachary Graham on Release Notification: 11.25.0 DNSONLY
- Trinity James on 301 Redirect – The SEO way to rename or move files or folders
- Isabelle Gonzales on 301 Redirect – The SEO way to rename or move files or folders
Recent Posts
- Center Multiple DIVs with CSS
- Better Page Corner Ads with CSS3 Transforms
- A Do-It-Yourself Search Engine Optimization Technique That Will Work Miracles For You?
- 10 Ways To Increase Your Blog’s Pageviews
- 3 Most Important Services For A Profitable Internet Home Business
Categories
- Blogging (19)
- News (55)
- Random Articles (12)
- SEO Tips (34)
- Site Promotion (19)
- Traffic Generation (18)
- Tutorials (66)
- css (22)
- flash (8)
- html (8)
- illustrator (7)
- JavaScript (6)
- photoshop (7)
- php (8)
- Website building (20)
Tag Cloud
Tikier Hosting Offer
