Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Apply in-post CSS? Make it something other than a p class = ?

    I hope y'all will forgive me for posting a link to the page on my Blogger blog that I'm working on - I have to in order to ask my question. But first! - please be aware that I have a big yellow block of AdSense on this page, and you can't help but see it if you visit my page. It's meant for the rest of the world - not for the good people here. I don't want to take it down simply to ask my question here, because somebody in Timbuktu might be surfing around and see something interesting.

    Page I'm working on =
    Mother Daily
    (may change in appearance as I'm working on it at this moment)

    I have this in my template (little blue text - p.lilblu):

    Code:
    p.lilblu {
     font-size: small;
     font-family: Tahoma, Geneva, sans-serif;
     color: #006699;
     background-color: transparent;
     text-align: left;
      font-weight: normal;
    }
    html in post looks like this:
    Code:
    <p class="lilblu">
    (Schedule of how/when to attend to Mother - because I work on my blog at look after her at the same time.  Putting this here helps me keep up with everything.)</p>
    6:00 am - Thyroid pill
    6:30 am - Walk Buddy (dog) <p class="lilblu">
    she'll drive me nuts until I do, and going out in her pen isn't enough.</p>
    8:00 am - Start breakfast
    8-8:30 am - Alprazolam
    9-9:30 am - Lisinopril, Amlodipine, Propranolol, Aspirin
    10-10:30 am - Caltrate, Vitamin D
    12:30 pm - Start some kind of lunch
    more to come
    PROBLEM
    I think making this a ... paragraph tag? ... is causing the "she'll drive me nuts ..." line to start a new paragraph. (duh?)

    How can I redo this? And can I make it something short - like simply
    Code:
    <h9> stuff in here, inside the post </h9>
    instead of having to type out a class name, etc.? BTW - I've tried defining a h9 in my template, but it didn't do what I wanted it to.

    Complete novice here - feeling my way around like a blind person. I appreciate any and all help.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Only h1 through h6 are valid html headings, so I doubt a browser would pick up CSS rules for that h9 tag you tried. If you want to avoid a line break with your current setup (using the paragraph tag) then simply add display:inline; to the style list of the special class. But be aware that this would be non-semantic use of a paragraph.

    Technically, you should probably be using a span element to wrap that bit if you just want to style a particular stretch of text. Depending on how your page is structured and what else you have in style lists for span tags, you might well still need to have a class name added to the span. But this will solve your issue of an unintentional line break and it will also keep your HTML markup semantic.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    JustS (02-21-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much for your time and thoughtful reply :-)
    Changing the css didn't help, but I think my problem is not knowing how to override Blogger's preformat. Gonna try putting the stuff in a table, but not gonna fool with it much longer.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well no, now it wouldn't work. You have added a <dir> tag around your text which is also a block-level element (as opposed to an inline element). In addition, you have a <br /> tag in the mix now, too. These are both going to cause your small text to be on a separate line from the rest of the text. You would have to remove the <br /> tag and give the <dir> tag a style of display:inline;. Then, you'll notice the default padding that a <dir> tag carries with it which would cause your small text to be pushed off to the right rather than sitting right next to the big text. You will need to adjust for that, too if you intend to use the <dir> tag (which you shouldn't do, but techincally you can if you really want to).

    But in general you are going to have a hard time wrestling your CSS into submission when you have invalid HTML markup:

    http://validator.w3.org/check?uri=ht...ss=1&verbose=1

    Currently there are 352 errors and 88 warnings. That's not as bad as it sounds, though. A lot of those listed errors are duplicate errors with the same piece of code. But taken as a whole, those errors are going to cause problems with your layout.

    If you're serious about fixing the layout then let's start right there. It won't be hard to do but you will have to pay attention to what you are doing. Take a look at the validator results I linked to and start fixing those items one-by-one. Post any specific items you aren't able to figure out how to fix. Once the HTML is clean we can fine-tune the CSS.

    Otherwise, you'll just be wasting a lot of time trying to get things to play nicely.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Goodness! Again, I appreciate your time - I know there are better things you could be doing.

    I can't find the time to mess with it now. (Searching for good content, writing, rewriting, etc. Just getting started trying to promote this thing on FB, Twitter, - all of them. Got emails, etc., coming out the ying-yang - got to keep up those all important contacts, etc., because this blog is my job now)

    I'm gonna copy what you've said onto my template notes for when I get a break. For now, just gonna add more stuff to the current (as of 12/21/12 10:36am central) table.

    Hugs and kisses :-)


  •  

    Posting Permissions

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