Log in

View Full Version : Issue with <p> tag


jerdy
10-28-2009, 08:39 PM
Issue @ www.metzhere.com/yogamoves/contact.html

I am having some trouble when using the <p> tag. I would like more space between the image and the contact info, I added double <p> and it doesn't seem to work. Then I tried adding css rules to the <p> tag and it mussed up most of my text.

Not sure what I should do? :confused:
traq
10-29-2009, 03:20 AM
<p> is for "paragraph", not a line break. The opening <p> tag also requires a closing </p> tag; it can't be used on its own. For minimal changes to your markup, you could use line breaks ( <br /> ) to create the space:

...
<a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a>
<br />
<br />
<img src="img/contactpg.jpg" alt="contact image" style="margin: 0 auto;" />
...
You should also (as shown above) use css to center your image, rather than the (depreciated) <center> tag.
boogyman
10-29-2009, 03:52 AM
<p> is for "paragraph", not a line break. The opening <p> tag also requires a closing </p> tag; it can't be used on its own. For minimal changes to your markup, you could use line breaks ( <br /> ) to create the space:

...
<a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a>
<br />
<br />
<img src="img/contactpg.jpg" alt="contact image" style="margin: 0 auto;" />
...
You should also (as shown above) use css to center your image, rather than the (depreciated) <center> tag.

Traq - In the future, please do not encourage the use of <br> tags for use in the wrong context.

