ansaurus

Question

To Tableless or not to tableless: Html expanding box with custom corners

Answer 1

+1 A:

No, this can be achieved through standard CSS. If you don't set the width or the height, they will naturally form. The height is determined by the length of the content and the width (if not specified) will fill the width of the container it is in. If the width of the container is the whole page, then it will take up the whole page...

it seems like to achieve what you're looking for you could do something like:

<div class="container">
  <div class="outer-wrap">
    <div class="inner-wrap">
      <div class="content">
        <p>Content here</p>
      </div>
    </div>
  </div>
</div>

While I don't generally condone the use of non-semantic code-bloat such as this, it will certainly get the job done. You can set the corners to be the background images of the various divs in your CSS.

Jason 2009-07-27 23:07:47

What about the content in r1, r2 r3 and r4? where does that go?

Byron Whitlock 2009-07-27 23:29:47

there is no content in there... those are design elements, or so i thought. if he needs content in there, then he has some design issues, i believe....

Jason 2009-07-27 23:47:56

Byron is right, there needs to be a background image spanning the entire width or height of a row (r1 through r4)... And those cannot go under/over either of the corners, because those have transparent roundings...

Ropstah 2009-07-28 12:56:19

Answer 2

+5 A:

Looks like a table to me too. I am sure I'll be branded a heretic, but sometimes it is easier to use a table than css.

 <table>
  <tr>
   <td id=container>
    <table>
    <tr>
      <td id=c1></td>
      <td id=r1></td>
      <td id=c2></td>
    </tr>
    <tr>
      <td id=r4></td>
      <td id=content></td>
      <td id=r2></td>
    </tr>
    <tr>
      <td id=c4></td>
      <td id=r3></td>
      <td id=c3></td>
    </tr>
   </table>
   </td>
  </tr>
 </table>

Byron Whitlock 2009-07-27 23:19:34

bllllllllllllllleeeeeeeeeeeechhhhhhhhhhhhh

Jason 2009-07-27 23:27:15

I know, I know. Don't burn me at the stake...

Byron Whitlock 2009-07-27 23:28:53

Is it really easier, or is it just that you are more used to it?

Guffa 2009-07-27 23:40:51

Guffy, please show how this can be achieved -without- using tables..? Please keep in mind all constraints.. (unknown width/height, rounded corners with transparency)

Ropstah 2009-07-28 12:57:41

No, tables are just bad. But it isn't very pretty in css either! I'll see if I can make something.

DaMacc 2009-12-08 16:15:59

It takes guts to do something in a table these days. Even when it's tabular data, some body going is to complain about it. Enough!

Rimian 2010-02-26 12:56:04

Answer 3

A:

r4 fixed(5px), content liquid, r2 fixed(fixed)

See if this tool can help.

http://www.pagecolumn.com/liquidfixed/3%5Fcol%5Ffix-liquid-fix.htm

unigg 2009-12-08 16:04:56

Answer 4

+1 A:

My quickly made css solution:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS borders</title>
<style>


* {
margin:0;
padding:0;
}

#container
{
    width:20%;
}

#head
{
    background-image:url(images/rounded_01.png);
    background-position:left top;
    background-repeat:no-repeat;
    height:14px;
    width:14px;
    width:100%;
}

#head-mid
{
    background-image:url(images/rounded_02.png);
    height:14px;
    margin-left:14px;
    margin-right:14px;
}

#head-right
{
    background-image:url(images/rounded_03.png);
    background-position:right top;
    background-repeat:no-repeat;
    height:14px;
    width:100%;
}

#content
{
    background-image:url(images/contentleft.png);
    background-position:left top;
    background-repeat:repeat-y;
    height:14px;
    width:14px;
    width:100%;
}

#content-mid
{
    background-image:url(images/content.png);
    height:14px;
    margin-left:14px;
    margin-right:14px;
}

#content-right
{
    background-image:url(images/contentright.png);
    background-position:right top;
    background-repeat:repeat-y;
    width:100%;
}

#bottom
{
    background-image:url(images/rounded_07.png);
    background-position:left top;
    background-repeat:no-repeat;
    height:14px;
    width:14px;
    width:100%;
}

#bottom-mid
{
    background-image:url(images/rounded_08.png);
    height:14px;
    margin-left:14px;
    margin-right:14px;
}

#bottom-right
{
    background-image:url(images/rounded_09.png);
    background-position:right top;
    background-repeat:no-repeat;
    height:14px;
    width:100%;
}
</style>
</head>
<body>
    <div id="container">
     <div id="head">
       <div id="head-right">
        <div id="head-mid">
        </div>
       </div>
     </div>
     <div id="content">
       <div id="content-right">
        <div id="content-mid">
        <p>content here... will auto expand and resize</p>
        </div>
       </div>
     </div>
     <div id="bottom">
       <div id="bottom-right">
        <div id="bottom-mid">
        </div>
       </div>
     </div>

    </div>
</body>
</html>

All files (images and psd): http://www.mediafire.com/file/zmemlw0tyyv/css.rar

DaMacc 2009-12-08 17:09:05

That's a lot of code for what it outputs.

Rimian 2010-02-26 12:57:19

The css can be optimized, I just made it this way for clarity.

DaMacc 2010-02-27 13:14:41

ansaurus

tags:

views:

answers:

To Tableless or not to tableless: Html expanding box with custom corners

related questions