BLOG DESIGN SOLUTIONS Removing the top border will (Web hosting ratings)
BLOG DESIGN SOLUTIONS Removing the top border will ensure that the lb_menuback_leaf.gif images sits flush with the lb_header_leaf.gif image in the header. Also of note is the padding. A 20px padding-top is applied using CSS shorthand, and this can be adjusted to reduce the distance between masthead and menu tabs. If you alter this padding, you should alter your lb_menuback_leaf.gif accordingly. Here s the revised CSS: #nav_wrapper { padding: 20px 0 0; border-left: 1px solid #000; border-right: 1px solid #000; background: url({site_url}themes/site_themes/ . logical_blocks/lb_menuback_leaf.jpg); } You will now have your #header and #nav_wrapper blocks joining visually, with two background images joined. You can upload into Photoshop and refine these images and then put them back in the root/themes/site_themes/logical_blocks directory if you desire. Tabs I mentioned that many elements power the actual menu tabs. Controlling a horizontal menu list is a tricky thing. It is simple to force the list items to sit horizontally using display:inline, but to apply link, hover, selected state images and alternative link colors and weights requires a number of properties to be applied. Some of these help your menu display well on older browsers, too. For the Leaf design, you need to replace the selected.gif, tab.gif, and tabover.gif images in the root/themes/site_themes/logical_blocks directory. Three alternate tab images that reflect the Leaf style (selected_leaf.gif, tab_leaf.gif, and tabover_leaf.gif) are provided at www.friendsofed.com for download. Alternatively, remove the image references in the CSS (by removing the url(…) part) to leave just color references: background: #CCC; Note that rather than specifying the light gray as #CCCCCC, you use #CCC, which is nice and short. It is possible to abbreviate any hexadecimal reference if it has three equal groups of numbers or letters following the format #aabbcc or has no variation such as #aaaaaa. In this situation, you need to specify each character only once, so a nice orange such as #ee9933 can be abbreviated to #e93. As for grabbing your own colors, the Dreamweaver and Photoshop palettes are perfect, or visit the WC3 documentation at www.w3schools.com/css/css_colors.asp for a bit more information. You want more? You might want to have more than six menu tabs, and there isn t room for seven or eight. In this case, find the #nav_header ul#primary a, #nav_header ul#primary span, #nav_header ul#primary a.current statement, and adjust the width declaration of 102px to suit your needs. You need to make the width of each button smaller if you want to include more.