How to add dotted horizontal line in your page??

June 23, 2010

This was one such moment that made me go mad for no big deal.
The issue was simple to get a line of horizontal alignment, as we have with the <HR> tag in XHTML with a dotted decoration. As per the requirement said, i was in need of a “HORIZONTAL LINE”, so as any normal human my mind striked for going with the <hr> tag. SO what next start experimenting with the CSS behind the HR tag. It took all my time and my patience was tested to its peak. Oh god, there were no signs of getting it. All the backgrounds were tested , all the text decorations were applied for the HR tag, finally as usual the last solution – GOOGLE for the solution and so i did. Now wats this, i was no were near to the right solution to this issue. To my dismay it was done with a DIV tag???!!! But how??
This was as simple as u can imagine. The thing required was a DIV tag with no cotent in it. As u can in the below code, this shall give you an idea how really it works,
<div style=” border-bottom: 1px dotted #f4f4f4;”></div>
As is seen in the code, the division has no conetent and has a bottom border of size 1px, the border style as dotted and the color as per your need.
Isn’t that simple 🙂
Advertisements

2 Responses to “How to add dotted horizontal line in your page??”

  1. Robin Says:

    Note: copying and pasting the div code won’t work because of the quotes. If it doesn’t work then replace the two quotes with normal straight quotes.

    It then works perfectly fine. Thanks!


    • @Robin:
      But we usually make use of the Quotes in case of defining the styles in an inline HTML tag, I am not sure why it didn’t work for you. Good you had it fixed by some means.

      Thanks for the feed back…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: