...

View Full Version : css/html text positioning



bingazoo
02-21-2011, 10:30 AM
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!

abduraooft
02-21-2011, 10:51 AM
Can we have a link to your page?

bingazoo
02-22-2011, 10:59 PM
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!

abduraooft
02-23-2011, 08:43 AM
To vertically align the title text, try
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;
}

bingazoo
03-02-2011, 01:50 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum