Space between wrapper & footer

HTML & CSS
1

Hello,

Got two minor issues I’m having on this site I’m working for, here is the link…

http://184.154.234.20/~super079/

You will notice right before my footer and after my wrapper div, there is a space there. It wasn’t there until I put my footer text in there, how can I remove it so that the footer fits snug at the bottom of the wrapper.

My other issue is the h1 tags as I have a blackground behind white text which is working great except I do not want it to extend the whole width if the content div which it is doing so right now. I’d just like it to stop so about 50px after the last letter in each title, how can I achieve this?

Many thanks,

Mike

2

You’ve answered your question regarding the first issue yourself. :slight_smile:

Set your margin to 0 to override the user agent’s default CSS values.

.footer_text {
 font-size: 12px;
 color: #FFF;
 padding-top: 28px;
margin:0;
line-height: 14px;
}
  

h1 {
text-transform: uppercase;
    color: #FFF;
    background: #000;
    padding: 20px 50px 0 35px;
    padding-top: 20px;
    line-height: 16px;
    margin-right: 35px;
font: bold 24px 'Ubuntu Condensed', sans-serif;
display:inline;
}
3

Great thanks!

Ok so I fixed that and look great now how do I get my text to be right on the bottom of the black bg, so its like the white from the wrapper bleeds into spell the words if you know what I mean, basically so there is no black at the bottom of the text would be simple way to put it.

4

Is there a reason why you’ve wrapped your h1 around the anchor? It should be the other way round, e.g. <h1><a href=“”> rather than the reverse.

To position your anchor to have it touch the bottom of the h1, you can do something like this:

h1 {
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    background: #000;
    padding:20px 50px 0 35px;
    margin-right: 35px;
    font: bold 24px'Ubuntu Condensed', sans-serif;
        display:inline;
}

 h1 a:link, h1 a:visited {
        color:white;
        text-decoration:none;
        font-size:100%;
        padding:0;
        position:relative;
        bottom:-5px;
}

In your HTML you should have:


<h1><a href="#">My Heading</a></h1>
5

Thanks for that, fixed it. Now looks great on the h1 with anchors but if you go to this page it doesnt touch the bottom…

http://184.154.234.20/~super079/intro-to-crossfit/

Any easy way to just apply the style to h1’s across the site without doing it to the anchors as well separately?

Thanks

6

You can apply the same styling by wrapping the text into a span.

So

<h1><span>My Title</span></h1>

And then applying:

h1 span {
position:relative;
bottom:-5px;
}

That should do it.

7