Jump to content
MakeWebGames

Layout Help / CSS Layers


Guest Anonymous
 Share

Recommended Posts

Guest Anonymous

Right, first off... this is just to help people out, who have tables or images etc flying about all over the place as i see alot with some games.

Obviously most people using this forum will know how to do this, but this is just for the people that dont, as i usualy get messages asking about it.

to make a table or a image go exactly where you would like it to go use something called "Div Layers"

 

<?php


// now set the position of the layer.



?>

 

now. that layer will be set to ware you have asked, moving the table along with it :)

you can change the name of your Layers to what you want to make them easier to edit if your using many of them, just make sure the corresponding layer positioning name is exactly the same.

Any questions or suggestions please post and ill add more to it or explain more.

please don't criticize saying this is easy etc, some people dont know how to do this.

SoNiX :mrgreen:

Link to comment
Share on other sites

Guest Anonymous

Re: Layout Help / CSS Layers

yeah, to many mccode games look exactly the same, that putts me off joining because i think they havent took the time to make it look origional or slightly unique.

 

if your game looks unique (mccode or not) more people are likely to want to join up.

Thanks for the comment Kronow :]

 

SoNiX ~

Link to comment
Share on other sites

Guest Anonymous

Re: Layout Help / CSS Layers

i think alot of game owners need to also research xhtml, as i have seen alot are using reg html which is sloppily coded

Link to comment
Share on other sites

Re: Layout Help / CSS Layers

Sonix,

I most dearly appreciate your contribution regarding this subject. However, your code is completely wrong, and not browser distinguishable. Do not take this as me criticizing your work, just learn from this post. Let me break it down for you and anyone else who does not understand the subject of CSS (Well basics at least.)

1. All CSS goes in your header, IE between the <head> tags.

2. CSS formatting can be done in one of three ways. Declaring it in the document before the HTML, declaring it when you setup the DIV or using an external stylesheet.

Examples:

Above layout code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Just a title</title>
<style type="text/css">
#Layer1 /* Note, this is declaring an ID not a CLASS - I will explain more later */

{
position:absolute; /* This is bad I will explain about it later */
width:205px;
height:231px;
z-index:1; /* Not needed unless stacking layers on top of each other which is bad practice. */
left: 231px;
top: 168px;
}
</style>
</head>
<body>
<div id = "Layer1">Hello, this is text</div>
</body>
</html>

 

Embedded CSS (When creating the DIV or SPAN):

....
<div style="font-size: 12px; color: #ffffff;">Just text</div>
....

 

And then, the method I prefer; Using external style sheets...

File 1 - our html file - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Just a random title</title></head>
<html>
<div class="style1"> Just a style for my font...</div>
</html>

File 2 - our style sheet - style.css

.style1
{
 font-size:12px;
 color:#000ccc;
 padding: 0px 2px 0px 2px;
}

 

That sums up the usage and formatting of how to do cascading style sheets. I know it's sloppy, it's only to be used as reference - mainly for the original poster to get his accuracy correct and anyone else who was unaware of.

As for positioning, I strongly advise against using position:absolute; - depending on your user's browsers resolution the "positions" of your objects will always be at different spots. What may look right to you on one resolution can and mostly likely will be wrong to someone else with a different resolution - or even the same resolution, just their browser is not maximized.

As for declaring a z-index, I wouldn't worry about it unless your trying to stack boxes or something. In that case go by multiples of "10" or "100" so that if you have to place an objects index between two different layers it's quite easy. IE if you want to place object "c" between object "a" (z-index 10) and object "b" (z-index 20) just put object "c" at z-index of 15.

And that brings me to my last subject, Ids and classes. You can declare a format in css by one of two ways: an "Id" or a "class". Classes are useful if you plan on re-using the CSS code. You declare an ID only - and IF ONLY - you plan on using that style once on any given page. I generally use Ids for static positioning (putting the logo in the top left etc...), and classes for dynamic formatting as well as dynamic positioning. (Stacking 3 boxes next to each other, font sizes and colors etc...)

I think that about sums it up for now. Good night.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...