'Why is the image not showing up in the <title> division?

*{
    padding: 0vw;
    margin: 0vw;
}

nav{
    background-color: rgba(52, 52, 146, 0.829);
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 45px;
    position:sticky;
    top: 0px;
}

ul {
    display: inline-flex;
    list-style-type:none;

}

navl{
    border-color:red ;
    border-style: dotted;
    align-items: center;}
navr{
    border-color:red ;
    border-style: dotted;

}

main{
    justify-content: space-between;
    display: flex;
}
left{
    border-color: red;
    border-style: dotted;
    width: 30vw;
    height: 400px;
    display: inline-flex;
    position: sticky;
    top: 45px;
}
center{
    border-color: red;
    border-style: dotted;
    width: 30vw;
    height:5000px;
    display: inline-flex;
}
right{
    border-color: red;
    border-style: dotted;
    width: 27vw;
    height: 300px;
    display: inline-flex;
}

cover{
    border-style: dashed;
    border-color: red;
    width: 60vw;
    height: 350px;
    background-image: url(cover.jpg);
}

content{
    display:flex;
    flex-direction: column;
}

main{
    padding: 0px 60px;
    border:10px greenyellow double ;
}

interact{
    width: 60vw;
    height: 30px;
    border: 5px blue dashed;
}

feed{
    margin-top: 20px;
}

.src{

}

body{
    background-color: aliceblue;
}
title{
    width:100%;
    height:30px;
    display: inline-flex;
    flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <navl>
            <ul> 
                <li><img src="home.png" alt="logo"></li>
                <li class="src"><input type="search"></li>
                <li><img src="search.png" alt="hit"></li>
            </ul>
        </navl>

        <navr>
            <ul>
                <li><img src="party.png" alt="dp" style="width: 30px;" ></li>
                <li style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; color:white;padding-top: 6px;">Jason</li>
                <li>i1</li>
                <li>i2</li>
                <li>i3</li>
                <li>i4</li>
                <li>i5</li>
            </ul>
        </navr>
    </nav>
    <main>
        <left>
            <span>left</span>
        </left>
        <content>
            <cover>

            </cover>
            <interact>
                <l-int>

                </l-int>
                <r-int>

                </r-int>
            </interact>
            <feed>
                <center>
                    <post>
                        <title>
                            <img src="group.png" alt="" srcset="">
                        </title>

                    </post>
                </center>
                <right>
                    <span>right</span>
                </right>
            </feed>
        </content>
    </main>


</body>

</html>

Why is the image not showing up in the division ? Instead the line-- -- is showing up in the box. I am trying to create a facebook clone. I am a beginner trying to learn web development. I think only the title div is relevant to this problem and not the entire code. 1st code is HTML while 2nd is CSS stylesheet

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions