Padding Somewhere Cant Find

HTML & CSS
1

Hi Guys,

Having some issues trying to find where this padding is in my sliderwrapper div.

Here is the page…

http://superiorcrossfit.com/2014

You will see between the navigation and the image there is some padding of some sort how can I get rid of the so the image touches the bottom of the navigation bar.

As well there is padding on the bottom of this sliderwrapper div as I want the picture to touch the light grey body bg on the bottom with the white maincontent overlapping. I got the overlapping content working correctly but again between the light grey and the image there is some padding.

Also, why is my headerwrapper / navigation background not white like should be it doesnt show up just shows the body bg color.

Thanks,

Mike

2

A concise 3 parter. :slight_smile:

(1) in what browser do you see the “padding”? The top of the large image touches the bottom of the nav menu in FF for me.

(2) I’m not sure what you are describing here. Again, I don’t see any stray space. Maybe a screen shot would help.

(3) A test question: What does one do to the parent container that contains floats to “contain” those floats?

3

Hey ronpat,

I solved the padding issue sorry didnt get a chance to post before I was on the bus home so that solves 1 and 2.

Not sure what you mean by the third one is that in regards to the navigation? I tried doing a overflow: hidden; which didnt seem to work heres screenshot of what I mean, you will see the grey body behind it, when I want it to be white across should I wrap the header in a div 100% width and give it background white.

4

Where did you apply {overflow:hidden} ?

I applied it to the <header> tag
styles.css (line 267)


header {
    background: none repeat scroll 0 0 #fff;
    clear: both;
    font-size: 0.8125em;
    height: auto;
    margin: -0.85% auto 0;
    max-width: 92.3em;
    [color=blue]overflow: hidden;[/color]
    padding: 0;
    position: relative;
    width: 85%;
    z-index: 999;
}

but that chops the left end of the logo a bit and there is some white space to the right of the “contact us” button.

There is some code in .header that I can’t quite figure out:
styles.css (line 281)


.logo {
    background: none repeat scroll 0 0 rgb(113, 20, 113);
    display: inline-block;
    height: 81px;
    [color=red]margin-left: -1.8% !important;
    padding-left: 1.8%;[/color]
    position: relative;
}

If deleted, the left end of the logo is restored.
But there is still that pesky white space at the right end of the buttons. If that’s your design intent, then we’re done.

If it’s not, lets go back to the <header> tag and delete the background:
styles.css (line 267)


header {
    [color=red]background: none repeat scroll 0 0 #fff;[/color]
    clear: both;
    font-size: 0.8125em;
    height: auto;
    margin: -0.85% auto 0;
    max-width: 92.3em;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 85%;
    z-index: 999;
}

and let’s go to the li and add a background to the list items:
style.css (line 321)


.nav ul li {
    [color=blue]background: none repeat scroll 0 0 #fff;[/color]
    border-right: 1px solid rgba(0, 0, 0, 0.6);
    display: block;
    float: left;
    font-size: 0.85em;
    font-weight: 400;
    height: 100%;
    padding: 0 1.8%;
    text-transform: uppercase;
}

As best I can tell, that should do it (in FF, anyway).

5

Thanks ronpat,

Getting closer I was hoping the white to go all the way across I’m guessing that I have to wrap the <header> tag in some type of wrapper that is 100% with a white background to achieve what I’m looking for correct?

Also adding the white background to the li seemed to on the dropdown menu for About Us add padding there as well.

Thanks,

Mike

6

It now sounds like you want the white area to fill the entire width of the browser window around the nav menu.

To do that, you can delete the background:#fff from the <li>s.

You will need to remove the <header> code from #wrapper and put in it’s own wrapper above #wrapper, then you can apply background:#fff to the new wrapper. An ordinary <div> with a white background should do the trick. I don’t understand why you have added width:100% to #wrapper since block objects naturally fit the full available width.

[ot]

This is a joke, right?[/ot]

7