How do I add a Logo the the top left of the Navigation Bar?-CodePudding

Right now the Logo image is included in the HTML code at line 17, it is titled Studio Ghibli Logo. How can I move this so it could be in the top left of the navbar ref image

Is there a better way to get code the navbar vs the code I included? Feel free to suggest tips, tools, or references.

I include a snippet of my code.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #52b2cf;
}

li {
  margin-left: 50px;
  float: Left;
}

li a {
  display: block;
  border-radius: 20px;
  background-color: #fffbeb;
  color: #7b81ab;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 15px 18px;
  padding-right: 70px;
  padding-left: 70px;
  margin: 20px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #fff1cc;
}

.active {
  background-color: #d8d5f2;
}

body {
  background-color: ghostwhite;
  border-style: solid;
  border-color: white;
}

img {
  margin-left: 10px;
}

h1 {
  color: darkslateblue;
  margin-left: 20px;
  margin-left: 10px;
}

h2 {
  color: lightcoral;
  border-style: outset;
  border-color: white;
  margin-left: 10px;
}

p {
  margin-left: 15px;
  color: darkslateblue;
}

img {
  margin-left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
<title>Spirited Away Fansite</title>

<ul>
  <li><a  href="Home.html">Home</a></li>
  <li><a href="FilmPlot.html">Film Plot</a></li>
  <li><a href="cast.html">Cast</a></li>
  <li><a href="prod.html">Production</a></li>
  <li><a href="recept.html">Reception</a></li>
</ul>

<body>
  <img src="images/Studio_Ghibli_logo.svg.png" alt="Studio Ghibli Logo" width="200" height="90">
  <h1> 千と千尋の神隠し ∘ Spirited Away </h1>
  <p> This is a fansite for the Studio Ghibli Film Spirited Away </p>
  <h2> ABOUT </h2>
  <p>
    Spirited Away (Japanese: 千と千尋の神隠し, Hepburn: Sen to Chihiro no Kamikakushi, 'Sen and Chihiro's Spiriting Away') is a 2001 Japanese animated fantasy film written and directed by Hayao Miyazaki, animated by Studio Ghibli for Tokuma Shoten, Nippon Television
    Network, Dentsu, Buena Vista Home Entertainment, Tohokushinsha Film, and Mitsubishi. Spirited Away tells the story of Chihiro Ogino (Hiiragi), a ten-year-old girl who, while moving to a new neighborhood, enters the world of Kami (spirits of Japanese
    Shinto folklore).<br>
  </p>
  <img src=images/Spirited_Away_Japanese_poster.png alt="Spirited Away Movie Poster" width="290" height="400"> <img src="images/hayaomiya.jpg" alt="Hayao Miyazaki at desk" width="290" height="400">

</body>

CodePudding user response：

I would nest the ul and the image in nav and call it navbar. Then you can set that nav to display: flex; with justify-content: space-between;. Lastly, just move the background color from the ul to the new div.

I also went through and cleaned up the ul and the li, a's styles to make a bit more responsive. Whether you want to use those is completely up to you.

Side note - the body element is supposed to contain all page elements including nav ul's.

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #52b2cf;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.navbar {
  background-color: #52b2cf;
}


li a {
  display: block;
  border-radius: 20px;
  background-color: #fffbeb;
  color: #7b81ab;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 10px;
  white-space: nowrap;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #fff1cc;
}

.active {
  background-color: #d8d5f2;
}

body {
  background-color: ghostwhite;
  border-style: solid;
  border-color: white;
}

h1 {
  color: darkslateblue;
  margin-left: 20px;
  margin-left: 10px;
}

h2 {
  color: lightcoral;
  border-style: outset;
  border-color: white;
  margin-left: 10px;
}

p {
  margin-left: 15px;
  color: darkslateblue;
}

body>.navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
<title>Spirited Away Fansite</title>

<body>
  <nav >
    <img src="https://w0.peakpx.com/wallpaper/217/740/HD-wallpaper-studio-ghibli-logo-black-and-white-studio-ghibli-totoro-thumbnail.jpg" alt="Studio Ghibli Logo" width="50" height="50" >
    <ul>
      <li><a  href="Home.html">Home</a></li>
      <li><a href="FilmPlot.html">Film Plot</a></li>
      <li><a href="cast.html">Cast</a></li>
      <li><a href="prod.html">Production</a></li>
      <li><a href="recept.html">Reception</a></li>
    </ul>
  </nav>
  <h1> 千と千尋の神隠し ∘ Spirited Away </h1>
  <p> This is a fansite for the Studio Ghibli Film Spirited Away </p>
  <h2> ABOUT </h2>
  <p>
    Spirited Away (Japanese: 千と千尋の神隠し, Hepburn: Sen to Chihiro no Kamikakushi, 'Sen and Chihiro's Spiriting Away') is a 2001 Japanese animated fantasy film written and directed by Hayao Miyazaki, animated by Studio Ghibli for Tokuma Shoten, Nippon Television
    Network, Dentsu, Buena Vista Home Entertainment, Tohokushinsha Film, and Mitsubishi. Spirited Away tells the story of Chihiro Ogino (Hiiragi), a ten-year-old girl who, while moving to a new neighborhood, enters the world of Kami (spirits of Japanese
    Shinto folklore).<br>
  </p>
  <img src=images/Spirited_Away_Japanese_poster.png alt="Spirited Away Movie Poster" width="290" height="400"> <img src="images/hayaomiya.jpg" alt="Hayao Miyazaki at desk" width="290" height="400">

</body>

CodePudding user response：

You should definitely put the ul into the body (every HTML element you display on the page has to go in the body). And then there is a nav tag which you could use:

<nav>
    <img src="https://w0.peakpx.com/wallpaper/217/740/HD-wallpaper-studio-ghibli-logo-black-and-white-studio-ghibli-totoro-thumbnail.jpg" alt="Studio Ghibli Logo" width="50" height="50">
    <ul>
      <li><a  href="Home.html">Home</a></li>
      <li><a href="FilmPlot.html">Film Plot</a></li>
      <li><a href="cast.html">Cast</a></li>
      <li><a href="prod.html">Production</a></li>
      <li><a href="recept.html">Reception</a></li>
    </ul>
</nav>

I would like to give you more tips on your navbar but it is not clear how you want it to look like.

CodePudding user response：

you want to just take your logo image and make it a list item in your nav.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #52b2cf;
}

li {
  margin-left: 50px;
  float: Left;
}

li a {
  display: block;
  border-radius: 20px;
  background-color: #fffbeb;
  color: #7b81ab;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 15px 18px;
  padding-right: 70px;
  padding-left: 70px;
  margin: 20px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #fff1cc;
}

.active {
  background-color: #d8d5f2;
}

body {
  background-color: ghostwhite;
  border-style: solid;
  border-color: white;
}

img {
  margin-left: 10px;
}

h1 {
  color: darkslateblue;
  margin-left: 20px;
  margin-left: 10px;
}

h2 {
  color: lightcoral;
  border-style: outset;
  border-color: white;
  margin-left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
<title>Spirited Away Fansite</title>
<ul>
  <li><img src="images/Studio_Ghibli_logo.svg.png" alt="Studio Ghibli Logo" width="200" height="90"></li>
  <li><a  href="Home.html">Home</a></li>
  <li><a href="FilmPlot.html">Film Plot</a></li>
  <li><a href="cast.html">Cast</a></li>
  <li><a href="prod.html">Production</a></li>
  <li><a href="recept.html">Reception</a></li>
</ul>
<body>
  <h1> 千と千尋の神隠し ∘ Spirited Away </h1>
  <p> This is a fansite for the Studio Ghibli Film Spirited Away </p>
  <h2> ABOUT </h2>
  <p>
    Spirited Away (Japanese: 千と千尋の神隠し, Hepburn: Sen to Chihiro no Kamikakushi, 'Sen and Chihiro's Spiriting Away') is a 2001 Japanese animated fantasy film written and directed by Hayao Miyazaki, animated by Studio Ghibli for Tokuma Shoten, Nippon Television
    Network, Dentsu, Buena Vista Home Entertainment, Tohokushinsha Film, and Mitsubishi. Spirited Away tells the story of Chihiro Ogino (Hiiragi), a ten-year-old girl who, while moving to a new neighborhood, enters the world of Kami (spirits of Japanese
    Shinto folklore).<br>
  </p>
  <img src=images/Spirited_Away_Japanese_poster.png alt="Spirited Away Movie Poster" width="290" height="400"> <img src="images/hayaomiya.jpg" alt="Hayao Miyazaki at desk" width="290" height="400">
</body>

CodePudding user response：

You could Bootstrap for this or set up a CSS grid so that you can then set the dive to a place on the page then just left justify the content.