CODEWITHSUNDEEP
csslayout
Pavel Shchegolevatykh
Pavel Shchegolevatykh

Reputation: 2634

Dots in the middle of the row by CSS or JavaScript

Could you please help me to achieve layout as in this example?

Sample Image

Sample items in this list loads dynamically into view and length can be various. And it seems like the count of dots should change according to this. I try to use <table> element but it only I can set is dotted border to bottom and this is not my case because I need it in the middle of the row.

Upvotes: 1

Views: 1653

Answers (3)

Matthew Adams
Matthew Adams

Reputation: 10126

Here's a javascript solution. The idea is to set the font to monospace, and then place dots depending on the number of characters in a given row relative to the max number of characters in the samples column.

var samplePts = new Array( new Array("Sample",23), new Array("Longer Sample",9), new Array("Much Londer Sample",125) );

var maxSampleLen = 0;
for (var i=0; i<samplePts.length; i++){
    var currLen = samplePts[i][0].length;
    if (currLen > maxSampleLen){
    maxSampleLen = currLen;
    }
}

for (var i=0; i<samplePts.length; i++){
    var outputStr = "<div style='font-family: monospace;'>"+samplePts[i][0];
    for (var n=0; n<maxSampleLen-samplePts[i][0].length+5; n++){
    outputStr += "&#183;";
    }
    outputStr += samplePts[i][1]+"</div>";
    document.write(outputStr);
}

Upvotes: 1

Willem Van Bockstal
Willem Van Bockstal

Reputation: 2263

You could make the dots a vertically centered background for the TD. The content itself has a white background, so that the dots are hidden under the text.

Example here:

http://jsfiddle.net/willemvb/QkEzr/

Upvotes: 6

Rocky
Rocky

Reputation: 304

Here is what you could do in a quick and easy way with just CSS. Just create three blocks(div's). And give a bottom border to the middle div. Then move it's position a bit higher(margin-top with a negative value). I guess that's what you needed.

If you're using table, then no problem. Just add another div inside the second column. And add the bottom border as I said above. And move the div upper. Simple.

Upvotes: 2

Related Questions