Pages: 12
There are many interested HTML makers out there so just wanna share a simple tutorial about "div class" A "div class" tag in an HTML page can make a box Example: [quote]<html> <head> </head> <div
You are viewing a post by Ephemeral. View all 31 posts in There are many interested HTML makers out there so just wanna share a simple tutorial about "div class" A "div class" tag in an HTML page can make a box Example: [quote]<html> <head> </head> <div.
2007-08-11 01:48:35
- Ephemeral
- » FTalkElite
4669
0
1969-12-31
There are many interested HTML makers out there so just wanna share a simple tutorial about "div class" A "div class" tag in an HTML page can make a box Example: [quote]<html> <head> </head> <div
There are many interested HTML makers out there so just wanna share a simple tutorial about "div class"
A "div class" tag in an HTML page can make a box
Example:
[quote]<html>
<head>
</head>
<div class="[b]NAME OF BOX[/b]">[i]
CONTENT OF BOX HERE EMBED CODES/ IFRAMES/OBJECTS/DIV TAGS
[/i]</div>
<body>
</body>
</html>[/quote]
Legends:
[b]NAME OF BOX[/b] - The primary ID you will use.
[i]CONTENT OF BOX HERE EMBED CODES/ IFRAMES/OBJECTS/DIV TAGS/A TAGS/IMG TAGS[/i] - Possible items you can apply like youtube, flash and other widgets.
Question:
How to edit the properties of the edited box?
Answer:
Apply style property by using the ID you made.
Question:
How can I do that?
Answer:
[b]Example:[/b]
This is your example HTML code below with the div class tag in work also with an example img tag and a tag.
[quote]<html>
<head>
</head>
<body>
<div class="[b]ephemeral[/b]">[i]
<a href="http://theftalk.com"><img src="http://theftalk.com/img/smilies/wallbash.gif"></a>
[/i]</div>
</body>
</html>[/quote]
Now after applying your div class in the HTML add a style tag on the head tag of the HTML document.
[b]
Example:[/b]
[quote]<head>
[b]<style type="text/css">
</style>[/b]
</head>[/quote]
After creating a style tag on the head use the ID of your div class to edit the C.S.S. for your created box.
[b]Example:[/b]
[quote]<html>
<head>
[i].ephemeral[/i] { [u]C.S.S. Here [/u]}
</head>
<body>
<div class="[b]ephemeral[/b]">
<a href="http://theftalk.com"><img src="http://theftalk.com/img/smilies/wallbash.gif"></a>
</div>
</body>
</html>[/quote]
Legends:
[b]Bold Text:[/b] The ID I used in the div class is ephemeral
[i]Italic Text:[/i] Same as the ID ephemeral on the div class I created that's used to edit the C.S.S. of the created box.
[u]C.S.S Here[/u] where you will put your C.S.S. file.
Some samples of usable C.S.S. codes.
Use as base:
<">Example finished product if done correctly.
<">Remember you can apply this on .htm files or even overlayed ones.
[hr]
C.S.S./JavaScript Extension users.
Just use document.right
Example:
Add to J.S. file
<">Then apply the css of your code in your C.S.S. Extension file.
<">Remember just use the given stuff above as guide lines.
Also you can apply script on this through a href or a tags and onclick check feruzz hide show box script for some ideas as well...
Hope this is informative lol 
Last edited by Ephemeral (2007-08-11 21:20:25)
 |