Gaming Website Index Page

By Posted on

Problem

I am updating my gaming website‘s CSS and I was wondering if I am on the right track.

enter image description here

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Summon The Assault - Index Page</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="skins/nos1/style.css" />
    </head>

    <body>

        <!-- Google Analytics -->
        <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-69526416-1', 'auto');
        ga('send', 'pageview');
        </script>
        <!-- /Google Analytics -->


        <div id="index_page">
            <div id="clan_name">
                <h1>
                Summon The Assault
                </h1>
            </div>

            <div id="hosting_images_container">
                <div class="hosting_image_container">
                    Powered by:<br />

                    <a href="changelog.php">
                    <img src="skins/nos1/images/hosting/clania_scripts.jpg" class="hosting_image" alt="Clan IA Scripts">
                    </a>
                </div>

                <div class="hosting_image_container">
                    Hosted by:<br />

                    <img src="skins/nos1/images/hosting/lantoka.jpg" class="hosting_image" alt="IA-Lantoka">
                </div>
            </div>

            <div id="main">
                <p>
                Click Below to Enter<br />
                <a href="realms.php">
                    <script type="text/javascript">
                        <!--var
                        thePics = new Array()

                        thePics[1] = "skins/nos1/images/splash/1.jpg"
                        thePics[2] = "skins/nos1/images/splash/2.jpg"
                        thePics[3] = "skins/nos1/images/splash/3.jpg"
                        thePics[4] = "skins/nos1/images/splash/4.jpg"
                        thePics[5] = "skins/nos1/images/splash/5.jpg"
                        thePics[6] = "skins/nos1/images/splash/6.jpg"
                        thePics[7] = "skins/nos1/images/splash/7.jpg"
                        thePics[8] = "skins/nos1/images/splash/8.jpg"
                        thePics[9] = "skins/nos1/images/splash/9.jpg"

                        var rn = Math.floor(Math.random() * thePics.length)
                        if (rn == 0)
                            { rn = 1 }

                        document.write("<img src='"+thePics[rn]+"' class='splash_image'>")
                        //-->
                    </script>
                </a>
                </p>

                <p>
                <b>105</b> Visitors<br />
                <b>600</b> Site Hits<br />
                <b>7049</b> Page Views<br />
                Since October 2, 2015
                </p>
            </div>

            <div id="index_footer">
                <hr />

                &copy; 2002 - 2015 by <b>
                IA-Lantoka</b>. No part of this website may be published or reproduced without the
                authentic permission of <b>IA-Lantoka</b>. Clan members may reproduce text from the
                site on forum posts or in e-mails. Any violation of this copyright agreement will
                be prosecuted to the fullest extent of the law!

                <hr />
            </div>
        </div>
    </body>
</html>

CSS: (irrelevant parts removed)

/* ===== TAGS ===== */

a:active
{
    color:                  #05a51d;
    text-decoration:        none;
    background-color:       transparent;
}

a:hover
{
    color:                  #05a51d;
    text-decoration:        underline;
    background-color:       transparent;
}

a:link, a:visited
{
    color:                  #05a51d;
    text-decoration:        none;
    background-color:       transparent;
}

b
{
    color:                  #FF9900;
    font-weight:            bold;
    font-size:              100%;
}

body
{
    background-color:       #000000;
    font-size:              80%;
    color:                  #36fcc0;
    margin-top:             0px;
    margin-left:            0px;
    margin-right:           0px;
    margin-bottom:          0px;
    font-family:            verdana, tahoma, arial;
}

h1
{
    color:                  #FF9900;
}

html {
    /* margin 0 auto centers the page in wide browser windows */
    margin:                 0 auto;
    /* max-width ensures that no text goes wider than the banners */
    max-width:              900px;
}

/* ===== INDEX PAGE ===== */

#index_page
{
    text-align:             center;
}

#index_page #clan_name
{
    padding-top:            15px;
}

#index_page #hosting_images_container
{
    text-align:             center;
}

#index_page #hosting_images_container .hosting_image_container
{
    display:                inline-block;
    width:                  300px;
    text-align:             center;
}

#index_page .hosting_image
{
    border-width:           2px;
    border-color:           #36fcc0;
    border-style:           solid;
}

#index_page .splash_image
{
    border-width:           2px;
    border-color:           #36fcc0;
    border-style:           solid;
    width:                  605px;
}

#index_page #index_footer
{
    font-size:              x-small;
}

