Jump to content

No Spaces


ReptiGuy

Recommended Posts

I am doing a project for school where I have to make a fake webpage but since I am learning how to make real webpages I might as well make a real one and practice.I am using two <p> tags, one right after another so it creating to much space in between the words. How do I make it so it doesn't make spaces?I want it to look like this:

School NameSchool Info

Instead it looks like this:

School NameSchool Info

Here is my html:

<html><head><title>My Spanish Project</title><link rel="stylesheet" type="text/css" href="spanishproject.css"/></head><body>	<div class="background1">	<p class="banner">Liberty High School</p>	<p>925 Jewetta Avenue		</br>	Bakersfield, California  93312	</br>	Phone:  (661) 587-0925</p>	</div>	<div class="background2">	</div></body></html>

Here is my CSS:

body{background-color: #000151;margin: 1.5in;}.background1{background-color: #B10A24;text-align: center;}.banner{font-size: 2.5em;font-weight: bold;}.background2{background-color: #FFFFFF;}

Link to comment
Share on other sites

EDIT: excuse me, one of these is a different style. I did not at first see that. So just go with the span.You can use the <span> tag. The <span> tag functions like a paragraph but doesn't have those spaces. It can be used to change the style of text inside another tag like in this instance. All of this is now in the same paragraph but now it is a different style inside the span tag.Your new code could look like this with the <span> tag.

<html><head><title>My Spanish Project</title><link rel="stylesheet" type="text/css" href="spanishproject.css"/></head><body>    <div class="background1">    <p class="banner">Liberty High School    <span>925 Jewetta Avenue        </br>    Bakersfield, California  93312    </br>    Phone:  (661) 587-0925</span></p>    </div>    <div class="background2">    </div></body></html>

You might then want to define the span style in the CSS if the default isn't satisfactory, but I'll leave that to you.Good luck with your project ReptiGuy,Eru

Link to comment
Share on other sites

Thanks for the help!!!
Anytime :)
Link to comment
Share on other sites

I am doing a project for school where I have to make a fake webpage but since I am learning how to make real webpages I might as well make a real one and practice.I am using two <p> tags, one right after another so it creating to much space in between the words. How do I make it so it doesn't make spaces?
I see that you already have a reply, but since you express interest in learning to make real webpages, I feel that I might have a better real world solution for your problem.Now, in this solution, I assume that your use of </br> implies that you wish to have three lines for the school info, not just one long line with all three parts. If you would prefer to have just one line of info, just remove the extra <p> tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body {  background-color: #000151;}.background1 {  margin: 1.5in;  text-align: center;  background-color: #B10A24;}.background1 p {  margin-top: 0px;  margin-bottom: 0px;}  h1 {  margin-bottom: 2px;}</style></head><body>  <div class="background1">    <h1>Liberty High School</h1>    <p>925 Jewetta Avenue</p>    <p>Bakersfield, California  93312</p>    <p>Phone:  (661) 587-0925</p>  </div></body></html>

So what is different?1. I clarified the Doctype. That's all the extra stuff at the top before the <title> tag. Your HTML will often display correctly without it, but this declaration tells the web browser which version of HTML or XHTML you are using to develop your site.2. I used an internal style sheet. I did this because it was easier to use.3. I moved your margin style to the .background1 class. So instead of the entire body having the margin, only the elements with that class have the margin.4. I changed your first <p> tag to an <h1> tag. Liberty High School is something you want to make larger than the other information, so it makes sense to create a heading instead of making a <p> tag with a modifying class name.5. In order to answer your original question, I styled .background1 p. This affects your paragraphs by removing the inherit margin from the top and the bottom. You can change the number of pixels (px) to get the exact spacing you desire.6. Headings have an inherit bottom margin. I styled the new <h1> tag to remove that margin. Like the .background p style, you can change the number of pixels to suit your spacing needs. If you want more room between the school name and the school info, margin-bottom would be the style that you would most likely modify.7. As I noted before the code, I assumed you wanted 3 lines of school info, so I made 3 paragraphs. If you wanted just one line, you could remove the extra <p> tags and all the information would go beneath the school name. Hope this helps.

Link to comment
Share on other sites

I would argue that the above solution, although it works fine, is not very semantic.

<div class="background1"><address>Liberty High School<br />925 Jewetta Avenue<br />Bakersfield, California 93312<br />Phone: (661) 587-0925</address></div>

Why not use the Address tag and br's? Is the School name really a level 1 Heading for the page?

Link to comment
Share on other sites

He was looking for a way to change his styles. The Liberty high school was one style, and the next lines were different. My solution functions. The address tag, though it could be used would still have to make use of the span tag. The other solution with seperate <p> tags could also function. There is nothing wrong with either of them really. I don't see how either one is better than the other so long as it functions.However, I suppose ideally the address tag combined with the span tag would be best, as that is the least amount of styling that needs to be done. The h1 header is not wasted on the school's title and saves from making id's with your p elements.

Link to comment
Share on other sites

Now, in this solution, I assume that your use of </br> implies that you wish to have three lines for the school info, not just one long line with all three parts. If you would prefer to have just one line of info, just remove the extra <p> tags.So what is different?1. I clarified the Doctype. That's all the extra stuff at the top before the <title> tag. Your HTML will often display correctly without it, but this declaration tells the web browser which version of HTML or XHTML you are using to develop your site.2. I used an internal style sheet. I did this because it was easier to use.3. I moved your margin style to the .background1 class. So instead of the entire body having the margin, only the elements with that class have the margin.4. I changed your first <p> tag to an <h1> tag. Liberty High School is something you want to make larger than the other information, so it makes sense to create a heading instead of making a <p> tag with a modifying class name.5. In order to answer your original question, I styled .background1 p. This affects your paragraphs by removing the inherit margin from the top and the bottom. You can change the number of pixels (px) to get the exact spacing you desire.6. Headings have an inherit bottom margin. I styled the new <h1> tag to remove that margin. Like the .background p style, you can change the number of pixels to suit your spacing needs. If you want more room between the school name and the school info, margin-bottom would be the style that you would most likely modify.7. As I noted before the code, I assumed you wanted 3 lines of school info, so I made 3 paragraphs. If you wanted just one line, you could remove the extra <p> tags and all the information would go beneath the school name. Hope this helps.
On point 1, you always need a DOCTYPE. It does more than fix the IE bugs caused by quirks modes. Try to validate the page without it for one.On point 4, that isn't want you want. Never use <hx> tags for formatting. They have entire different purpose of defining the page.I didn't see the universal reset in your css. Always include * {padding:0; margin:0} at the top to reset all different browsers to a similar starting point.
Link to comment
Share on other sites

On 4. I was assuming that the school's name would function as a heading; an assumption I made based on his desire to make the words larger than the address. Should it just be a styled paragraph? I think that the school name should be some sort of heading, if not level 1 importance. Search engine optimization and all that jazz...........Good point on the universal reset.Use of an address tag would be appropriate as well.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...