dsn1674-project-2

Project 2: Basic Layout | Ashley Murray, Group 020/010

dsn1674-project-2's People

Contributors

Watchers

dsn1674-project-2's Issues

Navigation links not working.

@thomasjbradley

So I have finished building the site. Looks just like the mock-up... only my navigation links aren't working. In other words, when you click on the tabs under the header in the navigation bar, it does nothing. It's like their plain text; however they are fitted with href tags and their respective id tags. I gave you both my html and my css, just in case you need them to see.

<!DOCTYPE html>
<html lang="en-ca">

<head>
    <meta charset="utf-8">
    <link href="css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chinese Zodiac</title>
</head>

<body>

    <header id="back">

        <div class="header">
            <h1>生肖<small>Chinese Zodiac</small></h1>
            <img class="medallion" src="images/medallion.svg" alt="Image of a Chinese medallion set behind the header.">
        </div>

        <nav>
            <ol>
                <li class="li-left"><a href="#dragon">龍 — Dragon</a></li>
                <li class="li-left"><a href="#goat">羊 — Goat</a></li>
                <li class="li-right"><a href="#rooster">雞 — Rooster</a></li>
                <li class="li-right"><a href="#ox">牛 — Ox</a></li>
            </ol>
        </nav>

    </header>

    <main>

        <div class="div-banner">
            <img class="banner" src="images/banner.jpg" alt="An illustrated nature scene.">
            <h2>Shēngxiào</h2>
        </div>

            <p class="p1">The Shēngxiào literally “birth likeness”, is a scheme and systematic plan of future action that relates each year to an animal and its reputed attributes according to a 12-year mathematical cycle and it remains popular in several East Asian countries including China, Vietnam, Korea, Japan, and Thailand.</p>

        <div class="div-dragon">
            <h3 id="dragon">Dragon</h3>
                <img class="right" src="images/dragon.svg" alt="The Chinese character for dragon.">
                <img class="left" src="images/dragon-symbol.svg" alt="Symbol of a dragon.">
                <p>Magnanimous, stately, vigorous, strong, proud, noble, direct, dignified, passionate.</p>
        </div>

        <div class="div-goat">
            <h3 class="pw" id="goat">Goat</h3>
                <img class="left" src="images/goat.svg" alt="The Chinese character for goat.">
                <img class="right" src="images/goat-symbol.svg" alt="Symbol of a goat.">
                <p class="pw">Gentle, softhearted, considerate, attractive, hardworking, persistent, thrift.</p>
        </div>

        <div class="div-rooster">
            <h3 class="pw" id="rooster">Rooster</h3>
                <img class="right" src="images/rooster.svg" alt="The Chinese character for rooster.">
                <img class="left" src="images/rooster-symbol.svg" alt="Symbol of a rooster.">
                <p class="pw">Deep thinkers, honest, bright, communicative, ambitious, capable, warm-hearted.</p>
        </div>

        <div class="div-ox">
            <h3 id="ox">Ox</h3>
                <img class="left" src="images/ox.svg" alt="The Chinese character for ox.">
                <img class="right" src="images/ox-symbol.svg" alt="Symbol of an ox.">
                <p>Persistent, simple, honest, straightforward, industrious, patient, cautious.</p>
        </div>

    </main>

    <aside>
        <p><a href="#back">Back to top</a></p>
    </aside>

</body>
</html>

html {
    font-family: 'Noto Sans', sans-serif;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

.header {
    background-color: #e7001d;
    text-align: center;
    color: #fff;
}

h1 {
    text-shadow: #222 2px 2px 3px;
    width: 100%;
    text-align: center;
    font-size: 3em;
    position: absolute;
    left: 0;
    margin: 0;
    top: 15px;
}

small {
    font-size: 0.9rem;
    display: block;
}

.medallion {
    width: 100px;
    margin: 1em;
    z-index: 0;
}

nav {
    background-color: #222222;
}

nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    width: 50%;
    border: 1px solid #000;
    background-color: #222;
    padding: 0;
    margin: 0;
    font-size: 1.2em;
}

nav a {
    display: block;
    text-decoration: none;
    color: white;
    background-color: #222;
    padding: 0.5em;
    margin: 0;
}

.li-left {
    float: left;
}

.li-right {
    float: right;
}

.banner {
    width: 100%;
}

.div-banner {
    position: relative;
}

h2 {
    position: absolute;
    bottom: 0.5em;
    text-align: center;
    font-size: 2em;
    color: #fff;
    text-shadow: #222 2px 2px 3px;
    font-style: italic;
    width: 100%;
}

.p1 {
    padding: 1em;
    padding-bottom: 1.5em;
    font-style: normal;
}

.div-dragon {
    background-color: #e4c22a;
    text-align: center;
}

.div-goat {
    background-color: #222222;
    text-align: center;
}

.div-rooster {
    background-color: #bc0017;
    text-align: center;
}

.div-ox {
    background-color: #e4c22a;
    text-align: center;
}

h3 {
    margin: 0;
    padding: 1em 0 1em 0;
    font-size: 1.5em;
    font-weight: bolder;
}

.left {
    float: left;
    width: 50%;
    padding-bottom: 1em;
}

.right {
    float: right;
    width: 50%;
    padding-bottom: 1em;
}

p {
    margin: 0;
    padding-bottom: 2em;
    font-style: italic;
    font-size: 0.8em;
}

.pw {
    color: #fff;
}

aside {
    background-color: #222222;
    text-align: center;
    padding-top: 1.5em;
}

aside a {
    text-decoration: underline;
    color: #fff;
    font-style: normal;
}

Recommend Projects