aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes HTML Horizontal Line Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "HTML Horizontal Line" Watch "HTML Horizontal Line" New topic
Author

HTML Horizontal Line

Meet Gaurav
Ranch Hand

Joined: Oct 08, 2008
Posts: 492
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.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61426
    
  67

Use CSS to underline the name, or perhaps to use a bottom border.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61426
    
  67

Oh, and by the way the <font> tag is deprecated and should not be used. Use CSS for styling.
Dawn Charangat
Ranch Hand

Joined: Apr 26, 2007
Posts: 249
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>
K West
Ranch Hand

Joined: Sep 10, 2008
Posts: 58

What you can also do is,





Years teach us more than books.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Sep 10, 2008
Posts: 58

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

Joined: Oct 08, 2008
Posts: 492
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
Brian Legg
Ranch Hand

Joined: Nov 07, 2008
Posts: 488
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.

SCJA
~Currently preparing for SCJP6
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Oct 08, 2008
Posts: 492
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

Joined: Nov 07, 2008
Posts: 488
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

Joined: Oct 08, 2008
Posts: 492
Not a color issue.. I need a line upto my name(just like
Meet Gaurav
Ranch Hand

Joined: Oct 08, 2008
Posts: 492
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

Joined: Apr 26, 2007
Posts: 249
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

Joined: Sep 10, 2008
Posts: 58

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

Joined: Nov 07, 2008
Posts: 488
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

Joined: Oct 08, 2008
Posts: 492
Thanks west... Everything works fine

Great help .. Thanks a lot
Brian Legg
Ranch Hand

Joined: Nov 07, 2008
Posts: 488
Sure, edit your post so I look crazy

I see what you did now
Bauke Scholtz
Ranch Hand

Joined: Oct 08, 2006
Posts: 2458
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

Joined: Nov 07, 2008
Posts: 488
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
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: HTML Horizontal Line