Jerdy, do some research into padding-top (http://w3.org/TR/CSS21/box.html#propdef-padding) for the "space" issue, and to center, you can use text-align:center (http://w3.org/TR/CSS21/text.html#propdef-text-align)
traq
10-29-2009, 04:32 AM
Traq - In the future, please do not encourage the use of <br> tags for use in the wrong context.

I agree that it's not the only -or even "best"- way to do it, but I don't think it is necessarily inappropriate to use a line break in this case. I'm certainly not dismissing your point; css is the "ideal" solution. But by looking at only a snippet of code, it's not clear if this image is the only one that padding is needed on - other images may need to be left with no (or default) padding. In unique situations like this, I sometimes find it more convenient to add spacing by using a line break - and though it may not be the most desirable solution, it does work, it can save some time and it's not invalid or "wrong" in any way.

In my earlier response, I did consider a second example using css. Because of the OP's misunderstanding of the <p> tag, I wasn't sure if it would be more confusing than helpful, and so I decided to recommend minimal changes to the existing markup. A better solution might be:

...
<a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a><br />
<img src="img/contactpg.jpg" alt="contact image" style="margin: 0 auto; padding-top: 1em;" />
...

I'll be sure to elaborate more on my suggestions in the future. Thanks!
jerdy
11-08-2009, 08:13 AM
Does this same padding feature work with a paragraph? Or table?
bluewalrus
11-08-2009, 09:12 AM
You can apply padding to any element please be more specific, as to what it relates.
jerdy
11-08-2009, 05:58 PM
The first screen shows that I want to add padding to a set of paragraphs. I do not wish to change the padding of the #content because that would mess with the other pages. Will I have to create a new div id with new padding or is there a simpler way to change it?
(http://metzhere.com/yogamoves/eye_excercise.html)

The second screen shot shows how I want to add space to certain individual lines without having to use a <br> tag.
(http://metzhere.com/yogamoves/eye_pillows.html)
traq
11-08-2009, 09:53 PM
you can add padding to a paragraph, yes. If you want to add it to all your paragraphs you could even make a general rule in your <head> section or, better yet, in an external stylesheet. Look here (http://www.tizag.com/cssT/) or here (http://www.w3schools.com/css/default.asp) for some basics. On the other hand, if you want the extra padding to apply to all paragraphs in that particular section, then adding a <div> (with the padding rule) that contains them all is a better way to go.

About extra space after certain lines, there are several ways to go about it. By looking at your picture, I don't know if you want extra space after every paragraph? After every link? Before every quote? If you can say what conditions have to be met for your extra space, then you'll be able to write a css rule for it.
jerdy
11-09-2009, 04:59 PM
Cool, I understand the creating <div> for padding. :)

I would like it in completely random spots like the screen shot shows. Sometimes it just looks better with a little space ya know? ;)
traq
11-09-2009, 09:00 PM
if you want extra space in the "wherever I happen to want it" spots, you'll have to add the padding to the element before or after (padding-bottom or padding-top, respectively).
jerdy
11-10-2009, 09:19 PM
How exactly would you type it? Sorry this area is not my forte :/
traq
11-11-2009, 02:12 AM
well, in your screenshot above, you might add padding below the link:

<a href="order@yogamoves.net" style="padding-bottom: 2em;">order@yogamoves.net</a>or keep the link inside the preceding paragraph and add padding below the paragraph:

<p style="padding-bottom: 2em;">
...other text...
<a href="order@yogamoves.net">order@yogamoves.net</a>
</p>or simply add padding above the following paragraph:

...order@yogamoves.net</a>
<p style="padding-top: 2em;">Next pararaph content...etc.
All this assumes you're putting the css rules inline with the html, which may be fine for occasional use, but it's better practice to put everything (within reason) in an external stylesheet and link to it in your head section:

content.html:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

stylesheet.css
p{
padding-bottom: 2em;
}
a{
margin: 0 auto;
clear: both;
}
jerdy
11-18-2009, 01:08 AM
What if I want less space? It seems that negative values don't compute :confused:
traq
11-18-2009, 01:56 AM
margin can use negative values. You may also want to experiment with line-height.
jerdy
11-18-2009, 10:16 AM
These <p> tags are getting pretty darn complicated :o I'm sure!

I attempted to customize each paragraph. Though it looks how I want it (visually), I'm almost sure there's a quick hand method...

My shinanigan code:

<h2><img src="img/Warrior-2-left.jpg" alt="Warrior Left" hspace="30" />Yoga Talk<img src="img/Warrior-2-right.jpg" alt="Warrior Right" hspace="30"/></h2>

<span class="title">Welcome!</span>
<p style="padding-right:2em;">Yoga Talk is a place for me to write about things that are on my mind, as they come up, and for people to comment if they want to.
At present you can reach me by email <a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a> if you have comments. An interactive blog is coming soon!
<p class="title" style="padding-top:2em">~ Limitations ~</p>
<p class="center">For many years I have had a favorite quote that is short and sweet and gets right to the point.
<p><center><span class="quote">"Argue for your limitations, and sure enough they're yours."</span></center></p>
<p class="center">I credited it to Jonathan Livingston Seagull, a book that was written by Richard Bach some 30 + years ago.
<p class="center">I reread the book recently, and when I was through I realized that this quote I have been crediting to this book and this author is nowhere in the book. I even went back to be sure I had not missed it and saw that there were references to limitations a few times, but no direct quote.
Did I paraphrase it or should it be credited to another writer?
<p class="center">Does anyone out there know where this saying came from?
<p class="center">MeanwhileI have been thinking about the times I have sent information on and later found out it was not true. It used to happen a lot when I first started to use a computer. I would get an email that warned me about something, so I would pass the information on to friends and then find out it was a hoax. This is why I donít send anything out that is questionable, and I never send out those emails that tell me I will have bad luck if I donít.
<p class="center">And so far, I have not had any bad luck so I guess that myth is definitely not true.
<p class="center">So how do we know when something is true? We can look in a reference book, check out snopes.com, ask someone who would know the correct answer, or we can trust what we feel.

<p class="center">iving yourself the power to decide for yourself what you think. Too often we depend on the outer world to show us how to be, how to feel, what to wear, how to think. We get used to others thinking for us and get lazy.
<p class="center">I would rather come to an incorrect conclusion by myself, than to get it right because someone told me that is how I should feel.
<p class="center">What do you think?
traq
11-19-2009, 05:56 AM
try putting the css into an external stylesheet.


stylesheet.css
.c{ text-align: center; }
.pT2{ padding-top: 2em; }
.pR2{ padding-right: 2em; }
.title{ //add whatever styling you want for your title }


page.html
<span class="title">Welcome!</span>
<p class="pR2">Yoga Talk is a place for me to write about things that are on my mind, as they come up, and for people to comment if they want to.
At present you can reach me by email <a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a> if you have comments. An interactive blog is coming soon!
<p class="title pT2">~ Limitations ~</p>
<p class="c">For many years I have had a favorite quote...<!--and so on...-->

as you can see, by putting all your style information into a stylesheet, you can assign elements the styling you want without having to type everything out over and over. You can also add multiple classes to an element (separated by spaces).
jerdy
11-20-2009, 03:08 AM
Oh I see, that does make it a lot easier.

Thank you sir :)