Do not PM, Message or Mail me for help... Post your issue in the Help Thread

Div Overlays Tutorials for Standard & Music Profiles. A community for Developers & Users to help each other out with Div Overlays in Myspace.
HomeFAQSearchMemberlistUsergroupsRegisterLog in
MYSPACEDIVS.INFO - PASS IT ON!!

Share | 
 

 Basic CSS Learning

View previous topic View next topic Go down 
AuthorMessage
myspacedivs
Admin
avatar

Posts : 178
Points : 230
Reputation : 16
Join date : 2009-03-12
Age : 33
Location : Guaynabo, PR *USA

PostSubject: Basic CSS Learning   Sun Mar 29, 2009 10:12 pm

This is entirely for NOOBS on CSS
People who have no knowledge of working with Div Overlays or CSS

"CSS Understanding"

You will start by making a style tag:
Code:

<style> 


</style>

That will be like the matrix where you will build your Map, think of it as a Construction Building process, we are going to set up all the supporting bars of the structure.


After you have made the Style Tag, we may start by making your first Custom Div inside the Style Tag:

Code:

.box1 {position:absolute; top:0px; margin-left:-400; left:50%; width:200px; height:200px; overflow:auto; z-index:9 !important; background:pink; border:1px red solid;}


This should look like this now:
Code:

<style>

.box1 {position:absolute; top:0px; margin-left:-400; left:50%; width:200px; height:200px; overflow:auto; z-index:9 !important; background:pink; border:1px red solid;}

</style>

I'll explain right now entirely what all this div code we have created means, and mention other styling codes you may add in there:

. = This will mention the Web Browser to Detect the name of the Div Box

box1 = Name of the Div Box, you may name it to what ever you want

{ = Where the styling coding of the div box starts

} = Where the styling coding of the div box ends

position:absolute; = This will ensure the positioning to balance on your monitor. You may change the word to Relative instead of Absolute... its all up to your likes(I always use Absolute).

top:0px; = This is for positioning UP & DOWN the Div Box (PX Value may be Positive or Negative)

margin-left:-400px; = This is for positioning LEFT & RIGHT the Div box (PX Value may be Positive or Negative)

left:50%; = This ensures the Div Box is positioned CENTERED on all Screen Resolutions

width:200px; = This determines the specific Width Size of the Div Box

height:200px; = This determines the specific Height of the Div Box

width:auto; = This will expand the Width of the box, produced by the CONTENT inside of the Box

height:auto; = This will expand the Height of the box, produced by the CONTENT inside of the Box

width:100%; = This will expand the Width of the box entirely to the size of the Monitor Screen (Does not really work in Myspace, but it does work in regular websites)

height:100%; = This will expand the Height of the box entirely to the size of the Monitor Screen (Does not really work in Myspace, but it does work in regular websites)

overflow:auto; = This creates an Automatic Scroll Bar, when the CONTENT inside the Div Box's Height or Width is exceeded, When the CONTENT inside of the Div Box has not exceeded the size, it will not show a scroll bar.

overflow:scroll; = This will make visible the scroll bars, even if the CONTENT has not exceeded the size of the Div box

overflow:none; = This will not allow any content to exceed the size of the Div Box, in other words it defines the Limit inside of the Box

z-index:9; = This is tricky to explain, but if you have used Adobe Photoshop you would understand. This makes it as if these were layers, so that you may position any Div Box in front of another one. 9 being the Top Above Everything and 1 being the Bottom Below(Under) Everything, Yes you may use any number from 1 to 9.

!important = Insures any given code to be Mandatory / Obligated. The code should work as you have mentioned it to do so

border:1px red solid; = Giving a size of border to the Div Box, color (color coding is not recommended for borders) & type of border style. Different style types of borders: outset, none, hidden, dotted, dashed, solid, double, ridge, groove, inset

background:pink; = The background color inside of the Div Box, any color coding works here also

background:transparent; = This sets the background of the Div Box to be transparent


"Making the Div Box Visible"

Now we will be adding the Wall Panels, Painting the walls, the Sofa's.. all the furniture to fill up the building, in other words we will add now what will make this Div box to show up and be visible in the website. Simply create the Div Class of the Div Box we made inside of the Style Tag, from our CSS. The same name you gave in the CSS for the Div box, that should be the same exact name of the Div Class.

Code:

<div class="box1">

Your Content goes here!!!<br>
Text, Images, Videos, Flash, Embeds... Anything can go in here<br>
Hi mom, I have decided to leave Earth & search for aliens. =)

</div>

It should be placed after the end of the Style Tag
Code:
</style>

So this will look like this:
Code:

<style>

.box1 {position:absolute; top:0px; margin-left:-400; left:50%; width:200px; height:200px; overflow:auto; z-index:9 !important; background:pink; border:1px red solid;}

</style>


<div class="box1">

Your Content goes here!!!<br>
Text, Images, Videos, Flash, Embeds... Anything can go in here<br>
Hi mom, I have decided to leave Earth & search for aliens. =)

</div>


Well I hope this may help you understand a bit of CSS, this can be placed at anywhere in Myspace inside of Safe-Mode. All the codes I provide in the tutorial do have all the necessary CSS inside of them, you will only need to change the TOP, LEFT or MARGIN-LEFT for positioning & change the HEIGHT & WIDTH accordingly to your needs of your Design. Just make sure you read closely all the codes I provide you, so that you can notice where you can make all those modifications.
Back to top Go down
View user profile http://myspacedivs.info
 
Basic CSS Learning
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» What are the basic requirements for using Selenium IDE?
» Learning Palace Blurt Game Giveaway! *usa only*
» Selenium tutorials for beginners/newbie
» Learning Greek!
» Fechtbüch - By Antonio Castigliano

Permissions in this forum:You cannot reply to topics in this forum
MyspaceDivs :: Myspace Tutorials :: Div Overlay Tutorials-
Jump to: