Categories:
.NET (357)
C (330)
C++ (183)
CSS (84)
DBA (2)
General (7)
HTML (4)
Java (574)
JavaScript (106)
JSP (66)
Oracle (114)
Perl (46)
Perl (1)
PHP (1)
PL/SQL (1)
RSS (51)
Software QA (13)
SQL Server (1)
Windows (1)
XHTML (173)
Other Resources:
Hot To Test Borders with Different Widths, Styles, and Colors
Hot To Test Borders with Different Widths, Styles, and Colors? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements
✍: FYIcenter.com
If you want test borders on all 4 sides of a <P> tag with different widths, styles and colors, you can use the following HTML and CSS document. It allows you to specify border widths with different values and validate them with legend boxes.
<html><head> <style type="text/css"> H1 {font-size: 20px} DIV.page {width: 450px; border: 1px solid black} TABLE#out {background-color: #ffdddd} TD#box {border: 1px solid black} P#box {width: 300px; height: 300px; padding: 30px 10px 40px 20px; border-style: solid dotted double dashed; border-width: 30px 10px 40px 20px; border-color: #ff0000 #00ff00 #0000ff #000000; background-color: #ddddff} TD.legend#w30 {height: 30px; background-color: #ffffff} TD.legend#g30 {height: 30px; background-color: #dddddd} TD.legend#data {height: 160px; background-color: #ffffff} TD.legend#w40 {height: 40px; background-color: #ffffff} TD.legend#g40 {height: 40px; background-color: #dddddd} </style> </head><body><div class="page"> <H1>Content Box with Padding and Borders</H1> <table id=out><tr> <td id=box><p id=box><script language="JavaScript"> for (i=0; i<10; i++) { for (j=0; j<10; j++) { document.write(j+' '); } } </script></p></td> <td valign=top><table cellpadding=0 cellspacing=0> <tr><td class=legend id=w30>- padding-top</td></tr> <tr><td class=legend id=g30>- border-top</td></tr> <tr><td class=legend id=data>- Content box</td></tr> <tr><td class=legend id=g40>- padding-bottom</td></tr> <tr><td class=legend id=w40>- border-bottom</td></tr> </table></td> </tr></table> <p align="right">By FYICenter.com</p> <div></body></html>
Save this document as borderBox.html, and view it with a browser
you will see that the content height is reduced from 300px to 160px,
because of the top border, top padding, bottom padding and bottom border:
2007-05-11, 5323👍, 0💬
Popular Posts:
What are the high-level thread states? The high-level thread states are ready, running, waiting, and...
How To Export Data to an XML File? - Oracle DBA FAQ - Introduction to Oracle SQL Developer If you wa...
How can I show HTML examples without them being interpreted as part of my document? Within the HTML ...
Which bit wise operator is suitable for turning on a particular bit in a number? The bitwise OR oper...
What does address of operator do in background? The AddressOf operator creates a delegate object to ...