Junior Coders
Issue with <p> tag
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?
global $Moderator;
<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:
You should also (as shown above) use css to center your image, rather than the (depreciated) <center> tag.Code:... <a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a> <br /> <br /> <img src="img/contactpg.jpg" alt="contact image" style="margin: 0 auto;" /> ...
Elite Coders
Traq - In the future, please do not encourage the use of <br> tags for use in the wrong context.Originally Posted by traq
Jerdy, do some research into padding-top for the "space" issue, and to center, you can use text-align:center
global $Moderator;
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:
I'll be sure to elaborate more on my suggestions in the future. Thanks!Code:... <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;" /> ...
Last edited by traq; 10-29-2009 at 04:37 AM.
Junior Coders
Does this same padding feature work with a paragraph? Or table?
Elite Coders
You can apply padding to any element please be more specific, as to what it relates.
Junior Coders
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)
global $Moderator;
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 or here 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.
Junior Coders
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?
global $Moderator;
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-bottomorpadding-top, respectively).
Posting Permissions
Reply With Quote
Bookmarks