CODEWITHSUNDEEP
htmlmarkup
simPod
simPod

Reputation: 13466

How would you design the HTML markup for this

I want to make something like a horizontal line with a text in the middle of it. It should look like this (text image follows):

------------------------------------------ TEXT --------------------------------------------

the line should be dotted and the text in the middle should separate the line in half.

I came up with the idea of using a table with 3 elements with percentage values in width attribute but maybe there is a better solution.

I hope it's clear. Thanks for ideas

Upvotes: 3

Views: 654

Answers (4)

Karl Mendes
Karl Mendes

Reputation: 649

<div id="line"><span>TEXT</span></div>

And CSS:

#line{
    border-bottom: 1px black dotted;
    overflow:visible;
    height:9px;
    text-align:center;
    margin: 5px 0 10px 0;
}
#line span{
    background-color: white;
    text-align:center;
    padding: 0 5px;
}

See Example on JSFiddle

Upvotes: 5

Rob W
Rob W

Reputation: 349042

I would use CSS, and two containers:

Demo: http://jsfiddle.net/LRSuJ/

HTML:

<div class="something">
    <div class="content">Text</div>
</div>

CSS:

.something {
    border-bottom: dotted 1px #000;/* Border style */
    height: 10px;                  /* Adjusted height */
    margin-bottom: 10px;           /* Proper offset for next element */
    line-height: 20px;             /* Actual text height */
    text-align: center;            /* Center text */
}
.content {
    background-color: #FFF;        /* Hide previous dots */
    display: inline;               /* Inline element */
    padding: 0 10px;               /* Customisable left/right whitespace */
}

Upvotes: 1

stealthyninja
stealthyninja

Reputation: 10371

I would do it like this:

HTML

<fieldset>
    <legend>Text with dotted line</legend>
</fieldset>

CSS

fieldset {
    border: 0;
    border-top: 1px dotted gray;
}
legend {
    text-align: center;
}

jsFiddle demo: http://jsfiddle.net/XZcRB/

Upvotes: 0

Curtis
Curtis

Reputation: 103368

You could use a fieldset and legend:

<fieldset>
    <legend>TEXT</legend>
</fieldset>

fieldset
{
    border-top:solid 1px black;
}
fieldset legend
{
    text-align:center;
}

http://jsfiddle.net/2amBc/

Upvotes: 0

Related Questions