Can someone assist me, please?
I've been working on this project for a few hours now. As a beginner in html and css, I've been doing extensive research but haven't found a solution that works perfectly for my needs. The only thing that somewhat worked for me was following this example: http://codepen.io/wolfcry911/pen/HyLdg.
Here's what I'm trying to achieve:
- I want to create a navigation bar with 4 links (Home, About Me, Contact, Resume) along with a logo in the center that adjusts well to various screen sizes including tablets, laptops, and smartphones. I tried using an unordered list with the logo as the third item, but it appeared messy and positioning the logo at the center of the screen was challenging due to different text lengths. I also attempted using the logo as a background image, but aligning it in the middle of the page proved difficult, and the text didn't adjust properly around the logo. When I looked at the provided link, about 50% of the CSS made sense to me. However, when I tried making tweaks, I struggled with centering the text within the navigation and placing the logo correctly. Here is the code I have so far:
body {
background: #f5f5f5;
font-family: arial;
font-size: 11px;
margin: 0;
}
#header {
height: 56px;
position: relative;
margin: auto;
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
text-align: center;
padding: 20px 10px;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235, 200, 35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
background: url(img/logo.jpg) 50% 0 no-repeat;
background-size: 125px 56px;
width: 125px;
height: 56px;
top: 20px;
}
@media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="navigation.css">
</head>
<body>
<div id="header">
<a class="logo" href="index.html">
<img src="img/logo.jpg" alt="Michigan State" width="215" height="140" />
</a>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="index.html">About Me</a>
</li>
<li><a href="index.html">Contact</a>
</li>
<li><a href="index.html">Resume</a>
</li>
</ul>
</div>
</body>
</html>I managed to grasp roughly 50% of the CSS code. If anyone could provide some insight into how the ul, li, logo, and @media formatting work together, I would greatly appreciate it.
Thank you in advance for your help.