cit 256 css divs & buttons dr. beryl hoffman. css for layout we now can make our own divs to...
TRANSCRIPT
CIT 256 CIT 256 CSS Divs & ButtonsCSS Divs & Buttons
Dr. Beryl HoffmanDr. Beryl Hoffman
CSS for LayoutCSS for LayoutWe now can make our own divs to divide up a web We now can make our own divs to divide up a web page :page :
<div id="container"><div id="container">
<div id=“header">Header</div> <div id=“header">Header</div>
<div id="nav">Navigation</div> <div id="nav">Navigation</div>
<div id="content">Content here</div> <div id="content">Content here</div>
<div id=“footer">Footer</div> <div id=“footer">Footer</div>
</div></div>
And we can add new CSS rules for each and for the And we can add new CSS rules for each and for the body tag.body tag.
Review: New CSS Rule in Review: New CSS Rule in DreamweaverDreamweaver
Hit the + button at the bottom Hit the + button at the bottom of the CSS panel on the top of the CSS panel on the top right.right.– ID: used once, use for divsID: used once, use for divs– Class: can be used many times.Class: can be used many times.– Tag: for html tags like <body>Tag: for html tags like <body>– Compound: like <ul> <li><a>Compound: like <ul> <li><a>
Choose New Style sheet first Choose New Style sheet first time, add to style sheet after time, add to style sheet after that.that.
Review: Edit CSS Div RulesReview: Edit CSS Div Rules
TypeType: for font, text color: for font, text color
BackgroundBackground: background color : background color or imageor image
BoxBox: for width/height, margins, : for width/height, margins, padding!padding!
To re-edit, double click on a rule To re-edit, double click on a rule like header in the CSS panel on like header in the CSS panel on the top right or hit the pencil the top right or hit the pencil icon at the bottom of the panel.icon at the bottom of the panel.
Review: Insert CSS Divs in Review: Insert CSS Divs in DreamweaverDreamweaver
Insert/Layout Object/Div Tag (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 LayoutCSS for 2 Column Layout
The nav div can be styled to be at the top or the The nav div can be styled to be at the top or the side using CSSside using CSS<div id="container"><div id="container">
<div id=“header">Header</div> <div id=“header">Header</div>
<div id="navbar">Navigation</div> <div id="navbar">Navigation</div>
<div id="content">Content here</div> <div id="content">Content here</div>
<div id=“footer">Footer</div> <div id=“footer">Footer</div>
</div></div>
Float navbar to the left and set its width to 20% Float navbar to the left and set its width to 20% (in Box).(in Box).
Nav Content
CSS Float propertyCSS Float property
Makes a div element float to the left or Makes a div element float to the left or right of its container.right of its container.
The floated element always needs a The floated element always needs a width!width!
See See http://imagecss.com/ and and http://www.w3schools.com/css/css_float.asp (and first Try It Yourself)(and first Try It Yourself)
2 Col CSS Layout in Dreamweaver2 Col CSS Layout in Dreamweaver
Insert/Layout Object/Div for the container, header, Insert/Layout Object/Div for the container, header, sideNav, content, footer, etc.sideNav, content, footer, etc.
Set the container to 80-90% width and left/right Set the container to 80-90% width and left/right margin auto, margin-top:0margin auto, margin-top:0
Set #navbar { float: left; width: 20%; } Set #navbar { float: left; width: 20%; } Box Box
Set #content { margin-left: 20%; } Set #content { margin-left: 20%; }
Set #footer { clear: both; // to clear floatSet #footer { clear: both; // to clear float
width: 100%; }width: 100%; }
Make sure there is no <p> tag starting in the content Make sure there is no <p> tag starting in the content div!div!
Side Nav LinksSide Nav LinksType in Text, make them into links. Type in Text, make them into links.
Many web designers put the links into an Many web designers put the links into an unordered list (we won’t). unordered list (we won’t).
<ul><ul>
<li> <a href=“link1.html”> Home </a><li> <a href=“link1.html”> Home </a>
<li><a href=“page1.html”> Page1 </a><li><a href=“page1.html”> Page1 </a>
</ul></ul>
We will add a style to the links to make We will add a style to the links to make them into buttons.them into buttons.
CSS3 Text made into buttonsCSS3 Text made into buttons
Buttons and nav bars without images can be created using CSS including rounded corners (border radius), shadows, gradients, etc.
AdvantagesAdvantages: Easy to change text. No : Easy to change text. No extra images. No Photoshop necessary.extra images. No Photoshop necessary.
DrawbackDrawback: different browsers do the CSS : different browsers do the CSS differently so lots of CSS code variants.differently so lots of CSS code variants.
CSS Button GeneratorsCSS Button GeneratorsCSS3 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:Advanced CSS:Make your own Simple CSS ButtonMake your own Simple CSS ButtonCreate a new CSS rule (+) for your button. Create a new CSS rule (+) for your button.
Type: set font, text color, text decoration: Type: set font, text color, text decoration: nonenone
Background: set background colorBackground: set background color
Block: display:blockBlock: display:block
Box: see next slideBox: see next slide
CSS Box ModelCSS Box Model
From From http://imagecss.com/. See also . See also http://www.w3schools.com/css/css_boxmodel.asp
CSS Buttons CSS Buttons Cont.Cont.
Box tab: Box tab: – Width: 100px orWidth: 100px or
15%-20%,15%-20%,– Float: Left,Float: Left,– Uncheck Padding and Margin same for allUncheck Padding and Margin same for all– Set left/right padding to 10-20px (this is the Set left/right padding to 10-20px (this is the
button’s width around the text)button’s width around the text)– Set left/right margin to 5-10px (this is the space Set left/right margin to 5-10px (this is the space
between this button and other buttons).between this button and other buttons).
Border: solid, colorBorder: solid, color
Rounded CornersRounded Corners
border: 2px solid; or background color and
border-radius: 10px; // most current border-radius: 10px; // most current browsersbrowsers
-moz-border-radius: 10px; // for old firefox-moz-border-radius: 10px; // for old firefox
-webkit-border-radius: 10px; // for old safari-webkit-border-radius: 10px; // for old safari
See See http://css-tricks.com/almanac/properties/b/border-radius/
Box-ShadowsBox-ShadowsUse Use http://www.cssbuttongenerator.com/
Creates a drop box look around the button.Creates a drop box look around the button.
box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-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 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;#ffffff;
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
GradientsGradientsUse Use http://www.cssbuttongenerator.com/ or or http://www.colorzilla.com/gradient-editor/http://www.colorzilla.com/gradient-editor/
background:-webkit-gradient( linear, left top, left background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );#dfdfdf) );
background:-moz-linear-gradient( center top, background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );#ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradiefilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');nt(startColorstr='#ededed', endColorstr='#dfdfdf');
Make your own Text Logo Make your own Text Logo with CSS Text Shadowswith CSS Text Shadows
Text-shadows work in all browsers except IE. Text-shadows work in all browsers except IE. Add the property at the bottom of the CSS Add the property at the bottom of the CSS panel properties.panel properties.
Choose 2px for x & y offsets and blur and Choose 2px for x & y offsets and blur and choose a different color.choose a different color.
http://www.w3schools.com/cssref/http://www.w3schools.com/cssref/css3_pr_text-shadow.aspcss3_pr_text-shadow.asp
http://www.useragentman.com/blog/http://www.useragentman.com/blog/2011/06/29/full-css3-text-shadows-even-in-ie/ 2011/06/29/full-css3-text-shadows-even-in-ie/
CSS3 FontsCSS3 Fonts
CSS3 allows you to download or link to any CSS3 allows you to download or link to any font to use it! font to use it!
Use @font-face rule: Use @font-face rule: http://www.w3schools.com/css3/css3_fonts.asp
http://www.google.com/webfonts/ is the best http://www.google.com/webfonts/ is the best way! Just link to their fonts.way! Just link to their fonts.
Choose a font and click on Use button to Choose a font and click on Use button to generate the code to add to your page to use generate the code to add to your page to use that font.that font.
SummarySummaryUse CSS and divs for layout using Box Use CSS and divs for layout using Box properties and floating.properties and floating.
CSS3 has the power to do a lot of things CSS3 has the power to do a lot of things that used to be done in Photoshop graphic that used to be done in Photoshop graphic images: text shadows, box shadows, fonts, images: text shadows, box shadows, fonts, gradient colors, rounded corners, etc.gradient colors, rounded corners, etc.
But browser-dependent code is a pain!But browser-dependent code is a pain!
So, use online generators like So, use online generators like http://www.cssbuttongenerator.comhttp://www.cssbuttongenerator.com