Specific questions:

  • Am I using CSS ID’s vs classes correctly?

  • I decided to be pretty specific with my properties. For example, #index_page #hosting_images_container .hosting_image_container instead of just .hosting_image_container. Do you see any problems with this?

  • Do you think my choices for ID and class names are okay?

  • I started using HTML5 on this webpage (section, footer) but it didn’t seem to improve the organization, so I took it out. Would you recommend adding it back in, or is it smartest to stick to div?

Solution

Am I using CSS ID’s vs classes correctly?

Yes, it is fine. Regarding CSS, the difference between ID and class is specificity and uniqueness. You can also link to a div with its ID. Seems more of a personal preference and varies from a developer to another.

I decided to be pretty specific with my properties. For example,
#index_page #hosting_images_container .hosting_image_container instead of just .hosting_image_container. Do you see any problems with this?

I think it is better to just use .hosting_image_container. It does not matter now, but when you code for bigger projects CSS performance matters the most. Descendant selectors are considered expensive and you can normally avoid it here by selecting direct element. Both do the same thing.

You can use #index_page #hosting_images_container .hosting_image_container if you want to override some CSS properties only for hosting image containers which are under index pages container. Because CSS specificity will work on it here.

Let’s say: I have a multiple items with certain class and want to override the items that are within a container.

#container .item { /* Specificity value: 110 */ 
  background: lightblue;
}
.item { /* Specificity value: 10 */
  background: tomato;
  color: white;
  padding: 10px;
  display: inline-block;
  margin: 10px;
  font-family: Roboto;
}
<div class="item">
  Test item with background
</div>

<div id="container">
  <div class="item">
    Test item with no background <!-- This contains the background of the first rule because of specificity -->
  </div>
</div>

Expand snippet

Do you think my choices for ID and class names are okay?

Try to avoid using underscores and use dashes like #index-page to break the class names. You can check the Code Guide written by one of the Twitter Bootstrap core team members. Combinations of underscores and dashes are more suitable in CSS BEM methodology.
But in the end what matters is consistency of using the syntax.

I started using HTML5 on this webpage (section, footer) but it didn’t
seem to improve the organization, so I took it out. Would you
recommend adding it back in, or is it smartest to stick to div?

Semantic elements are completely supported by almost all browsers except some versions of IE which does not include support for <main> element.

Going by the flow chart here: HTML5Doctor Semantics Flow Chart, you can replace the images with <figure> tags and associated <figcaption>. You can also make appropriate usage of <section> wherever needed. Remember that we will be/are using semantic markup in order to feed the browsers to read the page more accurately.

More review in addition to your question:

  1. Minimize using <hr> and <br> tags, it is clutter to the neat code you are writing. Block level elements by default wrap the next element to a new line. You can also make use of margin and border in CSS for a cleaner approach.

  2. Combine repeated styles inside a single CSS rule. For eg:

    #index_page .hosting_image {
  border-width: 2px;
  border-color: #36fcc0;
  border-style: solid;
}

#index_page .splash_image {
  border-width: 2px;
  border-color: #36fcc0;
  border-style: solid;
  width: 605px;
}

    can be written as:

    .hosting_image, 
.splash_image {
  border-width: 2px;
  border-color: #36fcc0;
  border-style: solid;
}

.splash_image {
  width: 605px;
}

  3. You have used JavaScript code to load the images in middle of the page code. The readability is disturbed. It is better to create a separate file say script.js, write the program inside a function and load it into a div specifically in the file.

  4. My edit on your post was rejected because I tried to modify the white-spaces in your code. I would like to add one more thing here. Please try to avoid using so many white-spaces in your code. Although it maybe useful for you in development version for editing, it adds to the bandwidth in your production environment. That is why CDNs serve minified version of the code. Same applies to your HTML as well. Even if you want to implement in dev environment, use the code guidelines I mentioned above.

#index_page #clan_name
{
    padding-top:            15px;
}

#index_page #hosting_images_container
{
    text-align:             center;
}

There’s no reason to put an ID inside another ID like this if your HTML is valid. An ID should be unique on the page, so you can just say 

#clan_name
{
    padding-top:            15px;
}

#hosting_images_container
{
    text-align:             center;
}

It can make sense to put a class or tag name inside an ID, because you can put the class or tag name multiple places. So you might want to reduce the range by specifying only those inside a particular ID. But for an ID, it’s already unique.

Under some circumstances, you might want to change #clan_name and #hosting_images_container to be classes instead. That would make sense if you may put another one outside of #index_page later. But it’s certainly fine for those to be IDs.

Leave a Reply

Your email address will not be published. Required fields are marked *