Solved

Add a outer box inside the table just like experts-exchange

Posted on 2006-11-01
5
135 Views
Last Modified: 2010-04-09
I want to add a outbox inside the table. I know the both corner are the image files, but i dont know i to do it just look like expert-exchagne here.

  ~-----------------------------------------~
  | My text here                                 |
  |  * 1.                                            |
  |  * 2.                                            |
  |                                                    |
  ~-----------------------------------------~

0
Comment
Question by:LeanMoreTryMore
  • 2
  • 2
5 Comments
 
LVL 28

Expert Comment

by:gamebits
Comment Utility
A very simple way to do something similar is by using fieldset <fieldset>text text text text </fieldset>

Gamebits
0
 
LVL 17

Expert Comment

by:gops1
Comment Utility
Have a look at this:

<html>
      <head>
            <title>Script Demo</title>
          <style>
               div.rounded-box {
               position:relative;
               margin: 5px;
               }
               div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
               {position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;}
               div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; line-height: 40px;}
               div.top-left-corner { top:0px; left:0px;}
               div.bottom-left-corner {bottom:0px; left:0px}
               div.top-right-corner {top:0px; right:0px}
               div.bottom-right-corner {bottom: 0px; right:0px}
               div.top-left-inside {left:-8px;}
               div.bottom-left-inside {left:-8px; top:-17px;}
               div.top-right-inside {left:-25px;}
               div.bottom-right-inside {left:-25px; top:-17px;}
               div.box-contents {
               position: relative; padding: 8px; color:#000;
               }
          </style>

      </head>

<body>
      <div class="rounded-box" style="background-color: #cddef0; width: 200px; height: 9em;font-family:verdana;font-size:10px;">
            <div class="top-left-corner">
                  <div class="top-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-left-corner">
                  <div class="bottom-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="top-right-corner">
                  <div class="top-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-right-corner">
                  <div class="bottom-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="box-contents">
            - Place your content here -
            <ol style="margin-top:2px;">
                  <li>Point 1</li>
                  <li>Point 2</li>
            </ol>
            </div>
</body>
</html>
0
 

Author Comment

by:LeanMoreTryMore
Comment Utility
Thanks qops

  <style>
               div.rounded-box {
               position:relative;
               margin: 5px;
               }
               div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
               {position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;}
               div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; line-height: 40px;}
               div.top-left-corner { top:0px; left:0px;}
               div.bottom-left-corner {bottom:0px; left:0px}
               div.top-right-corner {top:0px; right:0px}
               div.bottom-right-corner {bottom: 0px; right:0px}
               div.top-left-inside {left:-8px;}
               div.bottom-left-inside {left:-8px; top:-17px;}
               div.top-right-inside {left:-25px;}
               div.bottom-right-inside {left:-25px; top:-17px;}
               div.box-contents {
               position: relative; padding: 8px; color:#000;
               }
          </style>

===
How do i increase the width / height of the inside box?
I try to increase the size of the
position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;

but it turns up very messy
0
 
LVL 17

Accepted Solution

by:
gops1 earned 300 total points
Comment Utility


And to change the height and width use the first DIV tag:

<div class="rounded-box" style="background-color: #cddef0; width: 98%; height: 300px;font-family:verdana;font-size:10px;">


Use this:

<html>
      <head>
            <title>Script Demo</title>
          <style>
               div.rounded-box {
               position:relative;
               margin: 5px;
               }
               div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
               {position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;}
               div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; line-height:42px;}
               div.top-left-corner { top:0px; left:0px;}
               div.bottom-left-corner {bottom:0px; left:0px}
               div.top-right-corner {top:0px; right:0px}
               div.bottom-right-corner {bottom: 0px; right:0px}
               div.top-left-inside {left:-8px;}
               div.bottom-left-inside {left:-8px; top:-18px;}
               div.top-right-inside {left:-26px;}
               div.bottom-right-inside {left:-26px; top:-18px;}
               div.box-contents {
               position: relative; padding: 8px; color:#000;
               }
          </style>

      </head>

<body>
      <div class="rounded-box" style="background-color: #cddef0; width: 98%; height: 300px;font-family:verdana;font-size:10px;">
            <div class="top-left-corner">
                  <div class="top-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-left-corner">
                  <div class="bottom-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="top-right-corner">
                  <div class="top-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-right-corner">
                  <div class="bottom-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="box-contents">
            - Place your content here -
            <ol style="margin-top:2px;">
                  <li>Point 1</li>
                  <li>Point 2</li>
            </ol>
            </div>
</body>
</html>

0
 

Author Comment

by:LeanMoreTryMore
Comment Utility
just last question.
Why i always found there are corner image used to drawing the outerbox
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now