Jump to content
Sign in to follow this  
gayatriom

Adding Padding to H2 stacks the H2 words instead of keeping them horizontal.

Recommended Posts

gayatriom

Adding Padding to H2 stacks the H2 words instead of keeping them horizontal. You can look at here to see what I'm talking about: http://esww-law.com/personal-injury/about-william-p-evans/ Ideally, I'd like the words- About William Evans to be next to one another - horizontally. However, once I added padding-right: 35.3em; it made the words stack. However, if I remove padding-right: 35.3em; then there is white space on the right side of the h2. Any thoughts? This is my H2 CSS: h2{padding-left:.9em;padding-right: 35.3em;padding-left;1em;padding-top:1em;padding-bottom:1em;margin-top:-.1em;margin-left:-.9em;margin-bottom:2em; color:white; font-size:18px;text-transform:uppercase;background: rgb(56,56,64); /* Old browsers */ background: -moz-linear-gradient(top, rgba(56,56,64,1) 0%, rgba(56,56,64,1) 29%, rgba(40,40,51,1) 92%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,56,64,1)), color-stop(29%,rgba(56,56,64,1)), color-stop(92%,rgba(40,40,51,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(56,56,64,1) 0%,rgba(56,56,64,1) 29%,rgba(40,40,51,1) 92%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(56,56,64,1) 0%,rgba(56,56,64,1) 29%,rgba(40,40,51,1) 92%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(56,56,64,1) 0%,rgba(56,56,64,1) 29%,rgba(40,40,51,1) 92%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383840', endColorstr='#282833',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(56,56,64,1) 0%,rgba(56,56,64,1) 29%,rgba(40,40,51,1) 92%); /* W3C */} #page-main{z-index:0;}

Share this post


Link to post
Share on other sites
catrina
I don't think right padding is necessary if there is just empty space on the right side of the heading... unless you have other headings with more words to fill in the empty space. Can you remove it so that the text is horizontal again?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
gayatriom
Well, when I remove it, then the white space looks odd. If you look in firebug, then you'll see what I mean.

Share this post


Link to post
Share on other sites
Rob
Try this: [code]h2 { background: -moz-linear-gradient(center top , #383840 0%, #383840 29%, #282833 92%) repeat scroll 0 0 transparent; color: white; font-size: 22px; font-variant: small-caps; margin-bottom: 2em; margin-left: -0.7em; margin-top: -0.1em; padding: 1em 0.5em 1em 0.9em; width: 100%; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gayatriom
Hey! I tried this, but the background didn't show up at all. But don't worry about it, I just gave up on fixing it. We can close this.

Share this post


Link to post
Share on other sites
Danny
Hi, The code above should work but if you're using a different browser to Firefox thats the reason for the background not showing. I can see from your site you have used a gradient background generator, so as a test to see if the code works, try the code below. There will be no gradient only a solid background color but as I said its a test and lets see if it displays how you want it too first then we can add the gradient later. [code] h2 { background: #FF0000; color: white; font-size: 22px; font-variant: small-caps; margin-bottom: 2em; margin-left: -0.7em; margin-top: -0.1em; padding: 1em 0.5em 1em 0.9em; width: 100%; } [/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×