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 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css/html text positioning

    Hey all,

    Pretty much a newbie with the whole web design thing but slowly starting. I downloaded a template off the net and i've just been customizing all the images and some of the coding. Here's the code I have so far:

    CSS:
    .title {
    background:url(../images/bgTitle.png) no-repeat 0 0 #06475c;
    padding:12px 30px 8px 30px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    behavior:url(js/PIE.htc);
    position:relative;
    }
    .title .description {
    font-size:11px;
    color:#c0ff53;
    border-top:1px solid #43768b;
    background:url(../images/icon1.gif) no-repeat 0 8px;
    padding:4px 0 0 25px;
    }
    .title .description a {
    font-weight:bold;
    color:#c0ff53;
    }


    HTML:
    <div class="title">
    <h2>Welcome!</h2>
    </div>



    So I have an image that's acting as a background for a specific section where the title of the article goes but the word "Title" is a bit offset. It's higher then I would like it to be by a very small amount. Almost like it's not vertically centered. Can anyone direct me in the right way here because I've been trying for awhile to play with the coding and no matter what I do I can't seem to get the text "Title" to move in any way! Thanks all!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes no problem, here is the page I am currently working on: www.puppysmurf.ca

    You can see the Titles not exactly aligning to the center of the background image I have for it. Let me know what you think and thanks!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    To vertically align the title text, try
    Code:
    h2 {
        color: #D9FCF3;
        font-size: 30px;
        font-weight: normal;
        line-height: 2.2em;
        
    }
    .title {
    	background:url(../images/bgTitle.png) no-repeat 0 0 #06475c;
    	padding:0 30px 0 30px;
    	border-radius:6px;
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	behavior:url(js/PIE.htc);
    	position:relative;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what fixed my problem. I didn't change any of the coding in the .title section, I only played around with the coding in the h2:

    h2 {
    font-size:30px;
    line-height:1.2em;
    font-weight:normal;
    color:#d9fcf3;
    padding:5.5px 0 5.5px 0; }

    Thanks everyone for the help!


  •  

    Posting Permissions

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