CSS Marvels

CSS Fixed Menu - Pinned-Down Style

raphael — Tue, 29 Jan 2008 20:47:33 +0000

CSS is such a simple, but powerful mechanism for adding style to websites which makes your design options infinite. One of the most common uses of CSS is to create nice looking and useful menus for websites. We can create all kinds of different styles for menus: Horizontal, vertical, with drop down boxes, etc.

Pinned-Down Style

There’s another technique that I found to be very interesting and pretty cool to apply to our menus. It’s called Pinned-Down Style. Our menu is going to be in a fixed position on the page and when the user scrolls up and down the menu will float over the page at the position we defined.

The XHTML Code:


...



    
        Home
        About Us
        Our Activities
        Contact Us
        Site Map
        Privacy
        Links
        Our Partners
        Articles
    

...

This is just a paragraph with links that we are going to style with CSS. We can see the final result after we apply the following CSS code:

The CSS Code:


div.banner {
	margin: 0;
	font-size: 100% /*adjust to make the menu larger or smaller*/;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	position: fixed;
	top: 2em;
	left: auto;
	width: 8.5em;
	right: 2em;
}

div.banner p {
	margin: 0;
	padding: 0.3em 0.4em;
	font-family: Arial, sans-serif;
	background: #990000;
	border: thin outset #000;
	color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #CCC }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Summary

This is a good technique for a website that has a lot of content. It enables the user to access the menu quickly instead of having to scroll up the page to access the menu in order to navigate the site. What makes this work are the the 2 following rules: position: fixed; which causes the menu to be in a fixed position, and the display: block; that makes the a elements inside the menu to be displayed as block elements causing them to display one below the other.

It would be a good idea to place the XHTML code for the menu at the top of all the content, right below the opening body tag for organization purposes.

That’s it. Pretty simple. Play around with these settings and find the best design for your needs!

Examples:

Click here see an example.

Credits:

W3C: CSS Fixed Menus

A Few Updates and Happy Holidays!

raphael — Wed, 19 Dec 2007 10:52:23 +0000

I just did some minor updates to the site which includes more socializing tools like Technorati and Reddit. Also, to make things a little spicier I added different page banners to the site rotation which can be seen randomly on each page.

I want also to wish everyone a Happy Holiday! I will be out of town to visit some family and friends down south and I’ll be back in a couple of weeks. I can’t say now that I’ll be able to post stuff for you guys, but I’ll try my best to do it while I’m gone.

Happy Holidays!

CSS Image Preloader

raphael — Mon, 17 Dec 2007 10:05:45 +0000

In today’s age of high-speed internet, the last thing that users want to do is to wait for a website to load even if it is for a few seconds. One of the “musts” for today’s web design is to create a website that loads quickly enough so users don’t leave your site before the whole page is displayed.

To minimize this problem, many sites are designed to preload images in order to speed up page display. JavaScript is the most common way to preload images but it is not the only option available. An alternative to JavaScript is to use the CSS display: none; property. This technique may be more reliable and it requires less complex code. Easy!

Preloading images using JavaScript is a good technique, however, browsers must be JavaScript-enabled and have JavaScript turned on. Without JavaScript, the images won’t preload.

CSS: Our Best Preloading Friend!

CSS offers us a simple and reliable option. By using display: none;, we tell the browser to request an image from the server, but not to display it on the page. The browser just requests the image from the server and caches it for future use.

Common Uses:

Use in the home page to load images that will be used on the rest of the website
Cache all the hover images in your site for menus, slide shows, etc.

The CSS Code:

This is a very simple technique. All we need to do is to place the img tags at the beginning, right under the opening body tag and insert CSS style directly within the img tag:

...











...

Very Important: The empty alt tag is important because screen readers will simply ignore the image. You MUST insert the empty alt tag otherwise your website will fail the W3C’s accessibility standards!
A good idea is to insert comments like in the example above just to separate and locate your rollover images

Summary:

That’s it for this technique! Very simple, almost no code and same results as JavaScript.

Replacing Text With Images in CSS

raphael — Tue, 11 Dec 2007 08:24:42 +0000

Sometimes we want to decorate our site with nice looking text but can’t achieve it by just formatting the text to a different font. Why not? Because not all users have the same fonts installed in their systems.

With CSS we can replace a piece of text with an image containing the graphical presentation of the text. These images will only serve the purpose of decorating the page with a fancier font because they don’t carry any value to the content of the page.

How Can We Achieve That?

There are some CSS techniques in which you set the dimensions of the element to the image’s dimensions and define the image to be the element’s background image. Also, to prevent the text from overlaying the image we have to enclose this text in a span tag and hide it in the CSS using display: none;

There is a problem with this technique: If the image cannot be displayed (broken link, corrupted file, etc) nothing will be visible to the user because the only available text is hidden. This is a no-no in today’s accessibility standards!

There’s a very simple way to replace your text with an image file. We will still use our image and text, but this time we are going to place an empty span tag next to the text that we are going to hide. Then we are going to position that image absolutely, causing the image to overlay the text. Let’s get to it!

The Image:

The CSS Code:


h2{
	margin-bottom: 40px;
        font-size: 14px;
}

h2 #chapter1{
	position: absolute;
	width: 240px;
	height: 46px;
	background: url(chapter_1.jpg) no-repeat;
        display: block;
        margin: 0;
        padding: 0;
}

