Lissa Explains it All -- HTML Help for Kids


| Section 1 | Section 2 | Section 3 | Section 4 |
| Section 5 | Section 6 | Section 7 | Section 8 |
| Section 9 |


What is a div element?
How do I make a basic div?
How do I make a div that scrolls?
How do I change the div scrollbar color?



What is a div element?    A div element is a block of content that can be positioned anywhere on your site by using absolute positioning and the <div> tag. The purpose of div elements is to hold content, whereas frames hold pages. This content can be placed anywhere on your site and it can even overlap. The content can consist of images or html. All of the style elements like scrollbar color and font color can be controlled by a simple style sheet.



How do I make a basic div block?    This is the code for a basic div:

<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>


In the above code, there are a few variables that need to be defined:





up




How do I make a div element that scrolls?    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.



up




How do I change the div scrollbar color?    (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>



up







| About Lissa | Privacy Statement | Contact | Link Us |

Copyright 1997-2011 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.


lissaexplains.com


Lissa Explains it All -- HTML Help for KidsHTML Help, css, frames, tables, div layersCustom CursorsHTML Help ForumFree E-mail Service for Kids (and adults who love bright colors ;)Lissa Explains it All -- Free PostcardsLissa Explains it All -- MerchandiseLissa Explains it All -- Guestbook
HTML BasicsHTML TutorialCSS TutorialFrames TutorialTables TutorialColor TutorialFree JavascriptsFun Free Stuff for your siteMySpace TutorialHTML Tutorial
spacer