I am updating my gaming website's CSS and I was wondering if I am on the right track.
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 />
© 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 todiv
?