Announcements: Universe of the Month! » Finding Universes to Join (and making yours more visible!) » Guide To Universes On RPG » Starter Locations & Prompts for Newbies » RPG Chat — the official app » USERNAME CHANGES » Suggestions & Requests: THE MASTER THREAD »

Latest Discussions: Nihilism » Strange Tales From Hadean » Art Gulag [ Come get this Commish! ] » Visibility of Private Universes & Profile Customisation » Presuppositionalism » Aphantasia » Skill Trees - Good, Bad & Ugly » In-Game Gods & Gameplay Impact » Cunningham's Law » The Tribalism of Religion » Lost Library » Game Theory » The Hidden Void » Removing CS From an Indy Universe : Solution » On the Matter of New Players and Orphaned Plays » STOP BLAMING US FOR RPG BEING SLOW! » Polytheism » The Game of Life » Just War » Science and Philosophy »

Players Wanted: Chat Plays 5E Stream Seeks Players, Little to No Commitment » Looking for roleplayers » A Fairytale World in Need of Heroes & Villains! » Are You a Crime Addict? » Wuxia RP » Looking for roleplayers » New Realistic Roleplay - Small World Life ٩( ´・ш・)و » Mentors Wanted » MV Recruiting Drive: sci-fi players wanted! » Veilbrand: The Revolution » Gonna do this anyway. » Looking for Kamen Rider Players » Elysium » Looking for roleplayers for a dystopian past! » Revamping Fantasy Adventure RPG, need new players » Here, At the End of the World (supernatural mystery drama) » Seeking Role Players for a TOG Based RP » so I made a Stranger Things RP idk why not come join » LFP - New Roleplay » Gifted/Mutant individuals escaping the gov »

DIV Coding Reference

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

Moderators: dealing with it, Ambassadors

Talk about philosophy, politics, news & current events, or any other subject you're interested in!

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 16 years
Progenitor Conversation Starter Author World Builder Conversationalist Beta Tester Contributor Person of Interest Lifegiver Tipworthy

Post a reply

Make a Donation

$

Become a Patron!

RPG relies exclusively on user donations to support the platform.

Donors earn the "Contributor" achievement and are permanently recognized in the credits. Consider donating today!

 

Who is online

Users browsing this forum: No registered users and 0 guests