CSS-Tricks PSD to HTML

HangTab: Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content)

It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowdays with monitors getting bigger and bigger and with higher resolution. Sometimes it’s nice to break the rules though, for effect. Check out Panic’s website for their software Coda.

This is with the browser window fairly small:
coda1.png

And this is with the browser window stretched out:
coda2.png

The “Hangtab” is just an absolutely positioned div:
#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

Here is the CSS-Tricks version. Feel free to download and use freely.

hangtab1.png
hangtab21.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]


Theoretically Related Articles:

Discussion Elsewhere


Responses



Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

Live Comment Preview


Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.