Dan Olsavsky's Blog

Thursday, November 8, 2007

CSS Rollovers for Top Navigations

This is an oldie but a goodie. This is a good foundation for those whom would like to take the next step and add rounded corners via CSS.

The Objective.

Create a SEO friendly top navigation using CSS to control image rollovers.

The HTML.

<ul>
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>this</span></a></li>
<li><a href="#"><span>that</span></a></li>
<li><a href="#" class="ninetytwo"><span>the other</span></a></li>
</ul>

The CSS.

(note: i have added a class to control the width of the end list item. This came about because I have one list item that is smaller than the rest. I changed the color of the list item so you can see which one I am referring to.)

/* global selectors */
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 463px;
height: 45px;
}
ul li{
float: left;
}
ul li a span{
display:block;
margin: 10px 0px 0px 0px;
text-align: center;
}
/* 93 px wide nav elements */
ul li a{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 93px;
background-color: #eee;
}
ul li a:hover{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 93px;
background-color: #aaa;
}
/* 92 px wide nav elements */
ul li a.ninetytwo{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 92px;
background-color: #000;
}
ul li a:hover.ninetytwo{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 92px;
background-color: #ccc;
}

The Rest.

Change the background colors to background images.

The Example.

http://danolsavsky.com/css-top-nav-rollover.html

posted by dano at 10:16 AM 0 comments

Understanding and Troubleshooting CSS, HTML and JavaScript

Here are a few tips, more to come...

Resources
Troubleshooting

  • Reference these Websites:
  • Validate your CSS/(X)HTML
  • CSS/(X)HTML
    • Use background colors on block level elements
    • Use the !important declaration to correct cascading errors
    • Check that your styles are cascading correctly
      • make a new style sheet(s)
        • global
        • forms
        • screen
        • print
        • ie
    • Use firefox web developer tools
      • firebug
      • web developers toolkit
      • measure it
    • Margin vs. Padding
      • margin defines the white space around an HTML element's border
      • while padding refers to the white space within the border
      • Padding will add to the width of an element
    • Block vs. Inline
      • Block - Takes up the full width available, with a new line before and after (display:block;)
        • div, h1 ... h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form
      • Inline - Takes up only as much width as it needs, and does not force new lines. Margin-top/bottom or padding-top/bottom values are ignored. Cant change the width in IE. (display:inline;)
        • span, a, strong, em, img, br, input, abbr, acronym
    • ul, p, h1, h2, h3, h4, h5, h6, blockquote, form, label, ul, ol, dl and fieldset tags have default padding
    • When block doesnt accept the values for your margin or padding, try adding a span tag to fix the problem.
    • strip div's
    • Remove all padding and margin
* {
padding:0;
margin:0;
}
    • Browsers have slightly different defaults for heading sizing and margins.
    • Create a style sheet for ie
    • Add an ie conditional comment
    • Internet Explorer's misinterpretation of the CSS box model means the border and padding are included in the width of the content, as opposed to added on
    • You CAN use percentages and pixels
    • Try using position: relative on floated elements if your backgound images are dissappearing
    • Min height and Min width dont work in IE...use two divs, an outer div that controls the percentage width AND the minimum width, and an inner div which holds the content. The outer div has a width equal to the percentage width and a right (or left) border equal to the minimum width.
    • CSS ID vs. Class
      • Standards specify that any given id name can only be referenced once within a page or document. From our experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there are usually only one menu per page, one banner, and usually only one content pane.
      • Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page
      • You can use multiple classes to style an HTML element but you can only use one ID when styling an HTML element. This means that class selectors have a wider range of applications.
      • IDs have higher specificity than classes
      • There may be times when a declaration conflicts with another declaration. These conflicts are resolved using the Cascade Rules. In simple terms, if a class selector and ID selector were to be in conflict, the ID selector would be chosen.
    • Global selectors will over-ride anyhting that is cascaded below them (regardless)
    • One liners, if you can out all of your variables on one line, do so. It minimizes the code and can help prevent browser errors (in older browsers).
    • JavaScript
      • Re-order your JavaScript
      • make sure your JavaScripts variables are defined after the function
    • General
      • Dont use deprocated tags
- Dan Olsavsky

posted by dano at 9:36 AM 0 comments

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.