I'm very new to coding and I've attempted to make my first website, however I feel as though I haven't coded it with a proper structure.
Here is one HTML page from my website, along with the CSS that is common to all pages. I've also made a jsFiddle of it.
/*CSS FOR ALL PAGES*/
/*ID SELECTIONS SECTION*/
/*BODY/WRAPPER SECTION*/
body {
background-color:black;
}
#wrapper {
width: 900px;
margin: 0px auto;
background-color: #e2e2e2;
}
/*TOP BANNER SECTION*/
#banner {
background-color:black;
}
#logo {
padding-top:27px;
margin :-27px;
}
#ip {
color:white;
float:right;
}
/*TOP NAV BAR SECTION*/
#nav_bar {
background-color: #a22b2f;
padding:1px;
box-shadow: 0px 2px 10px;
height:40px;
padding-bottom:10px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
text-decoration:none;
font-weight:bold;
font-size:16px;
padding:10px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding:10px;
padding-top:17px;
padding-bottom:17px;
}
#nav_bar>ul>li>ul>li>a:hover {
background:#b1b1b1;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
background: #e2e2e2;
padding: 0px;
padding-top:5px;
padding-bottom:5px;
border: 1px solid black;
border-radius:5px;
line-height:1.5em;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
font-size:14px;
font-weight:bold;
margin-left:-20px;
padding:5px;
}
/*BOTTOM FOOTER SECTION*/
#bottom_footer {
width:100%;
height:50px;
margin-top:40px;
border-top:solid 10px black;
border-bottom:solid 3px black;
}
#created_by {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin:17px;
}
#social_media_youtube {
float:left;
margin:-47px;
margin-left:275px;
}
#social_media_twitch {
float:left;
margin:-44px;
margin-left:335px;
}
#social_media_twitter {
float:right;
margin:-53px;
margin-right:320px;
}
#social_media_facebook {
float:right;
margin:-47px;
margin-right:280px;
}
/*ELEMENT SELECTIONS SECTION*/
p {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
margin-right:20px;
}
li {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
margin-left:20px;
}
/*CSS FOR SPECIFIC PAGES*/
/*CLASS SELECTIONS SECTION*/
/*VOTE PAGE*/
.vote_button {
margin-left:20px;
}
/*STATUS PAGE*/
.status {
margin:20px;
}
/*INFO PAGE*/
.gallery_thumbnails img {
height: 60px;
width: 106px;
padding: 1px;
}
.gallery_thumbnails img:hover {
border: 3px solid #a22b2f;
cursor: pointer;
}
.gallery_thumbnails {
position: relative;
}
.imagebox {
display: inline;
}
.text {
display:none;
position: absolute;
left:140px;
top: -30px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:white;
font-weight:bold;
}
.imagebox img:hover + .text {
display: block;
}
/*SPECIFIC PAGES ID SELECTIONS SECTION*/
/*INDEX/GAMEMODE PAGES*/
#banner_image {
padding-top:30px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>CRAFT412 - Info</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<!--HTML FOR ALL PAGES-->
<!--BODY SECTION-->
<body>
<!--WRAPPER SECTION-->
<div id="wrapper">
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<center>
<img src="images/CRAFT412 - Logo.png" width="500" height="100" />
</center>
</div>
<div id="ip">
<h4>SERVER IP: 82.31.216.149:25565</h4>
</div>
<div id="teamspeak_logo"> <a href="ts3server://82.31.216.149:9987">
<img src="images/CRAFT412 -Teamspeak logo.png" width="136" height="40"/></a>
</div>
</div>
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li><a href="index.html">HOME</a>
</li>
<li><a href="status.html">STATUS</a>
</li>
<li><a href="info.html">INFO</a>
</li>
<li><a href="#">GAMEMODES</a>
<ul>
<li><a href="survival.html">SURVIVAL</a>
</li>
<li><a href="pure-pvp.html">PURE-PVP</a>
</li>
<li><a href="gamesworld.html">GAMESWORLD</a>
</li>
</ul>
</li>
<li><a href="rules.html">RULES</a>
</li>
<li><a href="vote.html">VOTE</a>
</li>
<li><a href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<!--INFO CONTENT-->
<h3>INFO</h3>
<h3><br>SERVER INFO</h3>
<h4>This server is still under development, so problems may occur</h4>
<h4>Staff have the right to spy and monitor players who are suspected of breaking the rules</h4>
<h3><br>STAFF</h3>
<div id="staff_images">
<center>
<img src="images/GR412.png" title="GR412 - Owner" />
<img src="images/JoeVis.png" title="JoeVis - Technician" />
<img src="images/Scott.png" title="Scott1541 - Administrator" />
<img src="images/Halo.png" title="Halo28 - Administrator" /> </center>
</div>
<center>
<h3>
<br>IMAGE GALLERY
</h3>
</center>
<div class="image_gallery" align="center">
<div class="gallery_preview">
<img name="preview" src="images/IMAGE GALLERY 1.png" alt="" />
</div>
<div class="gallery_thumbnails">
<div class="imagebox">
<img onmouseover="preview.src=img1.src" name="img1" src="images/IMAGE GALLERY 1.png" alt="" />
<div class="text">HomeLobby</div>
</div>
<div class="imagebox">
<img onmouseover="preview.src=img2.src" name="img2" src="images/IMAGE GALLERY 2.png" alt="" />
<div class="text">HomeLobby</div>
</div>
<div class="imagebox">
<img onmouseover="preview.src=img3.src" name="img3" src="images/IMAGE GALLERY 3.png" alt="" />
<div class="text">HomeLobby</div>
</div>
<div class="imagebox">
<img onmouseover="preview.src=img4.src" name="img4" src="images/IMAGE GALLERY 4.png" alt="" />
<div class="text">HomeLobby</div>
</div>
<div class="imagebox">
<img onmouseover="preview.src=img5.src" name="img5" src="images/IMAGE GALLERY 5.png" alt="" />
<div class="text">HomeLobby</div>
</div>
</div>
</div>
<!--HTML FOR ALL PAGES-->
<!--BOTTOM FOOTER SECTION-->
<div id="bottom_footer">
<div id="created_by">
<center>2014 © GR412</center>
</div>
<div id="social_media_youtube"> <a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40"/></a>
</div>
<div id="social_media_twitch"> <a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35"/></a>
</div>
<div id="social_media_twitter"> <a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55"/></a>
</div>
<div id="social_media_facebook"> <a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40"/></a>
</div>
</div>
</div>
</body>
</html>