Wednesday, February 18, 2009

Re-using CSS

Question from Bob:

Pages 199-203 (tutorial) show HOW to add a Navigation Bar to a file called tips.html. It is a horizontal menu bar -- looks like it may be called Menubar1 in the tutorial.

My question, HOW do I apply that same horizontal menu bar to my other files ?
For instance, I now want to add the very same horizontal bar menu to a file named about.html 

The devil is in the details.
 

How To Reuse Code...
  1. Investigate
    How is the existing menubar (or other structure) built? Look at the HTML code. Is it a list? Is it images?
  2. Imitate
    Mimic the original structure exactly. Is the menubar code inside an ID'd div? 
  3. What about the CSS?
    Examine the CSS file to see what HTML elements might be styled by it. Anything within the ID'd div could be styled with rules that invoke the div's name.
  4. Test your test file
    Using an internal style sheet copied from the original menubar's style sheet, create an HTML test file to test how it works. When you have it working to your satisfaction, move the styles to your external style sheet and your menubar div to your document.
  5. When you've got it the way you want it...
    Make sure your css is in an external style sheet, linked to the page or pages in your site. Then select the whole div containing the menubar and either Ctrl | C
     or Edit | Copy. Go to the other page and paste it in: Ctrl | V or Edit | Paste. It should immediately look right.
  6. Once you've got it working on one page, consider making a template and you won't even need to cut and paste it. We'll cover templates in class next Wednesday...
Regarding menubars in specific, I suggest starting fresh. Insert | Layout Object | Spry Menu Bar. You may then style it up as you see fit by editing the styles that come with it in the spry menu bar css file. Be sure (when you save the file) to accept the auxiliary files...the javascript file and the css file...so that your menu bar functions.

When you understand the associated css file, you will become comfortable altering the rules to suit your own project. 


No comments:

Post a Comment

Join the conversation!

Note: Only a member of this blog may post a comment.