slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Group 9: Through examples, explain how to build a css navigation bar . PowerPoint Presentation
Download Presentation
Group 9: Through examples, explain how to build a css navigation bar .

Loading in 2 Seconds...

play fullscreen
1 / 9

Group 9: Through examples, explain how to build a css navigation bar . - PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on

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……….

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Group 9: Through examples, explain how to build a css navigation bar .' - wilda


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Group 9: Through examples, explain how to build a css navigation bar.

Presented by:

Daniel Ku, Matt Iannacci & Iphia Henry

what is css

What is CSS?

Let us start by asking the question that is probably on your mind at this moment……….

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 HyperTextMarkup 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.

Group 9: Through examples, explain how to build a css navigation bar.

group 9 h ow to build a css navigation bar
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 h ow to build a css navigation bar1
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, andis the information in the <body></body> is what you CAN see. So everything you put in the HEAD tagswould be the coding that changes the items listed in the BODY tags.At this point you willplace the CSS tag in the between the HEAD tags since it's not what you see but it does affect what is seen. All youCSS coding has to go between the tags noted below here <style type="text/css"________________ </style>

group 9 h ow to build a css navigation bar2
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 h ow to build a css navigation bar3
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 CSSbelow.

group 9 h ow to build a css navigation bar4
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 h ow to build a css navigation bar5
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 h ow to build a css navigation bar6
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