Guest Anonymous Posted April 23, 2007 Share Posted April 23, 2007 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: Quote Link to comment Share on other sites More sharing options...
kronow Posted April 24, 2007 Share Posted April 24, 2007 Re: Layout Help / CSS Layers a nice little tut to get people into templating, one thing i hate about the mccode games is people keep the same themes, greys, blacks, reds. so hopefully they will start to change :) :mrgreen: Quote Link to comment Share on other sites More sharing options...
Guest Anonymous Posted April 24, 2007 Share Posted April 24, 2007 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 ~ Quote Link to comment Share on other sites More sharing options...
kronow Posted April 24, 2007 Share Posted April 24, 2007 Re: Layout Help / CSS Layers no problem, it was the first thing i did and always trying to edit the style to make it look different. but yes all game owners out there i think you should work with this. +1 SoNiX Quote Link to comment Share on other sites More sharing options...
Guest Anonymous Posted April 24, 2007 Share Posted April 24, 2007 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 Quote Link to comment Share on other sites More sharing options...
Guest Anonymous Posted April 24, 2007 Share Posted April 24, 2007 Re: Layout Help / CSS Layers yep Quote Link to comment Share on other sites More sharing options...
Matty Posted April 24, 2007 Share Posted April 24, 2007 Re: Layout Help / CSS Layers Nice tut, should encourage a few people who are new to coding to take a look at css and xhtml +1 :) Quote Link to comment Share on other sites More sharing options...
Decepti0n Posted April 25, 2007 Share Posted April 25, 2007 Re: Layout Help / CSS Layers Good demo, but absolute positioning really shouldn't be used :s Quote Link to comment Share on other sites More sharing options...
Mambug Posted April 25, 2007 Share Posted April 25, 2007 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.