RMC: The Navigation Part 2

Here’s the part of the design I’m most sketchy about. You see, I usually just reuse an old version of my first image sprite navigation. To learn image sprites, I used this tutorial originally. I’ll try my best to explain it here though. To start with, we have to lay the foundation for the whole shebang.

Here’s where we left off as far as the website goes.

This is where we left our navigation buttons. Now it’s time to put the two together. Trust me, once this part is done, you’ll be so happy with the results!

Okay, here’s our index.php file that we’ve been working on. Added to the file is now the coding for an unordered list. This is basically the nuts and bolts for a bulleted list. The tag < li > is actually a “list item”. I’ve named them all with id selectors because we’re only using these particular ones once and we’re going to need them declared for the image sprite coding.

This is what that coding will do to your website. Do you see the blank bullets? Look at the bottom of the page where the default TNG coding is still present. I don’t have words next to mine because I have no text between my < a > and < /a >. We’re going to do something a little cooler for our links.

Here is the mytngstyle.css file. I collapsed my other coding section so they won’t get confused with what I’m working on now. Notice how I’ve added a note for myself about beginning and ending image sprite navigation. I do this so I know that this is my navigation buttons. Sometimes when you go back to alter things months or even years later, you forget what things are. So I don’t mess with something as important as my navigation, I make sure I know this is a don’t touch unless you mean to area.

Usually I like to break up my CSS coding like you saw in the previous tutorial, but because of the number of lines of code I’d have for the image sprite, I go ahead and keep this one a little more compact.

We start out with the position:relative tag. We’re doing this to establish a base for the more exact coding coming up in the next two lines.

navbuttons; margin and padding. If you’ve ever used tables before the padding section will be a little familiar. Basically what these two things are saying is that we don’t want any margin or padding added to our list. We want them to be right up against the edge of our container div.

If I said I wanted a 4 pixel padding, then then the list would start at the edge of the grid (or container div), but it wouldn’t put any text or images within that 4 pixel padding. If I were to say I wanted a 4 pixel margin, then the container div wouldn’t start until the 4 pixel margin had been applied. So in order to make sure my stuff is starting right against the edge, I set both these options to 0 pixels.

position:absolute. Now I’m going to start position my buttons, so I want to put definitive coordinates onto my list items. So I set position to absolute. Setting it to absolute means I need to give the coding some kind of coordinate to navigate to. So I set my top coordinate as 180 pixels. This is the height of my header image. I want my buttons to be directly underneath that. The width of 140 pixels and height of 27 pixels are simply the size of an individual button.

You’ll notice that the next line is for li and li a. This means I’m setting specific instructions for list items and links within list items.

I’m the first to admit I don’t always know everything. So I’ll use the example below to show you my process on getting the buttons to display the way I wanted them to. Logically because I want my links to be side by side, I should have been able to use inline links. However, I have no text set for my links, so that doesn’t work. So I set my links to inline-block, and they display, but with too many spaces between them. Therefore I ended with just using the block and float actions together and voila.

I jumped ahead a bit, only because I had to have the images displaying to show you WHY I had to go with a block and float tag instead of just an inline tag.

It’s confusing, I know. Now you know why I just copy my already working version and change where needed.

Now we’re moving onto the actual buttons. Each line is setting something different. The 1st line saying that my left positioning is set to 0 pixels and a width of 140 pixels. The second line sets a background image (my button) also with positioning set to 0 and 0. This coding will tell the website to display a 140 by 27 pixel box starting at the 0,0 coordinates of the button image. The third line is doing the same thing as the second, except it’s using a hover command to tell the code that we want to do something a little different when the mouse hovers over the link. You’ll notice the difference being -27 pixels. This is what is telling the code that we’re now reading the bottom button instead of the top.

Ruh Roh. When I uploaded to make sure that we were moving along nicely, we hit a speed bump. The little buffer at the top of my page is making my 180 pixel top margin a little off. I apologize in advance to my childhood math teachers. I promise I do know how to do math, it’s just that it gives me a headache when I’m sewing, couponing, and designing websites… Oh. Anyway, instead of trying to figure out how I need to adjust my pixels, I just decide to modify a little code and my image a bit.

I added a margin-top command to the body tag. This tells the code that I want no buffer at the top. I want it to be right at the very top of the page.

The second thing I changed was I took all the white space out of my buttons. I thought this might make it easier to get the buttons lined up. You don’t have to do that, you just might have to mess with your numbers a wee bit. To take out my white space, all I did was create a new image that was just big enough for the buttons. Then I opened my .psd file and flattened it before I copied the buttons and pasted them in the new image. It just took a few extra minutes!

I did promise I would change things as I went didn’t I?!

Much better! Our stuff is running over the default TNG text a little bit, but since I’ll be changing that, we won’t worry about that for now! The next step is to plug in all the other buttons coding into the .css file.

So we move on down the code, changing the id selector and adding 140 pixels to the coordinates each time we add a new one. This is basically telling the code which button goes to which link.

Here is what we’ve created today! My mouse is hovering over the Mays button to show what the hover effect looks like against the default buttons. I love the effect. It’s adding a little bit of interactivity without a ton of code which will make the page load slower.

Once I got that done, I started wondering what it would look like adding more color to my buttons, so I tried out having the hover buttons be purple. Again, I opened my PSD file and changed the gradient overlay to a purple gradient, flattened the image and copied the new layer onto my buttons image.

Then I changed it back because I didn’t like it. Though now I can definitely see changing color schemes maybe for a holiday theme. Not this year though, I have to stay on topic! ha!

That’s enough for today. Next we’ll finally set up our content sections and start customizing TNG! It takes awhile to get the nuts and bolts set up but at least we’re moving along!

Disclaimer: Again I have to say that I’m not an expert. It’s possible I have no idea what I’m talking about. Everything I know about CSS and HTML I’ve taught myself over the years on an as needed basis. Feel free to ask me questions and I’ll try my best to answer them. This series is my attempt at helping people to fully customize their TNG installations.

Previous Posts:

Leave a Reply Cancel reply