5

Styling dl and dt with CSS to mimic a table-like presentation

 2 years ago
source link: https://www.codesd.com/item/styling-dl-and-dt-with-css-to-mimic-a-table-like-presentation.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Styling dl and dt with CSS to mimic a table-like presentation

advertisements

I have the following issues using CSS to style some dl and dt elements. I prefer always to use very basic CSS that is compatible with IE6/IE7 and modern browsers. I am trying to get an effect, that to me should be rather simple to achieve.

Here's a stripped down version of the initial source code I am working with, to try and work on just this issue:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <style type="text/css">

        .terms dl {
            float: left;
            padding-left: 0px;
        }

        .terms dt, .terms dd {
            text-align: center;
            margin: 0px;
            float: left;
        }

        .terms dt {

            border: solid blue 1px;
            clear: left;
        }

        .terms dd {
            border: solid red 1px;
            margin-right: 40px;
            margin-left: 40px;
        }

        </style>
    </head>
    <body>
        <div class="terms">
            <h1>Terms</h1>
            <dl>
                <dt>Term 1:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 2:</dt>
                <dd>Definition for term</dd>

                <dt>Term 3 with longer term title:</dt>
                <dd>Definition for term</dd>

                <dt>Term 4:</dt>
                <dd>Definition for term</dd>

                <dt>Term 5:</dt>
                <dd>Definition for term</dd>

                <dt>Term 6:</dt>
                <dd>Definition for term</dd>
            </dl>
            <dl>
                <dt>Term 7:</dt>
                <dd>Defintion for term</dd>

                <dt>Term 8:</dt>
                <dd>Definition for term</dd>

                <dt>Term 9:</dt>
                <dd>Definition for term</dd>

                <dt>Term 10:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 11:</dt>
                <dd>Definition for term</dd>

                <dt>Term 12:</dt>
                <dd>Definition for term</dd>
            </dl>
        </div>
    </body>
</html>

Here is the visual result. I styled blue and red borders so that it is more easily visualized:

PmGMo.png

My goal is to have all the blue and red "boxes" to have the same width no matter what the text-size set is. E.g. if a user has a default style sheet to make their text very large, it should expand accordingly. This issue does not only arise when people use their own style sheet, it also arises in IE6 when people select "text-size" other than "medium" -- it makes the text larger, and I want to be able to accommodate that.

I don't think I want to have to set a hard width on any of the "boxes", and I don't want any wrapping of text, or having the floats fall down, out of this two column style.

I can edit the answer with more pictures and examples if I wasn't clear enough.

Also, this is a related, but separate question. If the browser window is re-sized, with a table you'd expect a portion of the table to become no longer visible as you decrease the width. With this setup, you get a very strange and ugly result as seen below. How can this be avoided?

v16DY.png

UPDATE

It seems there isn't a solution that does not involve giving fixed width's to the elements (and/or an encapsulating element). In addition, it seems IE6 text-resizing can only be resolved by hard setting your text to a pixel size and just not letting them re-size it.

you could just specify fixed width:XXpx for each of the elements like this

http://jsfiddle.net/XKaKT/1/


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK