Images Aren’t Showing Up

Code Help HTML/CSS/JS
1

Question:
The images in the corner aren’t showing up on any other page besides index.html
Repl link:
https://replit.com/@SalladShooter/SaladScript-Doc?v=1

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
  <title>SaladScript Doc</title>
</head>

<body>
	<div class="main-body">
		<nav id="navbar">
      <img class="img" src="Salad.png" alt="SaladScriptLogo.png" width="50em" height="50em">
			<header>SaladScript Doc <span class="badge-square">v 1.0.0</span></header>
			<a href="/index.html" class="nav-link">
				What is SaladScript</a>
      <a href="/HTMLPages/Setup.html" class="nav-link">
        Setup</a>
      <a href="/HTMLPages/Display.html" class="nav-link">
        Display</a>
      <a href="/HTMLPages/Insert.html" class="nav-link">
        Insert</a>
      <a href="/HTMLPages/If.html" class="nav-link">
        If Statements</a>
      <a href="/HTMLPages/Loop.html" class="nav-link">
        Loops</a>
      <a href="/HTMLPages/Func.html" class="nav-link">
        Functions</a>
      <a href="/HTMLPages/Var.html" class="nav-link">
        Variables</a>
      <a href="/HTMLPages/List.html">
        List</a>
      <a href="/HTMLPages/Rest.html">
        Micellanious</a>
		</nav>

		<main id="main-doc">
      <section class="main-section" id="Display">
        <header>
          Display
        </header>
        <p>
          Display is the way you print out a string statement.
        </p>
        <code>
          display("Hello World!")
        </code>
      </section>
    </main>
  </div>
  <style>

html {
  width: 100%;
  height: 100%;
  font-family: Arial;
  animation: moveUp 1s;
}

@keyframes moveUp {
  0% { opacity: 0; transform: translateY(5em); }
  100% { opacity: 1; transform: translateY(0em); }
}
.img {
  border-radius: 25%;

}

.header {
  transform: translate(2.5em,-2em);
  padding-right: 10em;
}   
div.main-body {
	display: grid;
	grid-template-columns: minmax(300px, auto)1fr;
	grid-template-areas: "navbar mainContent";
	grid-gap: 20px;
}

nav#navbar {
	grid-area: navbar;
	position: fixed;
}

nav#navbar a {
	display: block;
	border: 1px solid black;
	padding: 5px;
	margin: 10px 0;
	text-decoration: none;
	color: black;
  border-radius: 0.5em;
}

main#main-doc {
  border-radius: 0.5em;
  background-color: #eeeeee;
  padding: 2em;
	grid-area: mainContent;
}

header {
	font-size: 1.5rem;
	font-weight: bold;
}

code {
  margin-top: -1em;
  border-radius: 0.5em;
	background-color: #CCC;
	display: block;
	padding: 20px;
}

.badge-square {
  font-size: 0.5em;
  display: inline-block;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: blue;
  border-style: solid;
  border-radius: 0.5em;
  border-color: blue;
  border-width: 0.25em;
  color: white;
  width: max-content;
  text-align: center;
}

  </style>
</body>
</html>
2

It’s because the path to your image is relative not absolute. You did Salad.png instead of /Salad.png If you go into the rendered page, it thinks that you’re trying to fetch the image from HTMLPages/Salad.png

3

@CadenChau now the text isn’t in the right placement. For reference the index.html file is correct.

4

wrap the text and image in a div and center them both

<div style="display: flex; align-items: center">
  <img>
  <span></span>
<div>
1 Like
5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.