1. CIT 256 CSS Divs & Buttons Dr. Beryl Hoffman

2. CSS for Layout We now can make our own divs to divide up a web page : Header Header Navigation Navigation Content here Content here Footer Footer </div> And we can add new CSS rules for each and for the body tag.

3. Review: New CSS Rule in Dreamweaver Hit the + button at the bottom of the CSS panel on the top right. –ID: used once, use for divs –Class: can be used many times. –Tag: for html tags like –Tag: for html tags like –Compound: like –Compound: like Choose New Style sheet first time, add to style sheet after that.

4. Review: Edit CSS Div Rules Type: for font, text color Background: background color or image Box: for width/height, margins, padding! To re-edit, double click on a rule like header in the CSS panel on the top right or hit the pencil icon at the bottom of the panel.

5. Review: Insert CSS Divs in Dreamweaver Insert/Layout Object/Div Tag (or just type them in ) Click on the New CSS Rule button at the bottom or type in an id like header and design the style later in the CSS panel.

6. CSS for 2 Column Layout The nav div can be styled to be at the top or the side using CSS Header Header Navigation Navigation Content here Content here Footer Footer </div> Float navbar to the left and set its width to 20% (in Box). Nav Content

7. CSS Float property Makes a div element float to the left or right of its container. The floated element always needs a width! See http://imagecss.com/ and http://www.w3schools.com/css/css_float.a sp (and first Try It Yourself) http://imagecss.com/ http://www.w3schools.com/css/css_float.a sphttp://imagecss.com/ http://www.w3schools.com/css/css_float.a sp

8. 2 Col CSS Layout in Dreamweaver Insert/Layout Object/Div for the container, header, sideNav, content, footer, etc. Set the container to 80-90% width and left/right margin auto, margin-top:0 Set #navbar { float: left; width: 20%; }  Box Set #content { margin-left: 20%; } Set #footer { clear: both; // to clear float width: 100%; } width: 100%; } Make sure there is no tag starting in the content div!

9. Side Nav Links Type in Text, make them into links. Many web designers put the links into an unordered list (we won’t). <ul> Home Home Page1 Page1 </ul> We will add a style to the links to make them into buttons.

10. CSS3 Text made into buttons Buttons and nav bars without images can be created using CSS including rounded corners (border radius), shadows, gradients, etc. Advantages: Easy to change text. No extra images. No Photoshop necessary. Drawback: different browsers do the CSS differently so lots of CSS code variants.

11. CSS Button Generators CSS3 Button Generators (don’t use IE): – –http://www.cssbuttongenerator.com/ http://www.cssbuttongenerator.com/ – –http://css-tricks.com/examples/ButtonMaker/,http://css-tricks.com/examples/ButtonMaker/ – –http://cssmenumaker.com/ http://cssmenumaker.com/ Copy the generated CSS into your CSS file. You may have to add width: 20% or 200px. Type in text, make it into a link and then choose your button class name from the Class: menu at bottom.

12. Advanced CSS: Make your own Simple CSS Button Create a new CSS rule (+) for your button. Type: set font, text color, text decoration: none Background: set background color Block: display:block Box: see next slide

13. CSS Box Model From http://imagecss.com/. See also http://www.w3schools.com/css/css_boxmo del.asp http://imagecss.com/ http://www.w3schools.com/css/css_boxmo del.asphttp://imagecss.com/ http://www.w3schools.com/css/css_boxmo del.asp

14. CSS Buttons Cont. Box tab: –Width: 100px or 15%-20%, 15%-20%, – Float: Left, –Uncheck Padding and Margin same for all –Set left/right padding to 10-20px (this is the button’s width around the text) –Set left/right margin to 5-10px (this is the space between this button and other buttons). Border: solid, color

15. Rounded Corners border: 2px solid; or background color and border-radius: 10px; // most current browsers -moz-border-radius: 10px; // for old firefox -webkit-border-radius: 10px; // for old safari See http://css- tricks.com/almanac/properties/b/border- radius/ http://css- tricks.com/almanac/properties/b/border- radius/http://css- tricks.com/almanac/properties/b/border- radius/

16. Box-Shadows Use http://www.cssbuttongenerator.com/ http://www.cssbuttongenerator.com/ Creates a drop box look around the button. box-shadow:inset 0px 1px 0px 0px #ffffff; -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; http://www.w3schools.com/cssref/css3_pr_box- shadow.asp http://www.w3schools.com/cssref/css3_pr_box- shadow.asp

17. Gradients Use http://www.cssbuttongenerator.com/ or http://www.colorzilla.com/gradient-editor/ http://www.cssbuttongenerator.com/ http://www.colorzilla.com/gradient-editor/http://www.cssbuttongenerator.com/ http://www.colorzilla.com/gradient-editor/ background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color- stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradi ent(startColorstr='#ededed', endColorstr='#dfdfdf');

18. Make your own Text Logo with CSS Text Shadows Text-shadows work in all browsers except IE. Add the property at the bottom of the CSS panel properties. Choose 2px for x & y offsets and blur and choose a different color. http://www.w3schools.com/cssref/css3_pr _text-shadow.asp http://www.w3schools.com/cssref/css3_pr _text-shadow.asp http://www.useragentman.com/blog/2011/ 06/29/full-css3-text-shadows-even-in-ie/ http://www.useragentman.com/blog/2011/ 06/29/full-css3-text-shadows-even-in-ie/

19. CSS3 Fonts CSS3 allows you to download or link to any font to use it! Use @font-face rule: Use @font-face rule: http://www.w3schools.com/css3/css3 _fonts.asphttp://www.w3schools.com/css3/css3 _fonts.asp http://www.google.com/webfonts/http://www.google.com/webfonts/ is the best way! Just link to their fonts. http://www.google.com/webfonts/ Choose a font and click on Use button to generate the code to add to your page to use that font.

20. Summary Use CSS and divs for layout using Box properties and floating. CSS3 has the power to do a lot of things that used to be done in Photoshop graphic images: text shadows, box shadows, fonts, gradient colors, rounded corners, etc. But browser-dependent code is a pain! So, use online generators like http://www.cssbuttongenerator.com http://www.cssbuttongenerator.com