Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Create a half table with border

  1. #1
    Join Date
    Feb 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Create a half table with border

    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 !

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

  3. The Following User Says Thank You to coothead For This Useful Post:

    kvbhaskar7 (12-08-2011)

  4. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

  5. The Following User Says Thank You to coothead For This Useful Post:

    kvbhaskar7 (12-08-2011)

  6. #4
    Join Date
    Feb 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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 !

  7. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

  8. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  9. #7
    Join Date
    Feb 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  11. #9
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, Thanks coothead,

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

  12. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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
    Last edited by coothead; 12-17-2011 at 10:56 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •