Posted on Wednesday, January 13, 2010 |
|
Leave a comment
Filed under CSS
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:
...
<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
Top ↑
Posted on Friday, January 8, 2010 |
|
Leave a comment
Filed under Tips and Tricks · Wordpress
Do you use Twitter on a daily basis? If so, you know how good Twitter is for sharing with everyone what you find interesting around the web. Here’s a great way to give your readers a chance to share your WordPress blog posts with their friends and bring more visitors to you.
This is a very simple Worpress hack where you will create a link to Twitter with a status parameter. We will use the function the_permalink() to get the page URL:
<a href="http://twitter.com/home?status=Currently reading <?php the_permalink();?>"
title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a>
You can add this line of code to your single post file (single.php) in order to display it on each individual post and also add it to your main index template (index.php) to display under each post title in the blog’s index page.
Source: How to: Create a “Send this to Twitter” button.
Enjoy!
Top ↑
Posted on Thursday, January 7, 2010 |
|
Leave a comment
Filed under News · Portfolio · Projects
My latest project has just gone live. Amuse Resort Wear is a start-up company based in Portland, Oregon dedicated in serving women with design fashion from the world’s most exciting vacation places. The simple site now serves as an online presence with many more features to come. Check them out at
www.amuseresortwear.com!
Top ↑
