Tag Archives: html

CSS Triangles with a Faux Border/Shadow for Navigation Indicators



So today I ran into a conundrum as I was working on the “active” state for a menu for my one of my client’s redesign of their corporate site.

In the design there is an active state of a little triangle indicating what section is active as a full width submenu slides down from beneath the main menu (that tutorial is the works).

So the triangle itself isn’t a problem. I easily created that using the :after psuedo-element.

The problem I ran into was the triangle itself has a border on the left and right sides and then extends across the page beneath the menu.



100% Full Width Header and Footer With Centered Content: Revisited (again!)


59 Comments - LEAVE A COMMENT

2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Edit 2/27/2012: I’ve updated the files to include a fix for links not being clickable in the header as well as an option to have the footer anchored to the bottom of the page! :D

This is a project I’ve been working on over a few years. I introduced my first solution back in 2008. It worked, but had some limitations. After recieving feedback and comments I once again offered another solution in May 2011 that worked great… at first. After testing myself, and reading more feedback and comments I’ve come across another limitation. When you downsize your browser window enough to require a horizontal scroll a curious thing happened. Scroll over to the right edge of the screen the header and footer no longer stretched 100% across the screen.


How do you code?


13 Comments - LEAVE A COMMENT

When you work on a new web design project and have entered the stage for coding, how do you go about it?

Do you start with the HTML and write the whole HTML page first, then code your CSS then troubleshoot?
Do you write all of your CSS first, then the HTML markup, then troubleshoot?
Or, do you write chunks of HTML first, add in the styles, troubleshoot/test, repeat?

Personally, I have done it just about all three ways – but my most often used method is the 3rd. I start from the top and work down to the bottom from left to right. I will start and code the entire header of a site in HTML first – then write my styles. Check in firefox, and repeat. Then, after the whole page is completed I check in all browsers to trouble shoot compatability issues – which are usually minimal and related to IE6 only – go figure!

So, how about you?

How do you code?

View Results

Loading ... Loading ...


How to Use CSS Sprites With Son of Suckerfish Drop Downs


36 Comments - LEAVE A COMMENT

So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.

I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.


Rounded Corner Boxes With Expandable Heights Using CSS and Images


18 Comments - LEAVE A COMMENT

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!