As exercise I'm trying to reproduce a website that I like and visit sometimes, Armor Games, it's for no other reasons other than to learn/improve website design and programming.
I don't want nor did I copied the code exactly. I'm like, "drawing" it by eye! Wether that site is made by tables or divs I don't know but since I read everywhere and recently in this cool article here » From Table Hell to Div Hell - I'm going to structure it using CSS.
As I was looking at the different, sort of blocks, they have right in the main page (Promoted Games; New Games; Latest Quests etc) I was trying to figure out how was it structured.
Example, the header. I think that it's a background image, and on top of the background there's the acc registration and login codes (which is something I wont be worrying about right now).
However, I also read "(...) headings should be wrapped in h1 to h5 tags. Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away." - So, I don't want you to write the code, just a hint of how, example, the block "Promoted Games" was structured! (2 divs?)
If you could give the website a quick look, then my version xP which is below,
HTML
<body>
<div id="MainMainBlock">
<div id="MainBlock">
<div id="Header">
<center>
Armor Games Header, Login and Acc Registration
</center>
</div>
<div id="Categories">
[Several Categories and other clickables!] -
[Random Game] - [Quests]
</div>
<div id="Search">
Search Bar e and rest
</div>
<div id="LatestQuests">
<div id="LatestQuestsTitle"> Latest Quests </div>
<img src="Images/Imagem1.jpg" class="QuestsPromotedImages">
<img src="Images/Imagem2.jpg" class="QuestsPromotedImages"> <img src="Images/Imagem3.png" class="QuestsPromotedImages">
<img src="Images/Imagem4.png" class="QuestsPromotedImages">
<img src="Images/Imagem5.png" class="QuestsPromotedImages">
<img src="Images/Imagem6.png" class="QuestsPromotedImages">
</div>
</div>
</div>
</body>
CSS
<style>
body {
margin:0;
padding:0;
}
#MainMainBlock {
position: relative;
width: 100%;
margin-left: 0 auto;
margin-right: 0 auto;
background-color: #006;
}
#MainBlock {
display: block;
position: relative;
background-color:#FFF;
visibility: visible;
height: 1000px;
width: 980px;
margin-left: auto;
margin-right: auto;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
padding: 0;
}
#Header {
visibility: visible;
height: 50px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
#Search {
height: 35px;
background-color:#CCC;
}
#LatestQuests {
display: block;
position: relative;
width: 240px;
height: 190px;
top: 18px;
left: 18px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
#LatestQuestsTitle {
background: #C0C0C0;
}
.QuestsPromotedImages {
position: relative;
display: inline-block;
float: left;
width: 65px;
height: 65px;
margin-top: 12px;
margin-left: 7px;
margin-right: 7px;
}
</style>
And point out redundancies; useless divs, or divs that should be so far!
Well in my opinion I think you should ask this question at code review as there isn't really one "right" answer.
But since you asked. I would suggest the following.
Header:
For starters, your header should use a heading tag (for proper semantics) and I would recommend using a
classinstead of anid. This way you can easily re-use it if needed. Also there is no need for thecentertag. Centering could be done easily with CSS.Categories:
A semantic way to do categories would be to make use of an "inline list structure" and wrap the text of each item in an
<a>. Assuming these are going to be linked to new pages. And again aclassmight be better than anidif this is something you intend to re-use.Search:
For search I would suggest using an
inputfield. You may or may not need to wrap it in a container depending on how you want to position it on the page. If the goal is to mirror the "Armor Games" website then you will need the container regardless.Images:
This seems fine for what you currently have, with the exception of the "title", this should be a heading tag instead of a div. However if you intend to have more content associated with each image you will most likely have to wrap each in a
div. Or possibly a better solution would be to create columns and wrap the content of each in aul.These are some basic things I would suggest. And like I said in my previous comment there may not be one "right" way to do this and your layout / HTML structure could vary depending on content / document type. For example if using HTML5 you might want to look into proper semantics for new HTML5 tags, such as
<header>,<footer>,<nav>, and<section>to name a few. Also if possible use CSS as much as possible. There are developer's who will use tables to easily position things. But in most cases this is not semantic. Tables are meant to be used for tabular data. Anyways, I think you are off to a pretty good start. If you want more specific advice it might be best to ask about smaller chunks of code at a time on code review.