|
|||
|
|
|||
Menu- Help Forum - CIA Topsite - Getting Started - HTML Tags - Links - Graphics - Text - Display Your Code - Site Formatting - CSS - PHP - Javascript - Guestbooks / Shoutbox - Lists - Extras - Lines - Scrollbars - Cursors - Marquees - Background Music - Site Tips Tools- Scrollbar Gen - ASCII Chart - HTML Cheat Sheet - MySpace Ad Remover - Xanga Ad Remover Contact MeSite Links- Your link here - More Affiliates... |
ExtrasLinesI've been asked by numerous people how to add "those lines" to my website. Both vertical and horizontal. This is actually a relatively simple code and you just place it where ever you would like them to appear. HR or a horizontal rule, creates a horizontal line across a page.<hr>
- See This Code In Action You can also adjust different aspects of this line. For example the width, if you don't want it to take up the entire line its in you just write width="50%" this would take up only half. <hr width="50%">
- See This Code In Action size= creates the height of the line. For example, size=10 would be 10 pixels high. <hr width="50%" size="10">
- See This Code In Action Color of the line can also be changed. This is done by using color="#ff0000" (red in this case) Find more color codes by going to the color chart in the left menu. <hr width="50%" size="10" color="#ff0000">
- See This Code In Action Making a vertical line just uses the size and width technique. If you change width to 1 (if % is not used its the number of pixels) and the size to 100. It will be a 1 pixel wide 100 pixel high vertical line. <hr width="1" size="100" color="#ff0000">
- See This Code In Action Top ScrollbarsSeems to me that a big thing when designing websites is to change the scrollbar to match the layout of the site. Just use our scrollbar color generator. You can copy and paste the code either into a css file or directly onto the page who's scrollbar you would like to change. If you copy directly into a page you must put surround tags of <style></style>.Top CursorsWell everyone knows the pointer that we use to navigate pages. The cool thing is that we can change that cursor for the visitors on our page. I'm going to go over a few of the main ones and you can take the knowledge to go search for more cool mouse options.Within the style tags we've been speaking about simply place cursor: ; and fill in the blank with different options. For instance, help, pointer, wait, crosshair, and move are all commands which will change the mouse. You can place them as the body cursor or specify for which location you would like it to change. Cursors can be made different for different sections. All you have to do is take the cursor:; code and place it within different tags. Placing it within the a{} section would change the cursor for links. body{} for the entire page and so on.
<style> body{ cursor: crosshair } </style> This would make the cursor a crosshair on the entire page.
<style>
a{ cursor: crosshair } </style> This would make the cursor a crosshair on the links. However, we can get even more specific by using classes. As I had shown in the CSS section classes can section off different parts of the page. If we take five different classes and use them on div layers we can show the mouse change as you hover over each layer.
<style>
.one{ cursor: crosshair } .two{ cursor: help } .three{ cursor: pointer } .four{ cursor: wait } .five{ cursor: move } </style> <div class="one" style="height:50; width:50; border:1; border-color:black; border-style:solid;>Crosshair</div> <div class="two" style="height:50; width:50; border:1; border-color:black; border-style:solid;>Help</div> <div class="three" style="height:50; width:50; border:1; border-color:black; border-style:solid;>Pointer</div> <div class="four" style="height:50; width:50; border:1; border-color:black; border-style:solid;>Wait</div> <div class="five" style="height:50; width:50; border:1; border-color:black; border-style:solid;>Move</div> - See This Code In Action You can also place your own image as a cursor. Once again I'm going to be using the example.gif image. url(upsidedown.cur) needs to be added to the cursor code. The image linked to MUST be .cur or .ani.
<style>
.six{ cursor:url(images/upsidedown.cur);} </style> <div class="six" style="height:50; width:100; border:1; border-color:black; border-style:solid;">Example</div> - See This Code In Action Top MarqueesThese are cool, marquees allow you to have text, images, links, or anything else you want scroll across the screen. This allows you to put much more text along a single line of a page than would otherwise be impossible.<marquee>Text To Scroll</marquee> This code simply takes a line of the site and scrolls the word Text To Scroll across the page. - See This Code In Action Pretty simply hu? If you want to make it a link just put the link code around it. <marquee><a href="http://www.codeitall.com" target="_blank">Text To Scroll</a></marquee>
- See This Code In Action You could then take Text To Scroll and change it to an image. <marquee><a href="http://www.codeitall.com" target="_blank"><img src="images/example.gif"></a></marquee>
- See This Code In Action Marquees also have adjustable background color, width, behavior, direction, speed, and loop amounts. <marquee bgcolor="#FF0000">Text To Scroll</marquee>
- See This Code In Action In this case I used red for the background color, you can find other color codes by using the color chart linked to in the menu. Marquee width just states how long it is. Either a pixel amount (number alone) or a percentage of the page width (number followed by %). <marquee width=100>Text To Scroll</marquee>
- See This Code In Action <marquee width=50%>Text To Scroll</marquee>
- See This Code In Action Behavior just states what the text should do. Alternate or Slide are the two choices. Alternate has the text bounce from left to right. Slide scrolls across once and stops. <marquee behavior="alternate">Text To Scroll</marquee>
- See This Code In Action <marquee behavior="slide">Text To Scroll</marquee>
- See This Code In Action To change the marquee's direction simply write direction= and the direction you'd like it to go. To scroll to the left do not specify a direction. <marquee direction="right">Text To Scroll</marquee>
- See This Code In Action <marquee direction="up">Text To Scroll</marquee>
- See This Code In Action <marquee direction="down">Text To Scroll</marquee>
- See This Code In Action You can also have line breaks within one marquee. <marquee>Text<br>To<br>Scroll</marquee>
- See This Code In Action Scrolldelay sets the number of milliseconds to wait between each scroll of the marquee. <marquee scrolldelay=10>Text To Scroll</marquee>
- See This Code In Action <marquee scrolldelay=1000>Text To Scroll</marquee>
- See This Code In Action Scrollamount sets the amount to scroll per scroll. Higher the number the further it moves each time. <marquee scrollamount=10>Text To Scroll</marquee>
- See This Code In Action <marquee scrollamount=100>Text To Scroll</marquee>
- See This Code In Action Loop number sets the amount of times to have the marquee loop. Do not set a loop amount if you want it to loop forever. <marquee loop=10>Text To Scroll 10 times</marquee>
- See This Code In Action <marquee loop=50>Text To Scroll 50 times</marquee>
- See This Code In Action Be sure to mix and match what you now know to make even cooler looking marquees. Top Background MusicTo place background music on your website just use this code.<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed> <noembed> <bgsound src="yourmusicfile.mid" loop="infinite"> </noembed> Replace yourmusicfile.mid with the link to the music file you would like to place on your website. Note the file does NOT have to end in mid. Other file types will work. - See This Code In Action Top SpansSpans are pretty cool, they are used quite often on this site. I'll explain the way they are used here. First is the id command, you need to be able to call the specified span from another location therefore span id= is needed. We also need a style. On this site the default is that the display is none so whatever is within the span tags is not visible. The cool effect we get by using this is what you see throughout this website. Links that simply display an example. This is done by the following code. - <a onClick="toggle('spanid')">See This Code In Action</a><br>
<span id="spanid" style="display:none;">This will be displayed only when the link is clicked. It will also disappear when the link is clicked a second time.</span>
- See This Code In Action You also need to be sure that the javascript which describes what toggle is, is on the page. Without it nothing will happen. This site includes that javascript code in the footer.php file because the footer appears on every page.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } </SCRIPT> As you might notice this code really helps keep the site from becoming too confusing. Examples only show when asked for. Top |
||
|
|||