The XHTML Code:


Chapter 1

Note that I added 40 pixels of bottom margin to the h2 element in order to push the paragraph down causing it to clear the image. You can experience with this value depending on the height of your image.

Summary:

With this technique the text will always display even if the image doesn’t load. Also, screen readers will ignore the image and read the piece of text under it - this helps your site’s accessibility. Lastly, this is search engine friendly! Images have no value to search engines but because you have text below them, search engines can read that text. This is a technique that I use abundantly throughout my site.

You can also use this technique with links and also add different images for a rollover state!

Examples:

Click here to see an example.
Click to see a link example with rollover image.

Creating CSS Rollover Buttons

raphael — Thu, 06 Dec 2007 22:06:15 +0000

There are many different alternatives when it comes to creating rollover buttons for the web with the most popular method being JavaScript. This presents many obstacles: You need to write a script in order to preload the image into the browsers cache, the images will flicker in some browser versions (Internet Explorer in particular due to not being able to cache images) and the most important: using images as text replacement is not search engine friendly.

Now there’s an alternative solution with CSS that eliminates all of these problems!

With this particular technique we will combine the power of images (user friendly and eye candy) and text (search engine friendly) to create a nice looking CSS rollover button with no flickering and preloading necessary.

In this example I used only 2 images for the background, one for the normal state of the button and one for the rollover state:

What we will do is change the background by replacing the image every time the user hovers the link and to make a nice contrast we will also change the color of the text.

The CSS Code:



#nav {
  padding: 0;
  list-style-type: none;
  float: right;
  font-weight: bold;
}

#nav li {
  float: left;
}

#nav a {
  float: left;
  width: 97px;
  height: 60px;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
  background: url(image_rested_state.jpg) no-repeat;
  border-right-width: 1px;
  padding-top: 10px;
}

#nav a:hover {
 background: url(image_rollover.jpg) no-repeat;
 color: #000000;
}

The XHTML Code:



	PAGE 1
	PAGE 2
	PAGE 3
	PAGE 4
        PAGE 5

Summary:

This CSS technique allows us to swap images while still keeping text in our link, giving us the advantage of having graphics for human viewers and text for Web Crawlers.

Examples:

You can see a working example at www.ithelps.org

CSS Marvels is Launched!

raphael — Thu, 06 Dec 2007 05:14:42 +0000

I am happy to announce that CSS Marvels has been launched! This is the birth on one of my personal projects and it great to see it come online.

This site will gather CSS resources from all over the web to fulfill everyone’s CSS needs. It will include CSS techniques, tips, tricks and hacks which will make your CSS code work on a wide variety of browsers.

Users have the option to register to this site and become part of CSS Marvel’s online community. Also, you can use a feed reader of your choice to keep track of new postings and updates to CSS Marvels or by subscribing directly to the Article RSS Feeds or to the Comments RSS Feeds.

Hope to see you all here quenching your CSS thirst! New articles are coming soon!

Raphael