CSS

Navbars

With a site with multiple pages, we add a nav bar in to help navigate the site.

HTML

CSS

The following steps will be required to format the navbar:

Removing the Bullet Points

Create a descendant selector to style only unordered lists elements that are inside a nav element so that the bullet points are removed using the list-style-type:none property.

nav ul {list-style-type:none}

2. Position Horizontally

To ensure the list of hyperlinks is distributed horizontally, each <li> element is floated to the left using the float property.

nav ul li {float:left}

3. Spacing out each item

To create space between each list item, a width is declared and the link text is centred within each width:

nav ul li {float:left;width:80px;text-align:center;}

4. Creating Clickable boxes

In most navigation bars, clicking the area around the hyperlink (not just the text itself) also selects the link. Where as before you had to select the anchor text itself.

A clickable box area around the link text is achieved by displaying the <a> element as a block element (as opposed to inline).

nav ul li a {display:block}

5. Seeting Verticle Alignment

The navbar should be grey as it was back initially but as it is a series of inline elements we need to specify the height. The vertical positioning of the link text in the navigation bar is controlled by declaring the height of the <nav> element and including padding within the <a> element:

nav {height:35px}

nav ul li a {display:block;padding:8px}

6. Add Interactive Colours

The state of the <a> element can be styled to change the background colour and text colour of each link, when the mouse hovers over an <a> element:

nav ul li a:hover {background-color:#000;color:White}

7. Removing the Underline

You could use the text-decoration: none; property to remove the underlines from the hyperlinks.

nav ul li a {

text-decoration: none;

}

Size

Web page design and implementation involves creating areas that either have a fixed size or change size with content or display (changing window size or resolution).

In the example website, the <body> of each web page is set to a fixed width of 800px:

body {width:800px}

The height of the <header>, <nav> and <footer> elements are all set to a fixed size, remaining constant throughout the website:

header {height:80px}

footer {height:60px}

nav {height:35px}

CSS Floats

An element can be positioned on the left or right of its container, using the float property. In the example website, the <img> element has been positioned on the right of its container, the <header> element:

HTML

<h1> School Activities </h1>

</header>

CSS

.imageBanner {width:200px; height:80px; float:right}

Float can be used to wrap text around an image.

Margin also creates space between the graphic and the text.

HTML

The drama department offer…

CSS

.imageIconRight {width:60px; height:90px; float:right; margin-left:10px; margin-bottom:10px;}

Display

Clear

The effect of floating elements continues until cancelled.

You can cancel floating by using the clear property on an element(s).

To ensure that the four main page elements <header>, <nav>, <main> and <footer> start a new line and remain unaffected by any float properties applied elsewhere in the page, clear:both was implemented for these elements.

header, nav, main, footer {display:block; clear:both}

Block, Inline, None

HTML elements have default display values depending on the type of element.

This value specifies how or if an element is to be displayed.

The default display value for most elements is block or inline:

display: block An element takes up the entire width of its container

display: inline An element takes up only as much room as necessary

display: none The element is not visible. The space where the element should

be collapses as if there was no content in that place.

In the <header> element of the example website, the <h1> heading uses display:inline.

This allows the image to be floated level with the heading.

If the <h1> element used display:block it would force the image to float on a new line.

In the music page, display:none is used to hide three <section> elements when the page loads.

JavaScript can be used to display the hidden section when the Junior Choir element is clicked.

Positioning

Margins and Padding

Also known as the box model, stylesheets can define the spaces between elements.

Margin declares a transparent area around the outside of an element; this pushes the element away from adjacent elements.

Padding declares a transparent area inside the edge of the elements; this pushes content in from the edge of the element.

Margins

Margins rules can be declared as:

margin
margin-top
margin-bottom
margin-left
margin-right

These properties can be set to auto or a length in pixels (px)

Margins can be declared on all four sides of an element by using: margin:10px

In theis website, the page elements <header>, <nav>, <div> and <footer> are used to separate out the content when displayed.

The small gap at the top of each area is implemented by styling a margin of 5 pixels at the top of the four elements: header, nav, main, footer {margin-top:5px}

Grouping selectors using commas reduces the amount of code and is more efficient than writing each CSS declaration separately.

Seperate

header {margin-top:5px}

nav {margin-top:5px}

main {margin-top:5px}

footer {margin-top:5px}

Grouped

header, nav, main, footer{margin-top:5px}

Padding

Padding can be declared as:

padding
padding-top
padding-bottom
padding-left
padding-right

These properties can have the value length in pixels (px).

Margins can be declared on all four sides of an element by using: padding:10px

Without Padding

header, div, main, footer, section {padding:0px}

With Padding

header, div, main, footer, section {padding:10px}

This adds white space to the page which improves its usability and user-friendliness.

Google Sites

Report abuse

CSS

Navbars

HTML

CSS

Removing the Bullet Points

2. Position Horizontally

3. Spacing out each item

4. Creating Clickable boxes

5. Seeting Verticle Alignment

6. Add Interactive Colours

7. Removing the Underline

Size

CSS Floats

HTML

CSS

HTML

CSS

Display

Clear

Block, Inline, None

Positioning

Margins and Padding

Margins

Seperate

Grouped

Padding

Without Padding

With Padding