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

Latest Discussions: Assignment Help Service at Affordable Rates » Iskjerne Ballad by dealing_with_it » Viking Music / Norse Songs - Germanic Paganism » Capitalism » Panspermia: a Case for Cordyceps » The Ethics on owning a Housepet » I just really had to share this plot idea. » Materialism » Satire & Comedy » Platonic numbers » No complaints (a little bit of rappin) » Any multi-player roleplay videogamers here? » Needing a woman's perspective on a concept » Gluts and Gaps » Universal Basic Income » Impending Pursuit Q&A » Eudaimonia » Loot! » Natural Kinds » I have a funny idea »

Players Wanted: DEAD! » Looking for new RP Buddy(s)! » Sands of Oblivion » Looking for Role Players to join an active universe » Looking for Empire of Cendalia Players » Seeking Roleplayers for The Isekai Wonderland Project » Hadean The Brave - Fresh Blood » Just a trophy of status - long term, story focus! » Kingdom come looking for roleplayers » The Last Dragon! » Roleplay Return for 1 x 1 » Players wanted for a science fiction adventure. » Players needed for Fantasy Romance reboot » One(1) male & Two(2) Female Roles OPEN <3 » Talmora: Kingdom of magic » Looking For A New Partner » Hellboy characters » 18+ Writing Partner [Fantasy, Romance, Etc.] » 18+, Multi-Para to Novella Writers please! » Looking for roleplayers »

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 17 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 1 guest