Basic CSS: Styling a header navigation

HTML & CSS
1

Hi, I’m super new to web design, and so far have been enjoying the process of learning how to code HTML/CSS. I’m attempting to build my first web site, and I wanted to bounce ideas off of guys like you who have experience, so here goes:

Code pen: http://cdpn.io/fmbDA

Basically I want to do a few things in this nav.

  1. I want to display it inline, and as a block.
  2. I want the navigation to be centered.
  3. I want the :hover and :active pseudoclasses to turn blocks of navigation to gold.

Thanks in advance…

2

Something like this would do it:

nav ul {
  margin: 0; 
  padding: 0;
  text-align: center; 
  list-style: none;
}

nav ul li {
  display: inline-block; 
  padding: 10px;
}

nav a:hover, nav a.current {
  color: gold;
}

You would have to apply the .current class differently to each link on each page. There are more efficient/dynamic ways to do that, though. http://www.sitepoint.com/forums/showthread.php?842752-How-to-adjust-color-of-Active-Page-in-CSS&p=5091887

3

Thanks alot Ralph.

I’m trying to increase the block size of the navigation links, but I’m having trouble.

I’ve tried styling the nav li’s in order to increase the block size, but it’s not working (I also tried styling the nav ul li a’s):


nav ul li {
  	display: inline-block; 
  	padding: 10px;
  	width: 45px;
	height: 30px;
}

Here is the codepen: http://cdpn.io/HFIvs

TIA

4

It’s not advisable to set width and especially height on text elements, as it can lead to problems—such as when a user increases font sizes. So I’d suggest playing with the padding on the list items instead.

Anyhow, the reason why your width and height weren’t working is that the <a> element is “inline” by default, If you set them to diplay: block, those settings will work:

nav ul li a {
  text-decoration: none;
  color: white;
  width: 45px;
  height: 30px;
  [COLOR="#FF0000"]display: block;[/COLOR]
}

A better option might be to keep the display: block, but remove the padding from the list items and instead use padding on the links to get the desired look. E.g.

nav ul li {
  display: inline-block; 
}

nav ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 10px 20px;
}
5

Thank you!

I’m now trying to add an image underneath the nav. It’s a little bit smaller than the width of the body, but I want to stretch it to the whole width of the body div. I’ve tried increasing the image width in css, but then the img stretches past the width of the body.

Here’s the codepen: http://cdpn.io/HFIvs

6

Nevermind. I was able to figure it out. It was buggy when I was using max-width, but regular width worked just fine when I set it to 100%.

7

Cool, glad you’ve got it sorted. Good luck with the rest of the site. :slight_smile:

8

Hey Ralph,

I’ve got one more question for you, if you have the time:

I stumbled across a bug where, when I try to format an article, it breaks the format, and the background color only covers half of the wrapper div.
Here is the codepen:

The problem comes when I add this little bit of CSS:

article#announcements {
	width: 40%;
	float: left;
}

Here is the resulting codepen:

9

Yeah, that’s very common. OK, so here’s a key layout lesson for you: if you have a container (like a div) and its contents are floated, the container won’t wrap around the contents. There’s a good reason for that, but in a case like this you want to force the container to wrap around the floats. There are various ways to do that, but the easiest is to add overflow: hidden; to the container. (Read more about this here: http://pageaffairs.com/notebook/containing-floats)

In your case, that’s a div with no class or id, so firstly, I recommend you apply a class to it so that you can easily apply styles to it. E.g. in your HTML do this:

<div [COLOR="#FF0000"]class="wrap"[/COLOR]>
    <article id="blog">

and then in your CSS add this:

.wrap {
  background-color: #000;
  [COLOR="#FF0000"]overflow: hidden;[/COLOR]
}

I recommend you read a good book on HTML and CSS, as it’s better to be introduced to the basics and warned of the pitfalls, rather than stumbling along in the dark. Make sure you are using real HTML and not just stuff you’ve made up. There is no <content> element in HTML, so you will find that will fail in some browsers.

10

Thanks you so much, you are awesome.

11

Glad I could help. :slight_smile: