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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    two different placements for h1 tagline

    Hi, please see url: http://freedom.backstageweb.net/features/

    Note the placement of the tagline under the logo (small office practice management and ehr) - this is where it should be.

    Now click on the logo to go to the homepage. The placement of the tagline is higher and is cut off at the bottom. I want it even across all pages. What is wrong here?

    Code:
    .logo-image #header-left #tagline {
        color: #0092D6;
        display: block;
        font-family: "Times New Roman",Times,serif;
        font-size: 21pt;
        font-style: italic;
        font-weight: normal;
        letter-spacing: -0.5px;
        margin-top: 37px;
        padding-left: 30px;
        position: absolute;
        text-indent: 0;
        text-shadow: 1px 1px 3px #B3BEC9;
        z-index: 101;
    }
    Thanks,

    John

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello johndove,
    The one that works the way you like is <p id="tagline">
    The one that is too close to the logo is <h1 id="tagline">

    Since that is really a heading it should be enclosed in heading tags, like the second example. Once you get all your pages #header-wrap the same you can style that h1 so it appears the same every time.



    ...oops, forgot the most important part.
    This is the main difference between the two, your paragraph tagged tagline gets this where your h1 tagline does not -
    Code:
    p {
        line-height: 155%;
        margin: 15px 0;
    }
    Last edited by Excavator; 02-11-2013 at 05:57 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Excavator,

    I see the difference you pointed out (the "p" and the "h1" ids) but I'm really working with a grandchild theme. (Cataylst is the parent theme, Dynamik is the child theme and my custom.css file (I suppose) would be the grandchild theme. Since I'm already working two tiers removed, I don't know how to remove the <p id="title"> and wrap it in h1#tagline without manipulating the parent theme (sorry, I don't know exactly how to ask this question, I hope you know what I mean).

    As a more immediate (but not proper, I don't think) solution, if I just comment out the /*line-height:155%;*/, then the #tagline style is the same for both and I can adjust the top margin. ...is this what I should do? (it works, I just don't think it's the right way to go).

    Thanks,

    John

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    If it works for you... as long as losing the 155% line-height doesn't mess up your paragraph tags somewhere else in the document.

    It is not semantic. Neither your #title or your #tagline are paragraphs.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove (02-11-2013)


  •  

    Posting Permissions

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