troubleshooting Question

URGENT HELP WITH HTML IMAGES NOT SHOWING

Avatar of Mike Moore
Mike Moore asked on
CSSHTML
11 Comments2 Solutions106 ViewsLast Modified:
H iExperts ,

Need help asap, as this is a uni assignment thats due in tomorrow

Finding it really hard to understand why the server can't find my images???

does anyone else have any ideas why???

here are some screenshots below and my code

Social Links LogosScreen-Shot-2017-04-24-at-20.05.13.png
HTML

<!DOCTYPE html>
<html>

<head>
    <title>Keats Hair</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"> </head>

<body>
    <div id="container">
        <div id="mainLogo">
            <div id="kLogo">
                <a href="index.html"><img id="klogoimg" src="/images/logo/klogo.png" /></a>
            </div>
            <div id="logoText"> <img id="logoimg" src="/images/logo/textlogo.png" /> 
            </div>
        </div>
        <div id="mainNav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Our Work</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div id="mainSlider"> 
        
        </div>
        <div id="about">
            <h2>About</h2>
            <p class="desc">Some Text Here</p>
            <div id="videoSection">
                <video id="video" width="400px" controls>
                    <source src="#" /> </video>
            </div>
        </div>
        <div id="salon"></div>
        <h1 id="bsTitle1">Best Sellers</h1>
        <div id="betsSellers"> 
            <div id="imagesleft">
            <img class="bs1" src="images/BrandLogos/loreal.png" /> <img class="bs" src="images/BrandLogos/Wella.png" /> <img class="bs2" src="images/BrandLogos/sasson.png" />
            </div>
            <div id="rightText">
            <h2 id="bsTitle">Best Sellers</h2>
            <p>Lorem ipsum dolor sit amet, duis magna cum ex, ad vix reque reprimique suscipiantur, ex vim saepe numquam propriae. At everti lobortis intellegat usu, in nam nihil nusquam oportere. Id soluta audire his, quo cu audiam postulant. Vel torquatos comprehensam eu, ex rebum etiam novum eum, ne vim probo lobortis. No vitae suscipit nec, labores sapientem aliquando his in.

Illum option cum cu, omittam antiopam et nam. At choro admodum pri. Velit euismod at per, vis ei nulla oporteat. Te utroque constituto eam, ferri dolores in vim. Ei eius feugait duo, an nec facilis volutpat.

Per etiam meliore definitiones in.</p>
            </div>
         </div>
            <div id="float"></div>
        
        <h1 id="bsTitle2">loreal</h1>
        <div id="loreal1"> 
            <div id="imagesright">
            <img class="bs1" src="images/BrandLogos/loreal.png" /> <img class="bs" src="images/BrandLogos/Wella.png" /> <img class="bs2" src="images/BrandLogos/sasson.png" />
            </div>
            <div id="leftText">
            <h2 id="bsTitle3">Loreal</h2>
            <p>Lorem ipsum dolor sit amet, duis magna cum ex, ad vix reque reprimique suscipiantur, ex vim saepe numquam propriae. At everti lobortis intellegat usu, in nam nihil nusquam oportere. Id soluta audire his, quo cu audiam postulant. Vel torquatos comprehensam eu, ex rebum etiam novum eum, ne vim probo lobortis. No vitae suscipit nec, labores sapientem aliquando his in.

Illum option cum cu, omittam antiopam et nam. At choro admodum pri. Velit euismod at per, vis ei nulla oporteat. Te utroque constituto eam, ferri dolores in vim. Ei eius feugait duo, an nec facilis volutpat.

Per etiam meliore definitiones in.</p>
            </div>
        </div>
            <div id="float"></div>
            
        <div id="footer">
            <p>Some Text</p>
            <div id="social"> 
            <img class="social" src="images/social/facebook.png"/> 
            <img class="social" src="images/social/twitter.png"/> 
            <img class="social" src="images/social/youtube.png"/> 
            <img class="social" src="images/social/instagram.png"/>
            </div>
            <p>Copyright © 2017 Keats Hair. All rights reserved. | Web Design by <a href="#">Mike Moore</a></p>
                <div id="footerLinks">
                    <ul>
                        <li><a href="#">PR</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Press</a></li>
                        <li><a href="#">Editorial</a></li>
                    </ul>
                </div>
        </div>
    </div>
