How do I add corner logos into Footer using Html & CSS?-CodePudding

So for one of my school projects, we have to design a website using Html & CSS and I've encountered a problem where I don't know how to fit 2 logos (left & right) into the corners of my footer. I've tried to change the position, float, width etc and it doesn't seem to work, the logo always seems to not go in the place I want it to be. Sorry if this sounds amateur as I've only started doing Html & CSS a few weeks ago.

This is the current image where the logo is below my ul's and is in the incorrect position. -

This is what I want the footer to look like, it would be great to have the text on the left "Sponsored by HP omen gaming" to be a image as I may swap it out with another logo in the future. -

Thanks to anyone in advance who may be able to solve this problem for me, below would be my html & CSS code.

.footer {
  background-color: #035642;
  margin-top: 10px;
  height: 60px;
  color: #efe5d0;
  text-align: center;
  padding: 15px;
  font-size: 100%;
  font-family: Arial;
  display: block;
}

.footer ul {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  margin: 10px;
  overflow: hidden;
}

.footer li {
  text-decoration: none;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  list-style-type: none;
  display: inline-block;
}

.footer ul li {
  display: inline-block;
}

.footer ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #efe5d0;
  background-color: #5c755e;
  text-align: center;
  font-family: arial;
  font-weight: bold;
}

.footer ul li a:hover {
  color: #000;
  background-color: #fff;
}

#footer-right {
  height: 50px;
  width: auto;
  position: fixed;
  float: right;
}

<div class="footer">
  <li>WBHS ESPORTS</li>
  <ul>
    <li><a href=" " target="_blank">Facebook</a></li>
    <li>|</li>
    <li><a href=" " target="_blank">YouTube</a></li>
    <li>|</li>
    <li><a href=" " target="_blank">Twitch</a></li>
  </ul>

  <img src="hp-omen-logo.png" id="footer-right">

</div>

CodePudding user response：

Try look into

You can learn about the grid property here: https://www.w3schools.com/css/css_grid.asp

CodePudding user response：

I think a solution can be the use of display:flex

And to be more clean try to use also the widgets, you can see in this example how it works.

.footer {
  background-color: #035642;
  margin-top: 10px;
  height: 60px;
  color: #efe5d0;
  text-align: center;
  padding: 15px;
  font-size: 100%;
  font-family: Arial;  
  display: block;
}

.footer ul {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  margin: 10px;
  overflow: hidden;
}

.footer li {
  text-decoration: none;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  list-style-type: none;
  display: inline-block;
}

.footer ul li {
  display: inline-block;
}

.footer ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #efe5d0;
  background-color: #5c755e;
  text-align: center;
  font-family: arial;
  font-weight: bold;
}

.footer ul li a:hover {
  color: #000;
  background-color: #fff;
}

#footer-right {
  height: 50px;
  width: auto;
  position: fixed;
  float: right;
}


/*my-edit*/
#the-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  height: auto;
  margin: 0;
  padding: 10px;
}
#the-footer .widget{
  width: 30%;
}
#the-footer .widget.left{
  text-align: left;
}
#the-footer .widget.right{
  text-align: right;
}
#the-footer .widget.center{
  text-align: center;
}
#the-footer .widget .title{
  font-weight: bold;
  letter-spacing: 2px;
}
#the-footer .widget .logo-link{
  color:#fff;
  display: inline-block;
  text-decoration: none;
  max-width:150px;
}
#the-footer .widget .logo-link:hover{
  color:#000;
}

<div class="footer" id="the-footer">
  <div class="widget left">
    <a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
  </div>
  <div class="widget center">
    <div class="title">WBHS ESPORTS</div>
    <ul class="footer-nav">
      <li><a href="#" target="_blank">Facebook</a></li>
      <li>|</li>
      <li><a href="#" target="_blank">YouTube</a></li>
      <li>|</li>
      <li><a href="#" target="_blank">Twitch</a></li>
    </ul>
  </div>
  <div class="widget right">
    <a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
  </div>
</div>