CRAFT412 gaming website

Question

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>

It's usually pretty difficult to give a CR on just the CSS and no HTML, so you'll want to put that in your question as well. Also, you can use resources like placekitten.com and placehold.it for placeholder images in your fiddle. — cimmanon, Oct 24, 2014 at 23:36

cimmanon · Accepted Answer · 2014-10-25 00:34:10Z

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:

 <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>

    <div id="created_by">
        <center>2014 © GR412</center>
    </div>

Should look more like this:

<p class="warning">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.</p>

<p class="copyright">©2014 GR412</p>

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 (<a href="#">GAMEMODES</a>). If all you want is to have the text have the same appearance as your links, style the text to look like a link.

Stack Exchange Network

CRAFT412 gaming website

1 Answer 1

Your Answer

Linked

Hot Network Questions

CRAFT412 gaming website

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions