SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1st paragraph fine, following paragraphs have a margin (start after about 4 pixels)!?

    <p><div class="style1">Heading</div></p>
    <p><div class="richtext3">Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 </p>
    <p>Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 </p>
    <p>Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 </div></p>

    Why do the 2nd and 3rd paragraphs have margin spacing at the start of the paragraph. ie. they do not start in-line with the 1st paragraph!

    Matt.

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    That depends on your CSS. Do you have a link where we can check it?
    And why do you have divs inside the paragraphs?

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    because you are wrapping the div INSIDE a P

    Code:
    <div class="style1"><p>Heading</p></div>
    <div class="richtext3"><p>Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 </p>
    <p>Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 </p>
    <p>Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 </p></div>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SpikeZ,

    Yes - that works better. But how do I do different styling for the same single paragraph:

    This is a bold heading and this is not but is on the same line

    <div class="style1"><p>Heading</div>
    <div class="richtext3">Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 </p></div>

    THIS CODE DOES NOT WORK

    It is not just an issue of making it bold. That is why I am using CSS and not just <b> and </b> tags.

    Matt.

  5. #5
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    use <span> instead of <div>
    Code:
    <p><span>This is a bold heading</span> and this is not but is on the same line</p>

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use span, how does the CSS sheet know what style to use??

    Matt.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Actually, you don't need the DIV or span in your case. P is already a block element. Use a SPAN if you want part of the P to have a different style than the rest. you also have to make sure your code is clean you had a couple of unclosed tags... that WILL WRECK stuff.. just so you know.


    Code:
    <p  class="style1">Heading</p>
    <p clsss="richtext3">Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 </p>
    <p>Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 </p>
    <p>Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 </p>
    as far as spacing is concerned, am unclear what you want to happen...
    did you want all four P tagsl to be aligned horizontally? or just the last 3?

    or are the last 3 actually aligned horizontally, but the last two are a couple of px off?

    it would be good if you posted your css

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MatthewBOnline View Post
    <div class="style1">Heading</div>
    Use a heading tag - that's what they are there for. Don't absue divs or paragraphs just to make headings.Just add a class and style them as needed.

    Make sure you use the appropriate heading level though as they must make structural and logical sense. (e.g h1 is the main heading and then follows h2, he etc... read this.)

    Html is never about how it looks but what is says

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Paul beat me to it -- I was about to rage on you for that.

    Seriously, every time I see code like:

    <p><div class="style1">Heading</div></p>

    I have the overwhelming urge to pimp slap somebody Avery Brooks style... That's a H2 or H3's job... Likely the second paragraph has that div and class for nothing as well -- at the very LEAST the div for nothing.

    What is the CONTENT you are marking up? If we had an example of what it is you are actually working on, we could probably tell you what markup to use -- semantics is NOT just about slapping paragraphs around everything (much less div inside P, which is just FAIL). Once we knew what markup to use, THEN we could tell you how to style it.


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
  •