group 9: through examples, explain how to build a css navigation bar
DESCRIPTION
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry. What is CSS?. Let us start by asking the question that is probably on your mind at this moment………. - PowerPoint PPT PresentationTRANSCRIPT
Group 9: Through examples, explain how to build a css navigation bar.
Presented by: Daniel Ku, Matt Iannacci & Iphia Henry
S
What is CSS?
Group 9: Through examples, explain how to build a css navigation bar.
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation the formatting and the visual aesthetics of a document written in a markup language for example HyperText Markup Language which is (HTML).CSS is designed primarily to make it easier to style the over all look of web pages. It is used to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements
such as the layout, colors and fonts.
Let us start by asking the question that is probably on your mind at this moment……….
Group 9: How to build a css navigation bar.
First thing, when you start a file you'll have the basic layout as shown below and in the diagram on the right:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document </title></head><body></body></html>
Group 9: How to build a css navigation bar.
Everything in the <head></head> section of the HTML document is what you CAN'T see in your web browser, and is the information in the <body></body> is what you CAN see. So everything you put in the HEAD tags would be the coding that changes the items listed in the BODY tags.
At this point you will place the CSS tag in the between the HEAD tags since it's not what you see but it does affect what is seen. All you CSS coding has to go between the tags noted below here <style type="text/css"________________ </style>
Group 9: How to build a css navigation bar.
As you can see above, the <style type="text/css">________________ </style>Has been inserted in the HEAD tag!
Group 9: How to build a css navigation bar.
One way to build a horizontal navigational bar on CSS, is to mark up the links as an unordered list with the tags <ul></ul> and <li></li>.
This approach may seem like the links will be listed in a vertical column however CSS rules enable an override to the default presentation. Instead of a list going downwards with bullets, it'll now go horizontally without bullets.
An example of a horizontal navigational bar done on CSS below.
Group 9: How to build a css navigation bar.
Add the <nav> tag to the list tag. Your HTML looks like this: <ul id="nav">
<li id="nav-first page"><a href="link to your first page">First Page Navigation Heading</a></li>
<li id="nav-secondpage"><a href="link to your second page">Second Page Heading</a></li> and so on.
Group 9: How to build a css navigation bar.
Here's the CSS code that transforms the list of text links into a navigation bar: div#navbar2 {width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #336699;display:inline; padding:0; margin:0}
These characteristics define how the navigational bar looks like, the size, colour, borders and etc.
Group 9: How to build a css navigation bar.
View samples at the link below:http://www.w3schools.com/css/css_navbar.asp
Creating CSS Navigation - a Tabbed CSS Menu http://www.youtube.com/watch?v=LXdsBFn0nYk