CRAFT412 gaming website

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_m

I'm just going to focus on the markup here. If you send it through the markup validator, you get 33(!) errors:

• Center tags are not valid for your doctype (you have HTML5 doctype, and it was deprecated in HTML4)

• No alt attributes for your image tags (if they're purely decorative, just use alt="", otherwise you'll want to put something descriptive there like alt="Facebook" for your Facebook image)

• Errors related to using spaces in your image filenames without converting them to %20

• The align attribute on the div element is obsolete

• The name attribute on the img element is obsolete

Semantically speaking, you're misusing quite a few elements. It looks to me like you've chosen h3 and h4 elements purely because they make your text bigger, rather than because they are headlines (eg. ip address, and just about all of the rest of your text really). Choose the markup that describes your content, then make it look the way you want with CSS.

So... this:

This server is still under development, so problems may occur

 Staff have the right to spy and monitor players who are suspected of breaking the rules

    
        2014 © GR412
    

Should look more like this:

This server is still under development, so problems may occur.  Staff have the right to spy and monitor players who are suspected of breaking the rules.

©2014 GR412

And

.warning {
    font-size: 1.1em;
    /* etc */
}

.copyright {
    font-size: .8em;
    text-align: center;
}

You're using the br element as a way to get extra space around your elements when it should be reserved for forcing line breaks within content. Instead, you should be using CSS to increase the margin-top.

You've got 2 collections of images marked up with divs (staff_images and image_gallery). It would be better to use unordered lists.

In your navigation, all of your text is in all caps. There's nothing inherently wrong with this, but this seems like a design decision rather than because the content called for it. If this is the case, using CSS would be a better choice (you never know, you might decide that you don't want it in all caps after all, and changing it in the CSS is less work than changing it in the markup):

#nav_bar {
    text-transform: uppercase;
}

While using divs is certainly better than tables for layout purposes, there's a lot more options available to you in HTML5 that would be more appropriate:

• header

• nav

• body

• footer

• etc.

You can read more about them here: http://html5doctor.com/

Avoid making links that go nowhere (GAMEMODES). If all you want is to have the text have the same appearance as your links, style the text to look like a link.

StackExchange Code Review Q#67878, answer score: 9