www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

Lesson 6 Adobe Dreamweaver
Vertical Navigation Panel


In order to add margine to the top and bottom of our page, there is a DIV selection called CONTAINER which contains all the content on our page from top to bottom.   Double click on CONTAINER (in the CSS Panel) and increase the top and bottom margin of 20 more pixels.  click OK

Apply a border at the bottom of the header before the contact.  Click on DIV selector HEADER and apply a border to the bottom of that.

I also wanted to change the color from this gray to something a little more suitable.  Choose colors from the images I have.

SIDE BAR 1 - background category - change color - pick from an image.  Light green - click ok.. . REFRESH in browser.

Test in different browsers.

IE and Firefox display differently.

IE 6 and earlier have bugs, so they do not display CSS properly.

CREATE NAVIGATION PANEL
We're going to put it in the LEFT SIDEBAR part of the page.
The common way to do this is to apply CSS RULES to an unordered list element.

You can see the unordered list tags <ul><li><li><li></ul>
and a <li> List Item tag for each navigation item.

SNIPPETS PANEL (time saver)
So I don't have to type out the unordered list every time I want to create a navigation panel, I can have it stored in my snippets panel.  If you wanted to save as an unordered list template, Open the snippets panel and click the ADD NEW SNIPPETS file and insert as block of code on a page (after highlighting it).

Made an ID called VERTNAV and applied that ID to the unordered list.

CSS code ready to be applied to that unordered list.  Open CSS style page
Put space where you will insert the code.  Insert Code.

vertnav li

Height for button look Height 1%
hover
correct uneven padding on either side of list.

www.weblearningseries.com

Go to next tutorial



 

 

 

 

 

dreamweaver cs3, dreamweaver tutorials, learning dreamweaver, adobe dreamweaver, learn dreamweaver, dreamweaver classes, dreamweaver lessons, how to define a site in dreamweaver, web design, web design tutorials, css, stylesheets in dreamweaver, support, free dreamweaver tutorials, templates, how to adobe
Site Map         

 

Please add us to your website or blog!

Privacy Policy - Disclaimer
free sound files, free media files, free tutorials, free web hosting, cheapest domain names, inexpensive domain names, screen capture software, Computer Software Tutorials, online training videos, computer basics tutorial, free windows tutorial, free computer tutorial for kids, computer programming tutorials, free computer courses, pc tutorial, beginner computer tutorials, free computer software tutorials, free internet tutorial, free typing tutorial programs, computing tutorials, computer science tutorials, graphic design tutorials, free visual basic tutorials, free Photoshop tutorials, newbie computer tutorials free flash tutorials, access tutorial online, computer course, pc maintenance online tutorials, absolute beginners computer tutorials, free online computer classes, frshirtsbestee online learning, free computer training download, free computer tutorial for seniors, computer parts tutorial, computer tutorials for children, computer hardware tutorials, free excel tutorials, computer fundamental introduction basics tutorial, Microsoft tutorial, free grocery coupons, Free computer software tutorials, tech support, technical support, the tech support forum, game development, 3d game development software tutorials, graphic design tutorials, graphic illustration tutorials, character animation and design tutorials, web development, Clipart and Banner Ads, adobe photoshop tutorials and downloads, software lessons, how to do it yourself, Fierce Layouts learn adobe Photoshop, learn silverlight, learn microsoft expressions, asp.net, video editing, youtube video, digital image editing software, national association of Photoshop professionals (naap) Flash Animation, graphics, computer software, computer books, manhattan flash animation presentations for advertising and banner ads, adobe, photoshop, macromedia, microsoft, software and application development, learn to, how to, tutorials, hardware, software Tech Support - Free Technical Support for Beginners and Advanced Users of Computers, Videographers, photographers, Programmers and Web Designers, Tutorials and How To Start, computer help, video, audio, nonlinear editing, cameras, microsoft excel free online video lessons, learn excel, learn microsoft word

Free software tutorials, downloads and technical support information for computer geeks, photographers and videographers.