Create a half table with border

**kvbhaskar7** · 12-07-2011, 06:28 AM

Hi,

I am having a requirement where i need to create a box/table as showed in this picture (click the below link)...

Can someone help me out to get the CSS for this table layout. I tried it, but not able to get this layout. Appreciate your help !

**coothead** · 12-07-2011, 11:56 AM

Hi there kvbhaskar7,

the following example will work in modern browsers - ( IE9, Firefox 5+, Chrome 12+, Safari 3.2+ and Opera 11+ )...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#box {
    border:1px dashed #900;
    height:300px;
 }
#left,#right{ height:0;
    float:left;
    width:200px;
    border-top:1px solid #fff;
    transform:rotate(90deg);
    -moz-transform:rotate(90deg); 
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform-origin:-25px 25px;
    -moz-transform-origin:-25px 25px;
    -ms-transform-origin:-25px 25px;
    -o-transform-origin:-25px 25px;
    -webkit-transform-origin:-25px 25px;
 }
#right{
    float:right;
    margin-right:-201px
 }
#text {
    height:260px;
    margin:20px;
    overflow:auto;
 }
</style>

</head>
<body>

<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec mauris est, 
a hendrerit enim. Nunc consequat, orci vitae tristique consectetur, nibh eros 
adipiscing nunc, et pellentesque diam odio eget ligula. Proin et est purus, a 
ornare ante. Sed ullamcorper porta mauris, ac consectetur erat egestas nec. Fusce 
id aliquam mauris. Integer ac dolor purus. Fusce sollicitudin luctus nibh. Cras 
augue odio, lacinia vitae suscipit nec, semper ut magna. Pellentesque ullamcorper 
tincidunt scelerisque. Integer at nunc eget elit sollicitudin volutpat. Maecenas 
luctus elementum odio, a laoreet libero ullamcorper vitae. Aliquam erat volutpat. 
Vestibulum eu lectus ligula. In lacinia vehicula condimentum. Fusce eget 
scelerisque diam.
</div>
</div>

</body>
</html>

coothead

**coothead** · 12-07-2011, 12:32 PM

Hi there kvbhaskar7,

the following example will also work in modern browsers - ( IE9, Firefox 5+, Chrome 12+, Safari 4+ and Opera 11+ )...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">

#box1 {
    border-top:1px dashed #900;
    border-bottom:1px dashed #900;
    height:300px;
    background-image:url(border.jpg),url(border.jpg);
    background-repeat:no-repeat;
    background-position: right top,left top;
}
#text1 {
    height:260px;
    margin:20px;
    overflow:auto;
 }
</style>

</head>
<body>

<div id="box1">
<div id="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec mauris est, 
a hendrerit enim. Nunc consequat, orci vitae tristique consectetur, nibh eros 
adipiscing nunc, et pellentesque diam odio eget ligula. Proin et est purus, a 
ornare ante. Sed ullamcorper porta mauris, ac consectetur erat egestas nec. Fusce 
id aliquam mauris. Integer ac dolor purus. Fusce sollicitudin luctus nibh. Cras 
augue odio, lacinia vitae suscipit nec, semper ut magna. Pellentesque ullamcorper 
tincidunt scelerisque. Integer at nunc eget elit sollicitudin volutpat. Maecenas 
luctus elementum odio, a laoreet libero ullamcorper vitae. Aliquam erat volutpat. 
Vestibulum eu lectus ligula. In lacinia vehicula condimentum. Fusce eget 
scelerisque diam.
</div>
</div>

</body>
</html>

Test it with the use of the attached image.

coothead

**kvbhaskar7** · 12-08-2011, 01:58 AM

Thanks coothead for your quick response... I have tried both the approaches and it didnt worked for me. But, it is working if i open in my browser.

Actually, i am using this CSS in my XSLT to transform a XML document to word document. When i use this, it is showing the full box and for some reason i think it is applying only BOX class, but not the left & right css class.

1. I have my own XSL file which contains all the css
2. Opening the source XML file in word
3. Applying this XSL file to transform the XML to word document.

After transformation i still dont see half box

Is it because i am using Word, not any browser?

Any other alternatives to achieve this? Appreciate your help once again !

**coothead** · 12-08-2011, 11:08 AM

Hi there kvbhaskar7,

I only write code for browsers.

The use of "Word" for the creation of valid web pages can be fraught with danger.

Further reading:-

coothead

**djr33** · 12-08-2011, 08:03 PM

