[Solved] Spacing problem with header

[snewman]

Hi All,

Here is my code: http://codepen.io/anon/pen/NqEBNa

I’m running into a slight problem. You can see that when you hover over “My Website” there is a small space at the bottow (about 4px). I’m not sure why the header is bigger than the contents. Any suggestions? Thanks in advance!

[Paulie_D]

It’s becuase the #header_box div isinline-blockso thewhite-space in the HTML add about 1 character’s space (about .25em) in there.

There are a number of techniques for eliminating it which you can research but just using block instead ofinline-block will fix it.

div#header_box {
  color: white;
  font-family: Montserrat;
  width: 60%;
  display: block;
  overflow: hidden;
}

[snewman]

Ok so now I have a new problem. When I make my header_box a block, it places everything I had in the header in the main box.

I redid the full code here: http://codepen.io/anon/pen/EjGZVO

See what happens when you make the #header_box into a block? How do I keep it at the top?

One more quick question, what would be the best way to evenly space out “Web Design, Photography, Resume”? I want to put spaces between each word but still have the whole thing centred.

Thanks!!!

[Paulie_D]

See what happens when you make the #header_box into a block? How do I keep it at the top?

You have to clear the floats….there are a number of “clearfix” techniques but a quick one is just to add overflow:hidden to the element.

One more quick question, what would be the best way to evenly space out “Web Design, Photography, Resume”?

That’s this

<h2 id="secondary_title">
<a href="">Web Design</a>
<a href="">Photography</a>
<a href="">Resume</a>
</h2>

An h2 is 100% wide by default so to center the text add text-align:center, which means you can remove that property from the links themselves.

Then make the links inline-block. You could add left/right margin to separate them but I prefer left/right padding to increase the hit target area..but that’s up to you.

#secondary_title {
text-align: center;
}

/* styling the secondary title */
#secondary_title a{
color: white;
font-size: 30px;
font-family: lobster;
text-decoration: none;
display: inline-block;
padding: 0 10px;
}

I’d also add a :hover state so users can see the interaction.

http://codepen.io/Paulie-D/pen/XboMKJ

[snewman]

Paulie, thanks so much for taking the time to help me with this. Honestly, I would have never figured that out. I heard of clearing floats before but that never occurred to me. Thanks!!!

[Author]

Posts