www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

Creating CSS Layouts in Adobe Dreamweaver
Part 2 - Nested Divs


CSS rules that control your DIVs
Each DIV is ruled by controls in the CSS
As soon as you draw out a DIV, right away, Dreamweaver creates a rule for you.

Could double click on HEADER - Can control the categories inside of the dialog box.
Each of my rules is preceded by a number sign.

AP div means Absolute Positioning

Put a DIV inside of another DIV = Nested DIV

Single click inside of Main Div and open Code
Top of code are all of rules.

Creating rules inside of an internal style sheet.  Means these rules only apply to this page.
Rules:
#header
#content
#footer

External Style Sheets are SITE WIDE

a DIV is html

make sure cursor is inside of the CONTENT DIV

Hit enter a couple of times to give yourself from room.

White space doesn't really matter in code.

drop another div inside this

Go to insert menu at the top
Look for Layout Objects
Div Tag
New CSS Style
Dialogue box comes up
Make sure the Selector Type is set to ADVANCED -
Name for Selector Type is going to be #MENU
Selector has to be preceded by a # sign

"This Document Only" is the INTERNAL style sheet.

Internal vs. External

Create them all internal and then boot them into an External Later.

Hit OK
Then dialogue shows up
Positioning Type = Absolute
Dimensions for menu object = width 100 pixels height 450 (main content div)

Positioning - Top = 0
Left = 0

Background color so you can temporarily see the div

OK OK

DESIGN VIEW
Save
Double check inside the browser

END




 
 
   

 

 

 

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, adobe dreamweaver, web editing, web design, cs3, dream weaver, css, dreamweaver, extensions, Free, tutorials, Tutorials, learn dreamweaver, how to use dreamweaver
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.