Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2006-11-01
5
Medium Priority
?
189 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
ID: 17854989
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
ID: 17854996
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
ID: 17862333
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 1200 total points
ID: 17863438


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
ID: 18004989
just last question.
Why i always found there are corner image used to drawing the outerbox
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

572 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