If you're using Word, then use Word to create the effect. If you're planning to have a webpage in the end, then use HTML (and CSS) to create the effect. Don't mix the two, or you'll just waste a lot of time finding out in the end that they're not compatible.

The *only* time you would want to convert between the two is if you absolutely must take a long and complicated word document and put it on your website, and you don't have the time to remove all the formatting then recreate it in HTML. It's not a good idea then, but often you can find a way to get a relatively readable webpage out of word, as long as you're willing to sacrifice quality for speed. To be extra clear: I am not suggesting that in any situation you should design a website in word, but rather than certain documents might be ok as word-generated pages if you understand that they often won't display correctly and all that matters is the content (text)-- I'd also recommend a note "this has been automatically converted from MS Word" and to supply a download link to the original file in case there is any trouble reading it as a webpage.
(Likewise, if you must use word to open a webpage, I suppose you can, but it will often not display things correctly. That's just how it works. Either recreate it, or accept the easy and badly formatted version.)

From what you've said, it sounds like you're trying to use MS Word to import webpages. Is that correct? Why?
And if not, if you're using Word to generate webpages, then I (we all) strongly suggest using another method. But even if you do keep using Word, realize that the "preview" it gives you is irrelevant as long as the exported version (that is, the one you view in your browser) displays the formatting correctly. It's just a preview in word (or in Dreamweaver, or any other website editing program), so don't worry about it.
The real problem you'll find is that formatting that looks correct in MS Word will inexplicably change when viewed in a browser and you won't know how to fix it because in Word it looks right. That's the issue.

**kvbhaskar7** · 12-08-2011, 08:52 PM

Thanks djr33.

Actually, i am not generating any web pages from word document. I have a requirement where i need to convert a XML file to word document. For this, i choosed XSLT to apply transformation on this file using HTML/CSS which will automatically render it in word document.

When i apply XSL file on XML, it generates HTML code which in turn convert it to word doc (using C#).

As part of this process, i need to render every element and this "HALF BOX" is part of it

When i copy the HTML code given by coothead, its working fine in browser. But, when i use the same code in XSL to generate word document, then i am getting only dotted lines of top and bottom, but not left and right.

I dont know why Word is not rendering these styles even in "browserr" mode.

**djr33** · 12-08-2011, 09:10 PM

Word isn't a browser. It should not read the files as a browser would. As we've said, you need to choose one or the other. Mixing both is going to be difficult and probably not give good results. I'm sorry I don't have any more advice.

**dofdiamond** · 12-17-2011, 05:34 AM

Hi, Thanks coothead,

Useful Reply but i want to set Header and Normal Text at same line with different color in Border Possible.

**coothead** · 12-17-2011, 09:47 AM

Hi there dofdiamond,

and a warm welcome to these forums.

...but I want to set Header and Normal Text at same line with different color in Border Possible.

I am sorry but, other than changing the border-color, I do not understand your request.

Perhaps you could elucidate your problems further for us.

Having said all that, I must assume that I was under the influence of some hallucinogenic
substance when I posted the nonsense code above.

Neither of the codes in the examples submitted were necessary.

This is how I should have simply coded it...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#box {
    height:400px;
    border:2px solid #000;
    margin:0 20px;
    background-color:#fff;
 }
#left,#right{
    float:left;
    width:2px;
    height:200px;
    margin:100px 0 0 -2px; 
    background-color:#fff;
 }
#right{
    float:right;
    margin:100px -2px  0 0;
 }
#text {
    height:360px;
    margin:20px;
    overflow:auto;
 }
</style>

</head>
<body>

<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec mauris est, 
a hendrerit enim. Nunc consequat, orci vitae tristique consectetur, nibh eros 
adipiscing nunc, et pellentesque diam odio eget ligula. Proin et est purus, a 
ornare ante. Sed ullamcorper porta mauris, ac consectetur erat egestas nec. Fusce 
id aliquam mauris. Integer ac dolor purus. Fusce sollicitudin luctus nibh. Cras 
augue odio, lacinia vitae suscipit nec, semper ut magna. Pellentesque ullamcorper 
tincidunt scelerisque. Integer at nunc eget elit sollicitudin volutpat. Maecenas 
luctus elementum odio, a laoreet libero ullamcorper vitae. Aliquam erat volutpat. 
Vestibulum eu lectus ligula. In lacinia vehicula condimentum. Fusce eget 
scelerisque diam.
</div>
</div>

</body>
</html>

coothead