Home>

I am making a web page using HTML and CSS.
We are currently in the process of creating the header logo and menu field.

I want to display the logo image with a relative path, but it is not displayed.
Corresponding source code
<header>
    
      
    
    <ul>
      <li>portfolio</li>
      <li>about</li>
      <li>contact</li>
    </ul>
</header>
header {
  width: 1300px;
  height: 100px;
  margin: 0 auto;
}
.logo {
  float: left;
  margin-top: 50px;
}
What I tried

I think that the positional relationship of the target file is described incorrectly,OrI tried to rewrite it, but it didn't work.

Probably because I don't understand the positional relationship of the page that describes the link, I don't know where the target file is.

If i have time, please let us know.

Supplementary information (FW/tool version, etc.)

The corresponding image (logo.png) is in the images folder above, and the html code can be displayed by clicking the hierarchy called OUTLINE. Looking at the answer, I thought that the html file was not in the correct location of the editor in the first place. If i have any questions, please let me know.

  • Answer # 1

    I don't know if the description that I don't know the positional relationship between the HTML and the image file matches.
    Write some patterns with HTML as index.html and image file as logo.png.


    When index.html and logo.png are in the same hierarchy

    
    <!-Or->
    

    When index.html and [images] folder are in the same hierarchy and logo.png is in [images] folder

    
    <!-Or->
    

    When the [html] folder and the [images] folder are in the same hierarchy, and there is index.html in the [html] folder and logo.png in the [images] folder.


    When the [html] folder and the [images] folder are in the same hierarchy, and there is index.html in the [html] folder and logo.png in the [common] folder in the [images] folder.


    After that, check that the file name and folder name including uppercase and lowercase letters are correct.
    Often the folder I thought was images was image or img. Maybe it was jpg instead of png.


    Addendum 1
    The index.html and [IMAGES] folders are in the same hierarchy, and logo.png is in the [images] folder in the [IMAGES] folder.



    Addendum 2
    I put in Visual Studio Code and tried it.
    There was a function that could display an outline.
    I think that the boundary will be lowered by dragging the part shown in the image, so try lowering it to the place where you can see the HTML files below the image files.

  • Answer # 2

    thisHTMLWhenimagesWhat is the positional relationship between directories?
    If it is the same levelimages/logo.pngIt works with, but if it is one level higher../images/logo.pngIt is necessary to describe as ...