CODEWITHSUNDEEP
htmlcss
Christian Borden
Christian Borden

Reputation: 1

Images for links within list not displaying. HTML5 & CSS3

The HTML:

<!DOCTYPE html>


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="IndexStyleTesting.css" title="IndexStyleTesting">
    <title>Christian's Portfolio</title>
</head>

<body>

    <div id="wrapper"> 

        <div id="callout">
            <p>Contact me at <b>(386)123-4567</b></p>
        </div>           

        <header>
            <a href=""><img scr="MyHeaderImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a>
        </header>

        <nav>
            <ul>
                <li class='active'><a href="">Home</a></li>
                <li><a href="">About Me</a></li>
                <li><a href="">HTML5 and CSS3 Projects</a></li>
                <li><a href="">Other Projects</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact Me</a></li>
            </ul>

            <div class="clearfix"></div>

        </nav>

        <div class="banner">
            <img scr="MyBannerImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/> 
        </div>

        <div align="center">
            <img scr="NextImageOfBigWordsHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>                 </div>

        <section class="left-col">
            <p style="text-indent: 50px";>Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph                   Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here                     Paragraph Here Paragraph Here </p>
            <p style="text-indent: 50px";>Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second                        Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here                      Second Paragraph Here Second Paragraph Here </p>
        </section>

        <aside class="sidebar">
            <div class="RightImage">
                <img scr="MyRightImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            </div>
        </aside>

        <div class="clearfix"></div>

        <div class="section">
            <h3>Left Section</h3>
            <img scr="MyLeftSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            <p></p>
        </div>

        <div class="section">
            <h3>Middle Section</h3>
            <img scr="MyMiddleSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            <p></p>
        </div>

        <div class="section">
            <h3>Right Section</h3>
            <img scr="MyRightSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            <p></p>
        </div>

        <div align="center"> 
            <img scr="NextImageOfBigWordsHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
        </div>
        <footer>
            <div class="section">
                <p>Christian</p>
                <p><b>(386)123-4567</b> <br>
                    Top Notch Coding <br>
                    [email protected]</p>
            </div>

            <div class="section">
                <ul>
                    <li><a href=""><img scr="IndexImagesTesting/Facebook.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Googleplus.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Twitter.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Youtube.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                </ul>
            </div>

            <div class="section">
                <img scr="RightLogoImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            </div>            
        </footer>

    </div>

    <p style="text-align: center; padding: 0px;">&#169;Copyright - Christian 2015</p>

</body>

The CSS:

body {
    background-image: url("IndexImagesTesting/wood.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 16px;
    overflow: auto;
}

h1, h2, h3 {
    text-align: center;
    padding-left: 5%;
    color: #00CC99;
}

p {
    padding-left: 2%;
    color: #000000;
}

img {
    text-align: center;
    max-width: 100%;
    height: auto;
    width: auto;
}

#wrapper {
    margin: 0 auto;
    max-width: 1020px;
    width: 98%;
    background: #FEFEE8;
    border: 1px solid #684E36;
    border-radius: 2px;
    box-shadow: 0 0 10px 0px rgba(12, 3, 25, 0.8);
}

#callout {
    width: 100%;
    height: auto;
    background: #00CC99;
    overflow: hidden; 
}

#callout p {
    text-align: right;
    font-size: 13px;
    padding: 0.1% 5% 0 0;
    color: #FEFEE8;
}

#callout p a {
    color: #FEFEE8;
    text-decoration: none;
}

header {
    width: 98%;
    min-height: 125px;
    padding: 5px;
    text-align: center;

}

nav ul {
    list-style: none;
    margin: 0px;
    padding-left: 50px;
}

nav ul li {
    float: left;
    border: 1px solid #00CC99;
    width: 15%;
}

nav ul li a {
    background: #FEFEE8;
    display: block;
    padding: 5% 12%;
    font-weight: bold;
    font-size: 18px;
    color: #00CC99;
    text-decoration: none;
    text-align: center;
}

nav ul li a:hover, nav ul li.active a {
    background-color: #00CC99;
    color: #FEFEE8;
}

.banner img {
    width: 100%;
   /* border-top: 1px solid #00CC99;
    border-bottom: 1px solid #00CC99; */
}

.clearfix {
    clear: both;   
}

.left-col {
    width: 55%;
    float: left;
    margin: -2% 1% 1% 1%;
}

.sidebar {
    width: 40%;
    float: right;
    margin: 1%;
    text-align: center;
}

.banner {
    float: left;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 1%, 1%;

}

.section {
    width: 29%;
    float: left;
    margin: 2% 2%;
    text-align: center;
}

footer {
    background: #00CC99;
    width: 100%;
    height: auto;
    overflow: hidden;
}

footer p, footer h3 {
    color: #FEFEE8;
}

footer p a {
    color: #FEFEE8;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;

}

ul li a {
    display: block;
    width: auto;
    height: 60px;
}

ul li img {
    height: 48px;
}


/*THIS IS WHERE MEDIA STARTS*/
@media screen and (max-width: 478px) {
    body {
        font-size: 13px;
    }  
}

@media screen and (max-width: 740px) {
    nav {
        width: 100%;
        margin-bottom: 10px;
    }
    nav ul {
        list-style: none;
        margin: 0 auto;
        padding-left: 0;
    }
    nav ul li {
        text-align: center;
        margin-left: 0 auto;
        width: 100%;
        border-top: 1px solid #00CC99;
        border-right: 0px solid #00CC99;
        border-left: 0px solid #00CC99;
        border-bottom: 1px solid #00CC99;
    }
    nav ul li a {
        padding: 8px 0;
        font-size: 16px;
    }
    .left-col {
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
    .section {
        width: 100%;
        float: left;
        margin: 0;
    }
}

The problem:

                <div class="section">
                <ul>
                    <li><a href=""><img scr="IndexImagesTesting/Facebook.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Googleplus.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Twitter.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Youtube.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                </ul>
            </div>

I know that the links are pointing to the correct location because when I hover over them in Brackets the correct images appear. I also tried using completely different images to be sure that wasn't it. I have tried setting their width and height manually using inline style and through css sheet to no avail.

What am I missing or doing wrong here??

Thank you!!!

Upvotes: 0

Views: 81

Answers (2)

Tipsy
Tipsy

Reputation: 68

shouldn't it be 

    img src

instead of

    img scr

Upvotes: 0

Alexei Darmin
Alexei Darmin

Reputation: 2129

scr should be src

Insert loren ipsum text since the answer is too short* :)

Upvotes: 1

Related Questions