I added a logo to the top of my page but it ended up looking like my navigation bar. I suspect it's because of how I styled my nav bar. Even when I tried to adjust the logo's formatting using inline CSS, it didn't solve the issue.
My Custom CSS :
ul {
list-style-type: none;
margin: 7;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
h2 {
color:#FFFFFF;
font-family:impact;
text-align:center;
text-decoration:underline;
}
a:link, a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #4D5365;
}
.divstory {
background-color:#B33951;
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
My HTML Code :
<body background="webbackground.png">
<a href="index.html"><img src="DTDTMLogo.png" style="width: 180px; margin-bottom: 5px;" ></a>
<hr>
<!--Nav Bar-->
<ul>
<li>
<a href="index.html" style="color:white;font-size:20px">Home</a>
</li>
<li>
<a href="database.html" style="color:white;font-size:20px">Database</a>
</li>
<li>
<a href="map.html" style="color:white;font-size:20px">Map</a>
</li>
<li>
<a href="https://www.papajohns.com/" style="color:white;font-size:20px">About Us</a>
</li>
</ul>
<!-- Nav Bar End-->
<hr>
<img alt="When Your In The Action" src="Gamers_in_action1.jpg" style="width:1260px;height:600px;">
<hr>
<h2>Our mission</h2>
<div>
<p>
</body>
Snapshot :