Click to See Complete Forum and Search --> : How Do I Get This Text Centered?


Doguenanny
11-26-2008, 07:01 AM
I want to put our contact information in the 2nd paragraph on this page, and would like to know how to center only the 2nd paragraph.

http://www.endoftheroadkennels.com/contact.html

Another question...

I made the container smaller for the contact information, how does the page look now, comparing the contact information to the headings? Does it look okay like that, or should I do something different?

Thanks,

Frankie

Doguenanny
11-27-2008, 06:55 AM
I still can't figure out how to center only a portion of the text within the div#wrap . I want to center the contact information only, while allowing the other text to continue to wrap. How do I do that?

Thanks,

Frankie

javawebdog
11-27-2008, 04:51 PM
What are you trying to center?

javawebdog
11-27-2008, 06:08 PM
Without any content on the page I am having a hard time understanding what you want to do. Currently I see outer div called wrap, an inner div called contents with a div within it called topnav. Just outside top nav you have a simple paragraph tag (nested at the same level as topnav). Where on the page do you want to put the contact info? Below the p 'If you are interested in learning more about our dogues, or if you'd like to be considered for a puppy, please contact us?'

If so, set up another <p> and apply the style command text-align:center.
<p style='text-align:center'> contact info </p>

What concerns me more is the large amount of 'empty' space. May we assume you have a good deal more text to add?

Doguenanny
11-30-2008, 06:41 AM
I am trying to center the name and address information under the first paragraph. I want it to be something like this:

1st Paragraph: If you would like to learn more about our dogues, or if you are interested in being considered for a puppy, please contact us:

2nd Paragraph: I'm thinking about using a picture here

3rd Paragraph will be the contact information:

First Name Last Name
Street Address
City, State, Zip
phone #
email address.

By applying the style command "text align center" would that center just the first line of the address, or do I have to do something different to center each line?

Thanks

javawebdog
11-30-2008, 10:02 AM
try this:
<p style="text-align:center">
First Name Last Name <br />
Street Address<br />
City, State, Zip<br />
phone #<br />
email address
</p>
Style commands applied to <p> bridge all internal <br />, line breaks.

Doguenanny
11-30-2008, 02:12 PM
http://www.endoftheroadkennels.com/contact.html

Got it centered; thanks!

I want more space between the 1st paragraph and the contact information, what is the proper command for that?

Also, I want the email links to be black, how do I do that?

javawebdog
11-30-2008, 03:05 PM
Ok.
To increase the spacing between paragraphs, and I am assuming what you want to do is make the contact info standout:

Add to the current style for para 2:
from <p style="text-align:center">
to <p style="text-align:center;margin-top:10px;margin-bottom:10px"> or <p style="text-align:center;padding-top:10px;padding-bottom:10px">

[10px is an example, try different values until you like it]

Make links black:
Trickier: links have several 'states' -
# link - this is a link that has not been used, nor is a mouse pointer hovering over it
# visited - this is a link that has been used before, but has no mouse on it
# hover - this is a link currently has a mouse pointer hovering over it/on it
# active - this is a link that is in the process of being clicked

Style them. a:link,a:visited,a:hover,a:active{color:#000000}
imho: you can have link, visited and active the same color, however I recommend having hover a contrasting color (user cue). So maybe:

a:link,a:visited,a:active{color:#000000}
a:hover{color:#ff0000}

something like this:
<p style="text-align:center;padding-top:10px;padding-bottom:10px/">
Dennis & Frankie Von Hof <br />
7420 Woolsey Road<br />
Girard, PA 16417<br />
814-474-2225<br />
<a style="
a:link{color:#000000;}
a:visited{color:#000000;}
a:active{color:#000000;}
a:hover{color:#ff0000;}" href="mailto:blkmask@aol.com">Email Dennis</a><br />
<a style="
a:link{color:#000000;}
a:visited{color:#000000;}
a:active{color:#000000;}
a:hover{color:#ff0000;}" href="mailto:dixie4911@aol.com">Email Frankie</a>

</p>

Of course you can move the style to head too.

Doguenanny
11-30-2008, 04:19 PM
Got the spacing I was looking for.

Still trying to work on the link colors. I copied what you sent, but it didn't affect the color of the a link state, that's still blue. The visited link does change, but it changes to purple?????? I even changed the color codes to something different, just to see if it made a difference, but it doesn't, still have blue and purple. :confused:

Another question, if I put the style in the head, would I put it in the div#contents section?

One more thing, I like the black and gold color scheme, but I'm not satisfied with the color I chose for the contents background...it looks nice on my laptop, but I opened it up on the desktop, and it looks green. What color would you suggest that would compliment the gold and black. I initially tried the gold, but it really doesn't look gold, so that's why I used the "gold" only for the heading, navigation, and borders. By the way, I found a website where the color looked like real gold, I can't figure that out, I tried using the color codes from that website, but my colors didn't look like the colors on that website....here it is: http://www.keyair.com/home.html - that's the colors I'd really like to have. It looks very elegant to me! How did they do that? It wasn't just the color code; was it?

javawebdog
11-30-2008, 05:07 PM
For the links I created a css class
Place this in your style section in the head - -

a.contact:link, :visited, :active{color:#000000;}
a.contact:hover{color:#ff0000;}
}

then added it to the links like this:
<a class="contact" href="mailto:blkmask@aol.com">Email Dennis</a>
<a class="contact" href="mailto:dixie4911@aol.com">Email Frankie</a>

[also took out the <br /> between the links, imho looks a bit better]

Color:
try replacing color:#BDB76B with color:#EBBE50
and yes, it was just color code.