I've been learning html and css for about a month now, and I'm trying to build a site for a class project. I'm running into a lot of problems with the layout and I would really appreciate it if someone could look at my code and point out any mistakes I've made. Specifically in the code for the page I'm posting the right border of the navigation menu is being pushed aside by the main content section and I can't figure out why. Thank you in advance!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Firelink Shrine</title>
<link href = "firelinkshrine.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<header>
<img src = "images/firelinkshrinelogo2.png" title = "Firelink Shrine Logo" alt = "Firelink Shrine Logo">
</header>
<nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href = "gameinformation.htm">Game Information</a>
<ul>
<li><a href="aboutgame.htm">About</a></li>
<li><a href="dlc.htm">DLC</a></li>
<li><a href="mechanics.htm">Mechanics</a></li>
<li><a href="online.htm">Online</a></li>
</ul>
</li>
<li><a href = "character.htm">Character</a>
<ul>
<li><a href="classes.htm">Start Classes</a></li>
<li><a href="stats.htm">Stats</a></li>
<li><a href="gifts.htm">Gifts</a></li>
<li><a href="covenants.htm">Covenants</a></li>
</ul>
</li>
<li><a href = "world.htm">World</a>
<ul>
<li><a href="lore.htm">Lore</a></li>
<li><a href="locations.htm">Locations</a></li>
<li><a href="enemies.htm">Enemies</a></li>
<li><a href="npcs.htm">NPCs</a></li>
</ul>
</li>
<li><a href = "equipment.htm">Equipment</a>
<ul>
<li><a href="armor.htm">Armor</a></li>
<li><a href="weapons.htm">Weapons</a></li>
<li><a href="shields.htm">Shields</a></li>
<li><a href="items.htm">Items</a></li>
<li><a href="materials.htm">Materials</a></li>
</ul>
</li>
<li><a href = "spells.htm">Spells</a>
<ul>
<li><a href="pyromancies.htm">Pyromancies</a></li>
<li><a href="sorceries.htm">Sorceries</a></li>
<li><a href="miracles.htm">Miracles</a></li>
</ul>
</li>
<li><a href = "walkthrough.htm">Walkthrough</a>
<ul>
<li><a href="progress.htm">Progress</a></li>
<li><a href="videwalkthrough.htm">Video Walkthrough</a></li>
</ul>
</li>
<li><a href = "tools.htm">Tools</a>
<ul>
<li><a href="optimizer.htm">Armor Optimizer</a></li>
<li><a href="calculator.htm">Weapon Scaling Calculator</a></li>
</ul>
</li>
</ul>
</nav>
<div id = "main">
<div id = "maincontent">
<h1>About</h1>
<p>Dark Souls is a multi-platform action RPG developed by From Software, and spiritual successor to their earlier game Demon Souls. Released on Xbox 360 and Playstation 3 October 4, 2011
and PC August 24th, 2012, The game is known for Its punishingly hard gameplay and received critical acclaim for its difficulty and immersive world.</p>
</div>
</div>
<footer>
<p>
© Firelink Shrine |
<a href = "about.html" title = "About Firelink Shrine Page">About Firelink Shrine</a> |
<a href = "contact.htm" title = "Contact Page">Contact Us</a>
</p>
</footer>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: OptimusPrinceps;
src: url('OptimusPrinceps.ttf');
}
body {
width: 100%;
height: 100%;
background-color: black;
color: white;
font-family: OptimusPrinceps;
}
header {
text-align: center;
margin-bottom: 4%;
margin-top: 2%;
}
header img {
max-width: 100%;
max-height: auto;
}
nav {
height: 50px;
padding: 0;
margin: 0 0 2% 14.1%;
position: relative;
border-right: 1px solid #383838;
z-index: 2;
}
nav li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 14px OptimusPrinceps;
padding: 0;
margin: 0;
background-color: black;
}
nav a {
padding: 18px 0;
border-left: 1px solid #383838;
text-decoration: none;
color: white;
display: block;
}
nav li:hover, a:hover {
background-color: #383838;
}
nav li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
nav li:hover ul {
display: block;
}
nav li ul li {
background-color: #383838;
}
nav li ul li a {
border-left: 1px solid #282828;
border-right: 1px solid #282828;
border-top: 1px solid #585858;
border-bottom: 1px solid #282828;
}
nav li ul li a:hover {
background-color: #282828;
}
#main {
width: 100%;
position: absolute;
z-index: 1;
clear: both;
}
#main img {
max-width: 100%;
max-height: auto;
}
#subpage {
width: 100%;
background-color: #303030;
text-align: center;
padding: 5% 0;
}
#subpage a {
text-decoration: none;
font-size: 22px;
font-weight: bold;
color: #E8E8E8;
line-height: 200%;
}
#subpage a:hover {
text-decoration: underline;
}
#maincontent {
width: 90%;
background-color: #303030;
text-align: justify;
padding: 5% 2%;
margin:0 auto;
}
footer {
position: fixed;
bottom: 0;
left: 37%;
font-family: OptimusPrinceps;
}
footer p {
display: inline;
font-size: 18px;
border-top: 1px solid #383838;
padding-top: 5%;
}
footer a {
color: white;
text-decoration: none;
font-weight: bold;
}
Aucun commentaire:
Enregistrer un commentaire