CIT 256 CSS Divs & Buttons

CIT 256 CSS Divs & Buttons Dr. Beryl Hoffman

CSS for Layout We now can make our own divs to divide up a web page : <div id="container"> <div id=“header">Header</div> <div id="nav">Navigation</div> <div id="content">Content here</div> <div id=“footer">Footer</div> </div> • And we can add new CSS rules for each and for the body tag.

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 <body> • Compound: like <ul> <li><a> • Choose New Style sheet first time, add to style sheet after that.

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.

Review: Insert CSS Divs in Dreamweaver • Insert/Layout Object/DivTag(or just type them in <div id=“header”></div>) • 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.

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

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.asp (and first Try It Yourself)

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%; } Make sure there is no <p> tag starting in the content div!

Side Nav Links • Type in Text, make them into links. • Many web designers put the links into an unordered list (we won’t). <ul> <li> <a href=“link1.html”> Home </a> <li><a href=“page1.html”> Page1 </a> </ul> • We will add a style to the links to make them into buttons.

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.

CSS Button Generators • CSS3 Button Generators (don’t use IE): • http://www.cssbuttongenerator.com/ • http://css-tricks.com/examples/ButtonMaker/, • 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.

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

CSS Box Model • From http://imagecss.com/. See also http://www.w3schools.com/css/css_boxmodel.asp

CSS Buttons Cont. • Box tab: • Width: 100px or 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

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/

Box-Shadows Use 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

Gradients Use http://www.cssbuttongenerator.com/ or 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.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');

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.useragentman.com/blog/2011/06/29/full-css3-text-shadows-even-in-ie/

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

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

CIT 256 CSS Divs & Buttons