CODEWITHSUNDEEP
htmlcss
Mereics
Mereics

Reputation: 46

HTML and CSS photo not showing up

I am currently learning HTML, CSS, and Javascript. I have a problem. I created a simple navbar and above it, I am trying to display on which page you are currently on and a photo as a logo. The problem is that the photo appears as a border and it won't display.

This is the HTML code:

This is the CSS code:

    body{
        top: 0px;
        margin: 0px;
    }
    nav {   
        width: 200px;
        height: 100%;
        background-color:#00bbbb ;
        position: absolute;
        overflow: hidden;
        left: 0px;
        top:40px;
        bottom: 0px;
    }
    
    a {
        display: table;
        text-decoration: none;
        border-top: 1px solid #03A2A2;
        color: white;
        font-size: 13px;
        width: inherit;
        left:0px;
    
    }
    
    .navbarText{
        color:black;
        font-size: 15px;
        top: 10px;
        position: relative;
        
    }
    
    .fas{
        position: relative;
        height: 36px;
        width: 70px;
        font-size: 18px;
        text-align: center;
        top:10px;
        color: #93f7f7;
    }
    
    
    
    a:hover{
        color:#fff;
        background-color: #fff;
    }
    
    .heads{ 
        background-color: #26c4c4;
        height: 40px;
        width: 100%;
        top: 0px;
        
        
    }
    
    
    .logo{
        position: relative;
        height: 30px;
        width: 30px;
        top: 5px;
    }
    .inline{
        display: inline;
    }
    <!DOCTYPE html>
    
    <html>
    
    </head>
    <title>Learnin</title>
    <link rel="stylesheet" type="text/css" href="style.css" </link>
    <script src="https://kit.fontawesome.com/7a7c16be39.js" crossorigin="anonymous"></script>
    </head>
    
    
    <body>
    
        <div class="heads">
            <h1 class="inline">Home</h1>
            <img class="logo inline" href="/Images/Header/logo.jpg"></img>
        </div>
    <nav>
        <a href="index.html">   
            <i class="fas fa-home"></i>
            <span class="navbarText">Home</span>
        </a>
        <a href="/Tabs/logbook.html">   
            <i class="fas fa-book"></i>
            <span class="navbarText">LogBook</span>
        </a>
        <a href="/Tabs/fleet.html">   
            <i class="fas fa-paper-plane"></i>
            <span class="navbarText">Fleet</span>
        </a>
    </nav>

    
    </body>  
    </html>

And this is how the website looks: Website image

Upvotes: 0

Views: 87

Answers (3)

SpaceDogCS
SpaceDogCS

Reputation: 2968

You used href, the correct attribute is src, learn more here,

<img class="logo inline" src="/Images/Header/logo.jpg"></img>

also, make sure that the address is correct, some times it can be trick, you can open your website, right click on the element and go to Inspect and check if the address is the same that you are expecting

Upvotes: 1

Coder2195
Coder2195

Reputation: 277

The reason why the img isnt showning is because that the image isn't loading itself

Check the URL, make sure it is an image URL and is valid

Upvotes: 0

Nicola Munz
Nicola Munz

Reputation: 73

do this <img class="logo inline" alt="put alternative text here" src="/Images/Header/logo.jpg"/> and fill in the alt for alternative text

Upvotes: 0

Related Questions