Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Horizontal Navbar

Horizontal Navigation Bar

Two methods exist for creating a horizontal navigation bar: utilizing inline or floating list items.

Inline List Items

For the inline list items approach, you can construct a horizontal navigation bar by setting the <li> elements to display inline, in conjunction with the “standard” code from the preceding page.

Example

li {
display: inline;
}

Explanation of the example:

display: inline; –By default, `<li>` elements are displayed as block elements. In this instance, we eliminate the line breaks preceding and following each list item to present them on a single line.

Alternatively, for the floating list items method:

A horizontal navigation bar can also be achieved by floating the <li> elements, allowing for a specified layout of the navigation links.

Example

li {
float: left;
}

a {
display: block;
padding: 8px;
background-color: #dddddd;
}

Explanation of the example:

Utilizing float: left; enables adjacent block elements to float alongside each other.
Setting display: block; allows for the specification of padding (as well as height, width, margins, etc. if desired).
Padding: 8px; establishes spacing between each <a> element, enhancing their appearance.
Applying background-color: #dddddd; imparts a gray background color to each <a> element.

Tip: To achieve a full-width background color, consider applying the background-color to <ul> instead of individually to each <a> element.

Example

ul {
background-color: #dddddd;
}

Horizontal Navigation Bar Examples

Craft a simple horizontal navigation bar featuring a dark background color, and alter the background color of the links upon mouse hover.

Example

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}

Active/Current Navigation Link

Include an “active” class to the current link to indicate to the user which page they are currently on.

Example

.active {
background-color: #04AA6D;
}

Right-Align Links

Achieve right alignment of links by floating the list items to the right using float:right;.

Example

<ul>
  <li><a href=”#home”>Home</a></li>
  <li><a href=”#news”>News</a></li>
  <li><a href=”#contact”>Contact</a></li>
  <li style=”float:right”><a class=”active” href=”#about”>About</a></li>
</ul>

Border Dividers

Apply the border-right property to <li> elements to establish link separators.

Example

/* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

Fixed Navigation Bar

Ensure that the navigation bar remains fixed at either the top or bottom of the page, regardless of the user’s scrolling action.

Please note that fixed positioning may not function correctly on mobile devices.

Gray Horizontal Navbar

An illustration showcasing a horizontal navigation bar with a gray hue and a subtle gray border.

Home
News
Contact
About

Example

ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li a {
color: #666;
}

Sticky Navbar

Include position: sticky; to the <ul> element to implement a sticky navbar.

A sticky element transitions between relative and fixed positioning based on the scroll position. Initially positioned relatively, it switches to a fixed position once it reaches a specified offset in the viewport, effectively “sticking” in place similar to position: fixed.

Example

ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

Please note that Internet Explorer does not support sticky positioning, while Safari requires a `-webkit-` prefix (as illustrated in the example above). Additionally, for sticky positioning to function properly, you must specify at least one of the following: top, right, bottom, or left.