Announcements: Introducing INK, the Writer's Currency » RPG's New Design Team » Now Open: RPG Staff Applications » 10 Years of RPG: Share Your Story » Can't Send PMs? Need Your 10-Forum Posts NOW? » A (Friendly) Reminder to All Romance RPers. » The Newbie's Guide to RolePlayGateway: Read This First! »

DIV Coding Reference

a topic in Discussion & Debate, a part of the RPG forum.

Moderator: dealing with it

Have a subject that you'd like to debate that isn't about roleplay? This is the place.

DIV Coding Reference

Tips: 0.00 INK Postby SinfulSoul on Tue Aug 30, 2005 10:30 pm

BASIC DIV BLOCK:
Code: Select all
<div id=layer1 style="position:absolute; top:20; left:20; width:300; height:300; z-index:1; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(yourfilename.gif); layer-background-image:url(yourfilename.gif);">

Content goes here (images, text)

</div>


GLOSSARY:

* id: This is just the number of your div. It helps you sort out easily which div element is which when you have many layers. It's also useful for identifying layers so that you can have different style attributes in your style sheet for each div element.

* Top: This is the number in pixels that your div element will be positioned horizontally from the top of the page. If you give "top" a number value of "20," your div element will be 20 pixels down from the very top of your page.

* Left: This is the number in pixels that your div element will be positioned vertically from the left of your page. If you give "left" a number value of "20," your div element will be 20 pixels left from the very left side of your page.

* Width: This is the width of your div element in pixels.

* Height: This is the height of your div element in pixels.

* Z-index: This is the order in which your div elements are stacked, or overlapped. The number 1 would be the first layer, and the layer closest to the background of your site. The number 2 would be stacked on top of number 1, etc. You can remove this tag if you are using layers that you do not want to overlap.

* Padding: This is the margin of your div element in pixels. For instance, if you have text in your div element, you'll need margins so that the text doesn't go from one end of the div element to the other. This tag acts just like the cellpadding tag for tables.

* Border: This is the border of your div element in pixels. If you don't want a border, remove this variable. You can have a border that is solid, dottted, dashed, double, groove, ridge, inset, or outset.

* Background-image: This is the background image of your div element for IE.

* Layer-background-image: This is the background image of your div element for Netscape.


MAKING A DIV ELEMENT SCROLL:
Code: Select all
Adding the "overflow:auto" tag to your div element will make it scrollable, like a text area:

<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; overflow:auto;">

Your text and images would go here

</div>

In the above code, you can position the div element by adjusting the numbers in bold.


CHANGE DIV SCROLLBAR COLOR:
Code: Select all
(IE only) You can use this method to change the color of your individual div element scrollbars. Using a style sheet makes your scrollbars all the same color. If you want a different color for a particular div, you can use this method, substitute your own 6 digit color number where you see bold text:

<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; overflow:auto; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #000000;">

Content here

</div>

ImageImage

Tip jar: the author of this post has received 0.00 INK in return for their work.

SinfulSoul
GWC Veteran
Member for 13 years
Progenitor Conversation Starter Author World Builder Conversationalist Beta Tester Contributor

Post a reply

RolePlayGateway is a site built by a couple roleplayers who wanted to give a little something back to the roleplay community. The site has no intention of earning any profit, and is paid for out of their own pockets.

If you appreciate what they do, feel free to donate your spare change to help feed them on the weekends. After selecting the amount you want to donate from the menu, you can continue by clicking on PayPal logo.

 

Who is online

Users browsing this forum: No registered users and 0 guests