SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with space between paragraphs

    I've just started using CSS and am having problems controling the spacing between paragraphs.

    Ours is a mostly text site with some paragraphs indented to indicate quotations (Scripture). I can use <br><br> to get extra space between paragraphs, but when I use </p> and <p> between paragraphs I get about 3 or 4 line spaces. It's too much! I want only 2 line spaces. I've tried re-setting the line-height either in P or in the classes, to no avail.

    I'm very new at site design so ANY help is appreciated!

    Thanks,
    Teresa

  2. #2
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting the margin of the <p> tag to something different using CSS. Remember, you only need to the top or bottom - if you do both, they'll probably be to close.

    So, it might look something like this:

    p { margin-top: 10px; }

    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Adam!

    I forgot to mention that I'd tried that, too. In fact, I just tried:

    p {margin-top: .1pt; margin-bottom: .1pt}

    It STILL puts in way too much space.

    Teresa

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It STILL puts in way too much space.
    You must be doing something wrong then. If you post some of your code (or provide a link) then we can see what you're doing wrong.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    The link is www.geocities.com/His_amazing_love/testhome.html

    Teresa :-)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Teresa,

    You have a lot of work to do to sort that page out I'm afraid .

    The reason that setting the margin on the <p> tag made no difference was because you have structured your document like this :

    p {margin: .1pt;}
    .tx {margin: 2em;}


    <p class="tx">


    The margin of the paragraph is overridden by the class tx and therefore anything you set on the p tag will not be used while it has a class of tx.

    Also margin:2em means put a 2em margin on the top,right,bottom and left. Which means you have a 2 em space between your paragraphs. If you want to set just the left and right margins you should use margin-left:2 em;margin-right:2em;. (To set top and bottom margins use margin-top:.5em;margin-bottom:.5em; There is a shorthand version which you can use which is margin:.5em 2em; The .5em refers to top and bottom margins and the 2em refers to left and right margins. ). I notice on some classes you have set a 4em margin which will make the situation twice as bad.

    You would be better of restructuring your document and using divs to enclose blocks of text and apply classes.

    e.g.

    <div class="tx">
    <p>this is some text<p>
    </div>

    Do not use break to create space all the time use the margin top or bottom property on the div or p to create the space you need. (The odd br or <p></p> won't do any harm but your page is full of breaks.

    Remember that classes you set on a div or a p will overide any specific styles you have set for that tag.

    Also make sure that your classes and attributes are enclosed with quotes as this may cause problems and anyway is good coding practice. You should also think about adding a doctype to the top of your page and also the character encoding in the meta tag. This will help the browser to interpret your page correctly and then you will also be able to run it through the w3c validator and check your errors. (You have 91 errors on that short page which need fixing. This includes missing end and start tags, invalid characters etc.)

    The basic doctype you could use is this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>His Amazing Love!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    If you run your page through the validator (after you've added a doctype and character encoding) it will highlight all the missing end and start tags for you (and everything else of course). This is a good way to learn and worth the effort.

    Sorry if this post is a bit long winded but there is no quick fix for your page. However if you follow the above advice you will learn to structure the document correctly and the errors should be easier to fix.

    If you get stuck with something specific then post your message and I'm sure someone will help.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Please don't feel bad about or being "long-winded." You gave me a lot of excellent information that was just what I needed.

    This is my first website. I've tried to find tutorials, but they all seem to assume you know the basics, as do the reference books that I have access to. Your comments supplied basic information I couldn't find anywhere else. Thanks for your patience in explaining it.

    After following your advice and running it through the validator, I have only one error which is "scrollbar-face-color is an invalid property." That isn't critical, but would be a nice feature. Any idea why that won't work?

    The new test page address is: http://www.geocities.com/his_amazing...ting/home.html

    With much gratitude,
    Teresa

  8. #8
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey Teresa - just a guess, but I'm thinking you need a BODY tag for that to refer to

    a couple of other errors I found in a code check:

    As mentioned earlier, you are now a newborn infant in the eternal family of God. An infant's main food is milk; <span class="sci">"the Word of God is pure spiritual milk."</span> <span clas="ref">(1 Peter 2:2)</span><p>

    <div class="sc">"That if you confess <span color=gray>(acknowledge/say)</span> <u>with your mouth</u>, 'Jesus is Lord,' and <u>believe in your heart</u> that God raised him from the dead, you will be saved. For it is <u>with your heart</u> that you believe and are justified, and it is <u>with your mouth</u> that you confess and are saved."<span class="ref"> (Romans 10:9-10)</span></div>

    I don't think COLOR is a valid attribute for SPAN

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks MMI!

    I do have a body tag, though:

    body {
    background-color: #EFEBE7;
    margin-top: .35in;
    margin-right: .25in;
    scrollbar-face-color:#a52a2a
    }

    Thanks for catching those errors, too! What do you use to check your code with?

    Sincere thanks to ALL who have helped!
    Teresa

    PS I launched the page so if anyone wants to look at it again, it's at www.geocities.com/his_amazing_love.

  10. #10
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    happy to offer mmy limited assistance, Teresa - that's what this place is all about

    you have a BODY reference in yer style sheet, but then you never open it - you want it in here:

    </head>

    <body>

    <table>

    fwiw, I can't understand how the doc even displays without it, but I'm an amateur coder, so ...

    there are a number of sites that allow you to run code - e.g., http://validator.w3.org/

  11. #11
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since we are in the process of teaching you how to make the full use of HTML and CSS, here are a few other pointers

    Code:
    <META NAME="keywords" CONTENT=" Jesus, Christ, God, free, gift, death, sin, Eternal, 
    Life, love, joy, peace, Heaven, Hell, Philip, Sarah, Omana, Ajith, Teresa, Bible, ifmi, John 3:5, 
    Rom. 10:9, Romans, Fire, Son, Christian, True, Thiruvalla, Kerala, India, salvation, saved, born again, believer, 
    Holy Spirit, Scripture, priest, prayer, Lord, blood, repentance, everlasting, grace, baptism, catholic, good works">
    Too many keywords. They work on percentages, so keeping it to about eight or ten gives you better results in search engines that use them.

    Make all your tags (html and css) lowercase. Scripting tags, like java, use both, so don't change them, or the scripts might not work any more.

    Use an external stylesheet instead. Make a file called style.css (or anything else with .css) and put it in the same folder as the rest of the files (or make a special css folder) and then place this on your head-tag:
    Code:
    <link rel="StyleSheet" href="style.css" type="text/css" media="screen">
    This means you can make your files smaller and more efficient, and you can just change the look of the site from ONE file. Take what you have between the <style>-tags and cut and paste it to the .css-file (make sure you remove the <style>-tags) and remove the style from the HTML-file, except for style that is specific for just the file it's in.

    Put your dominant font, colour, and size in the body style, and just the variations in different classes. Makes it easier for the browsers. Example... you have this:
    Code:
    body {
      background-color: #C4E1FF;
      margin-top: .35in;
      margin-right: .25in;
      scrollbar-face-color: #C4E1FF
    } 
    .pr {
      font-family:verdana, helvetica, arial, sans-serif; 
      font-weight:normal; 
      color:green; 
      font-size:small; 
      text-align:left; 
      margin-left: 2em; 
      margin-right: 2em; 
      line-height: 1.4}
    .pr2 {
      font-family:verdana, helvetica, arial, sans-serif; 
      font-weight:normal; 
      color:green; 
      font-size:x-small; 
      text-align:left; 
      margin-left: 2em; 
      margin-right: 2em; 
      line-height: 1.4}
    Make it like this instead:
    Code:
    body {
      background-color: #C4E1FF;
      margin-top: .35in;
      margin-right: .25in;
      scrollbar-face-color: #C4E1FF
      font-family:verdana, helvetica, arial, sans-serif;
      text-align:left;
      color:black;
    }
    .pr, .pr2 {font-weight:normal; 
      color:green; 
      font-size:small; 
      text-align:left; 
      margin-left: 2em; 
      margin-right: 2em; 
      line-height: 1.4em;
    }
    .pr2 {font-size:x-small;}
    In this, the overall text-colour is set to black in the body, the font-family is set as well, and the text-align too.
    Then the two classes .pr and .pr2 has some common style. pr2 has then the font-size set on it's own and that overrides the size set in the common style.
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have only one error which is "scrollbar-face-color is an invalid property." That isn't critical, but would be a nice feature. Any idea why that won't work?
    Hi Teresa,

    scrollbar face color is a proprietary IE tag (which means its specific to the IE browser and won't be displayed by other browsers) and as such is not valid code.

    It's safe to use but it just won't validate.

    Paul

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MMI: Yeah, I realized what you were saying later. I have a lot to learn, don't I?!? After you mentioned that I hadn't opened the BODY tag, I added that, but STILL can't get the colored scrollbars. Like you, I'm surprised that the other body attributes were functioning.

    ReptialianLizard: THANKS for all the instruction. Search engine tags have been a BIG concern, so that info is GREATLY appreciated. I probably won't convert to an external style sheet immediately, but since we are planning a lot of growth, it looks like a VERY good plan for the future.

    Paul: I added the DOCTYPE code you suggested above, but when I ran it through one of the other validators (not w3.org), it said that my document was NOT valid html 4.01 transitional. That one found some errors that w3.org didn't find. (It found a bunch of "fussy" stuff like special character coding, but it also found some REAL errors.) Do I have the right information there?

    THANKS again,
    Teresa

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Teresa,

    I couldn't access your page so I can't say what's going on, I'll try again later.

    The W3C validator (http://validator.w3.org/ ) is the one that you need to use as mentioned above). This is the only one that counts although other validators are useful for different things.

    Paul

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oooops! Turns out that the validator that said it wasn't valid html 4.0 transitional is http://validator.w3.org.

    Teresa

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Teresa,

    Yes there were loads of those errors when I first ran your site through the validator. I assume you've probably fixed a load of them with all the help you've got here but if you need any specific help just shout. (your site is still unavailable on the above link)

    Paul

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Were you using the NEW address? www.geocities.com/his_amazing_love

    There are still quite a few errors showing up, and SOME that probably need to be fixed. But most of them are SGML non-character notices (like apostrophes and quotation marks), many of the rest are from codes that were pasted from Bravnet for the email and guestbook forms. Also, there are some that are generated by geocities that I have no control over.

    Thanks much,
    Teresa

  18. #18
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is part of your site and it's code. I'll show you what is wrong with it. Add the green parts and remove the red.
    Code:
    <div class="tx"><span class="big"><p>
    <b>L</b></span>oving greetings to you in the most precious 
    <b>Name of Christ Jesus</b>, the Name above all names!<p></p> 
    
    <p>My dear Friend, have you ever wished for a <b>life full of peace, joy and love</b>? 
    Then please read through the following few lines....<p></p>
    
    <p>The Bible says...<p></p>
    
    <p>God created <span class="gray">(made)</span> man in His own image (from the dust of the earth). 
    Then God breathed life into his nostrils and he came to life. God named this first man Adam.<p></p>
    
    <p>God gave Adam a female support <span class="gray">(Eve)</span>. They lived in the Garden of Eden. 
    God told them that they may eat any fruit but <b>not</b> to eat fruits from one of the two trees 
    He specially created which were in the middle of the garden.  If they ate of it, they surely would die.<p></p>
    
    <p>But they ate that fruit which God forbid, and thus Adam and Eve sinned against God by <b>disobedience</b>. 
    Thus, their spirit, the life that God breathed into Adam, <u><b>died</b></u> (and they were driven out of the Garden of Eden).<p></p>
    
    <p>The Bible says...</p></div>
    As you can see the paragraph needs to start and end properly.
    I also think you're using the wrong ' like in God's and that is what is giving you so many errors.

    Try making your <html>-tag like this: <html lang="en">. That might help a bit with the coding of the page. If you need a special caracter you can always use its ascii number. If you can't find it, let me know.
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Following on from Reptillians post change your right quotation marks (if you must use them) to & # 8 2 1 7 ; (including the semi colan but no spaces between. I had to put space in otherwise they would display as quote marks and not the code) and change all your single right quote marks to & # 8 2 1 6 ; (Your characters could cause problems in some browsers.)

    (You can find a list of acceptable character codes here :http://www.w3schools.com/html/html_entitiesref.asp).

    In the javascript url's you can change the & to & a m p ; (again no spaces).

    This should fix about 50 of your errors (with any luck).

    There are a few missing tags and unclosed tags that need fixing. You will just have to make sure that they all match up. Also check you have the correct javascript code as your javascript is giving errors on page load. The last block of javascript on your page doesn't look correct. It has end object and layer tags in the first line but there are no opening tags for them. Should that bit of code have been included.

    That should keep you busy for a while

    Paul

  20. #20
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Teresa,
    You really should use the tag <blockquote> for your quotes instead of tags like <div class="sc">.

    the blockquote tag is appropiate in these cases and it is the semantically correct tag to use in these instances.

    Example:
    <blockquote>
    You have been <b>born anew</b>, not from perishable but from imperishable seed, through the living and abiding <b>word of God</b><blockquote>, <span class="ref">(1 Peter 1:23; Catholic Bishops' New American Bible).</span>

    The blockquote tag will also insert quotationmarks for you :-)

  21. #21
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again to all of you! I'll be working on those changes soon.

    I would like to invest in a good CCS book - something that includes the very basics (as you can all see that I haven't learned those yet), is easy to read and understand, but also something that would be an excellent reference for future use. Recommendations?

    Teresa

    PS Recommendations for online tutorials and references are welcome, too. However, I have a very slow connection speed, so having a book to use offline will be helpful.

  22. #22
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm confused.

    I tried using the <p> and </p> like Reptilian suggested, but the validator says:
    Line 165, column 38: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
    <div class="sml"><span class="home"><p>

    and then it tells me:
    Line 166, column 98: end tag for element "P" which is not open (explain...).
    ...>Return to Sarah's Home</a></span></p>

    (I did this in a test file, so it doesn't show up at the site right now.)
    The code it's referring to is:

    165: <div class="sml"><span class="home"><p>
    166: <a href="http://www.geocities.com/His_amazing_love/index.htm">Return to Sarah's Home</a></span></p>

    Help please!

    Teresa

  23. #23
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code is mixed up. An opening tag closer to the start of the page can trow it all off, if it isn't closed where it should be closed. I'm running it through HTMLTidy because it's a long file. I'll post the result.

    OK... Compare the new version and the error-file with the original file you have on the net. The table summary errors you can ignore, and the doctype error (not transitional) is a bug in the software.
    Last edited by reptilianfeline; May 9, 2003 at 00:09.
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  24. #24
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to attach the files to the previous post, but they don't show up. I'll try again.

    That's odd... why won't the attachment show up in the post? I can see it when I edit.
    Attached Files Attached Files
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  25. #25
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Colorado
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul: I think I've gotten the character errors fixed now - and the missing tags. I cannot access the javascript code. It is generated by the server.

    junjun: But won't using </blockquote> cause a line break and extra space? (I need the reference to stay with the quote.)

    Kitty: I ran some other files through the HTMLTidy link at w3.org. Is that what you're using? I could view the code they suggested, but I can't figure out how to get the error list you attached in the post above.

    Thanks!
    Teresa


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •