CIT C++ Input and Output
Download
Report
Transcript CIT C++ Input and Output
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
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/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 Layout
The nav div can be styled to be at the top or
the side using CSS
<div id="container">
Nav
Content
<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.a
sp (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_boxmo
del.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://csstricks.com/almanac/properties/b/borderradius/
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_boxshadow.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), colorstop(1, #dfdfdf) );
background:-moz-linear-gradient( center top,
#ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradi
ent(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