</body>

</html>

CSS

/* START CSS RESET */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


/* change colours to suit your needs */

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}


/* change colours to suit your needs */

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* change border colour to suit your needs */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}


/* END CSS RESET */


/* Stylesheet */

#float{
clear: both; 
}

#container {
    width: 100%;
}

#mainLogo {
    position: relative;
    width: 500px;
    height: 230px;
    margin: 30px auto;
}

#kLogo {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0 auto;
}

#klogoimg {
    width: 150px;
    height: 150px;
}

#logoText {
    width: 400px;
    height: 80px;
    position: relative;
    margin: 0 auto;
}

#logoimg {
    width: 400px;
    height: 100px;
}

#mainNav{
width: 800px;
height: 50px;
position: relative; 
margin: 0 auto; 
display: block; 
}

ul{
text-align: center;
}

ul li{
list-style-type: none; 
text-decoration: none; 
display: inline;
margin-right: 50px; 
font-size: 25px; 
font-weight: 300;
}

ul li a{
list-style-type: none; 
text-decoration: none; 
color: black; 
text-align: center;
}

#mainSlider{
width: 100%;
height: 400px; 
background: grey;
border-top: 2px solid black;
border-bottom: 2px solid black; 
}

#about{
text-align: center; 
font-size: 30px; 
font-weight: 300;
margin-top: 50px; 
}

.desc{
font-size: 15px;
font-weight: 150;
margin-top: 15px; 
}

#videoSection{
width: 100%; 
height: 500px; 
background: grey; 
}

#video{
height: 400px; 
width: 800px; 
margin-top: 50px;
background: black; 
}

#salon{
background-image: url("../images/salon.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 600px;
}

#bsTitle{
font-size: 30px; 
font-weight: 300;
margin-top: 50px;
}

#bestSellers{
width: 100%; 
height: 250px; 
}

.bs{
width: 120px; 
height: 80px; 
display: inline;
margin-left: 30px;
margin-top: 5px; 
}

.bs1{
width: 120px; 
height: 70px; 
display: inline;
margin-left: 0px; 
}

.bs2{
width: 120px; 
height: 70px; 
display: inline;
margin-left: 30px; 
}

#bsTitle1{
position: absolute;
font-size: 30px; 
font-weight: 300;
margin-top: 50px;
margin-left: 13%;
border: 2px solid black;
padding: 5px 10px;
margin-bottom: 20px; 
}

#imagesleft{
width: 35%;
height: 100px;
float: left;
margin-left: 13%;
margin-top: 90px; 

}

#rightText{
width: 35%;
height: 200px;
float: right;
margin-right: 13%; 
}

#loreal1{
width: 100%; 
height: 250px;    
}

#bsTitle2{
position: absolute;
font-size: 30px; 
font-weight: 300;
margin-top: 130px;
margin-left: 52%;
border: 2px solid black;
padding: 5px 10px;
margin-bottom: 20px;
}

#imagesright{
width: 35%;
height: 100px;
float: right;
margin-right: 13%;
margin-top: 160px; 
}

#leftText{
width: 35%;
height: 200px;
float: left;
margin-left: 13%; 
margin-top: 160px; 
}

#bsTitle3{
position: absolute;
font-size: 30px; 
font-weight: 300;
margin-top: -30px;
margin-right: 15%;

}

#footer{
background: grey; 
text-align: center;
height: 200px; 
}

#footer p {
margin-top: 20px; 
margin-bottom: 20px;  
}

#social{
margin-bottom: 20px; 
width: 100%;
margin-right: 10px; 
}

.social{ 
width: 50px; 
height: 50px; 
position: relative; 
margin: 0 auto;
}

#footerLinks li a{
margin-top: 20px;
font-size: 18px;
}

Any help would be great thanks
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 11 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros