raphael haefeli | portland, oregon freelance web design and development » CSS http://www.raphaelhaefeli.com Home of Raphael Haefeli Wed, 11 Aug 2010 22:56:30 +0000 http://wordpress.org/?v=2.9 en hourly 1 CSS Fixed Menu – Pinned-Down Style http://www.raphaelhaefeli.com/css/css-fixed-menu-pinned-down/ http://www.raphaelhaefeli.com/css/css-fixed-menu-pinned-down/#comments Thu, 14 Jan 2010 07:10:56 +0000 Raphael http://www.raphaelhaefeli.com/?p=217 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:


...
<body>

<div class="banner">
    <p>
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Our Activities</a>
        <a href="#">Contact Us</a>
        <a href="#/">Site Map</a>
        <a href="#">Privacy</a>
        <a href="#">Links</a>
        <a href="#">Our Partners</a>
        <a href="#">Articles</a>
    </p>
</div>
...

</body>
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]]> http://www.raphaelhaefeli.com/css/css-fixed-menu-pinned-down/feed/ 3 CSS Image Preloader http://www.raphaelhaefeli.com/images/css-image-preloader/ http://www.raphaelhaefeli.com/images/css-image-preloader/#comments Tue, 15 Dec 2009 09:05:45 +0000 Raphael http://cssmarvels.com/archives/17 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:

...

</head>

<body>

<!--preloaders-->
<img src="image_1.jpg" style="display:none;" alt=""/>
<img src="image_2.jpg" style="display:none;" alt=""/>
<img src="image_3.jpg" style="display:none;" alt=""/>
<!--end preloaders-->

...
  • 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.

]]> http://www.raphaelhaefeli.com/images/css-image-preloader/feed/ 0