As a beginner in this field, I have successfully created a header image and menu options saved as .png images.
However, I am facing an issue with aligning the menu images to the left of the screen instead of overlapping the edge of the logo.
To see the code, you can check out the fiddle: http://jsfiddle.net/lozjayne/xz99w/
Below is the code snippet (apologies if it's not that great)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\html\style.css" type="text/css">
<title>Cupcake Fairy</title>
</head>
<body>
<div id="header-container">
<div id="header">
<div id="logo">
<a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\logo.png" /></a>
</div>
<div id="topnav">
<ul>
<li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\home.png" alt="home" /></a></li>
<li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\about.png" alt="about" /></a></li>
<li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\gallery.png" alt="gallery" /></a></li>
<li><a href="#"><img src="C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\contact.png" alt="contact" /></a></li>
</ul>
</div>
</div>
</div>
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
}
#header-container {
width: 100%;
height: 204px;
background-color: #e7fc56;
}
#header {
background-image: url("C:\Users\Laura-Jayne\Documents\Crestel Website\cake\images\header.png");
background-repeat: no-repeat;
width: 1024px;
height: 204px;
margin: auto;
}
#logo{
float: left;
padding-top: 15px;
padding-left: 160px;
}
img {
border: none;
}
#topnav {
margin: auto;
height: 76px;
width: 1024px;
padding-top: 150px;
padding-left: 158px;
}
#topnav ul li
{
display: inline;
padding: 0px;
margin: 0px;
width: 100px;
}
#topnav ul a {
text-decoration: none;
background: #e7fc56
float: left;
text-align: left;
}
I hope someone can provide assistance with this issue. Thank you.