• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

HTML Horizontal Line

 
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi

Am new to html, Am designing a web page and my requirement is

"
My name
-----------
Slogan
"



Currently the gap between the horizontal line and the slogan are more. I need the line immediately after my name. Anyway to change the resolution in that area alone.

Please assist.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Use CSS to underline the name, or perhaps to use a bottom border.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oh, and by the way the <font> tag is deprecated and should not be used. Use CSS for styling.
 
Ranch Hand
Posts: 249
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I guess, what you are looking for is an underline... am I right ?

In that case, the tag you are looking for is <u>

eg: My name is <u> Gaurav </u>
 
Ranch Hand
Posts: 58
Eclipse IDE Firefox Browser Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What you can also do is,



 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The underline tag <u> is depreciated and it should not be used.
It should be wrapped in a span and text decoration should be applied.


Here is one way to do it:




Eric
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

K West wrote:What you can also do is,





Why would you use label in this situation? Seems like a bad choice since it is meant to work with input tags: http://www.w3schools.com/tags/tag_label.asp

Eric
 
K West
Ranch Hand
Posts: 58
Eclipse IDE Firefox Browser Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You are right Eric, yours is the proper solution.
Have that 'label' habbit from VB. Will drop it right away.
Thank You.
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for all your reply guys..

Eric your solution helps me to resolve the issue. But the line is dark and too long. Any to change the solid line
 
Ranch Hand
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just play around with the values to see how they can be changed. Change border-bottom to 1px, change the color to something less dark, change the font size, etc. No one can get it exact for you because only you know exactly how you want it to look.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just change the hex value to the color code you want. Change the width by applying a width to your elements.

Eric
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Eric,

But still am unable to control the line length in FireFox but after specifying the width attribute IE controls the line length.
 
Brian Legg
Ranch Hand
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Can you post a text model of what it looks like now and what you want it to look like? Either that or post the HTML/CSS so we can see what your seeing. Firefox applies the CSS standards more strickly then IE does so if it does not render properly in FF then you are doing something flakey ;)

Also, here is a link to a GREAT reference site for getting hex codes for colors: HEX COLORS
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Not a color issue.. I need a line upto my name(just like
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Not a color issue.. I need a line upto my name(just like underline tag), But the line is coming, up to the end of the page.
 
Dawn Charangat
Ranch Hand
Posts: 249
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oh... so <u> is deprecated..... hmm... never knew that....

well, then why dont you try this :

My name is <span style="text-decoration:underline">Gaurav</span>
 
K West
Ranch Hand
Posts: 58
Eclipse IDE Firefox Browser Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It can be done this way



Just have to add a width attribute to the style.
This works in IE as well as FireFox.
 
Brian Legg
Ranch Hand
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That's confusing to me K... lol. you've got color set to black for the div, the bottom border set to black, and then you have darkred around the width. What does that do exactly? Also, darkred is not one of the "16 named colors" so I would use a HEX code here personally.
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks west... Everything works fine

Great help .. Thanks a lot
 
Brian Legg
Ranch Hand
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sure, edit your post so I look crazy

I see what you did now
 
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Brian Legg wrote:That's confusing to me K... lol. you've got color set to black for the div, the bottom border set to black, and then you have darkred around the width. What does that do exactly? Also, darkred is not one of the "16 named colors" so I would use a HEX code here personally.

Though supported by the major browsers. You can find them all here: http://www.w3schools.com/HTML/html_colornames.asp
 
Brian Legg
Ranch Hand
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Bauke, I know I just avoid them because they aren't standard.

From your link: "Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead"

That's what I was getting at
 
reply
    Bookmark Topic Watch Topic
  • New Topic