Forum Moderators: not2easy

Message Too Old, No Replies

Smooth rules in place of underlines

         

zonkd

1:58 pm on Jun 16, 2004 (gmt 0)

10+ Year Member



The client wants

Name __________________
Address________________
etc ___________________

to appear on a page in his site.

I'd like to use Border Bottom instead for some subtle lines. Is there a way, and can I stipulate the width?
Cheers, experts

pageoneresults

2:00 pm on Jun 16, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hello zonkd, Welcome to WebmasterWorld!

You could always wrap that inside of a

<pre></pre>
and style it via CSS.

<pre>
Name ___________________
Address ___________________
Etc ___________________
</pre>

<pre> = Preformatted

This is an excellent way to perfectly align plain text in the method you describe.

DrDoc

2:40 pm on Jun 16, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can also play with borders...

<style type="text/css">
.line {
border-bottom: 1px solid #ccc;
display: block;
position: relative;
width: 200px;
z-index: 1;
}
.line span {
border-bottom: 1px solid #fff;
margin-bottom: -1px;
position: relative;
z-index: 2;
}
</style>

<span class="line"><span>Name</span></span>
<span class="line"><span>Address</span></span>
<span class="line"><span>Etc</span></span>

zonkd

3:22 pm on Jun 16, 2004 (gmt 0)

10+ Year Member



pageoneresults
Thanks for the welcome. Thanks for the information. But presumably using <pre> I would use the typed-in underline?

I hoped to make the underlines look soft and, well, more interesting.

zonkd

3:23 pm on Jun 16, 2004 (gmt 0)

10+ Year Member



Thanks DrDoc

I'm playing with that now. Looks very interesting. Many thanks.

zonkd

3:34 pm on Jun 16, 2004 (gmt 0)

10+ Year Member



DrDoc

Ah-ha, you mean to incorporporate <pre>? Yes, that is nice.

Although, what I was hoping to do was have the line after the word. Perhaps a rearrangement of the declarations .... I'll try that. Many thanks.

DrDoc

4:36 pm on Jun 16, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



you mean to incorporporate <pre>

Umm, no... Just the code above as-is...

zonkd

8:20 am on Jun 17, 2004 (gmt 0)

10+ Year Member



Sorry, DrDoc, doesn't work for me without <pre>. I'm just copying your code, and pasting the css code into a separate style sheet. (And pasting the other into the page.)

I get a bottom rule, the word, and another bottom rule.(On either side of the word.) You seem to have a box.

I'm using dreamweaver mx.
Cheers

zonkd

9:40 am on Jun 17, 2004 (gmt 0)

10+ Year Member



Dear DrDoc
I've used a variation of yours on the page

<snip>

and it makes a neat job, thank you, of what could have been rather ugly.
Thanks very much for your guidance, and also thanks to pageoneresults.
cheers

[edited by: Woz at 9:52 am (utc) on June 17, 2004]
[edit reason] Sorry, no URLs please, see TOS#13 [/edit]