Build Your Own Business Website header image

Troubleshoot Unordered List Style Navigation

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member is trying to format 2 types of navigation menus.  The first is created by means of an unordered list.  The second is created with image links.  We look at the css code used to create the navigation menu and tweak it to center the menu in the available space.  We also tweak the css for the image links.  We discuss ways of assigning classes to navigation elements.

Video Transcript

You posted a question here. You’d like to better understand the structure of how I can make div tag and instead of LI type items that show on my page using Is that right?

Yeah. Move that over to

Oh, okay. You’re going to need to spell that for me then.


There we go.

So where is an example of your LI items that you want to create?

Well, I was trying to better understand how I could create that header across the top which I accomplished with your help. People on the call don’t know that but you were a fantastic help in getting the list and you gave me some time on the phone and Skype. So now I have the header going straight across. It’s a 4-part header. Each of those is a separate clickable link which is set up at an LI type of order. And then just above that is the subscribe Facebook Follow Me LinkedIn. I was able to do some research on the web and look at some other sites and kind of grab what they did and do it and accomplished it but you know, I copy pasted not even knowing what I was doing.

Sure. So an LI…I mean, what this…let’s just take a look at what this is. Inspect the element. Yeah, okay. So you’ve got… you’ve created a UL which is an unordered list and each unordered list has a list item or an LI item and that is standard navigation methodology. So you know, a traditional list item is listed top to bottom, right? So if we came over here…oops, pardon me. List items are used for lots of different things but in for example, on this site, these are list items, right? Each one of these category listings is a list item so this is an unordered list with individual elements… items under it. That’s the same thing as this is. That’s… a practical standpoint… well, from a practical standpoint, that’s what these are, right? These are LI items in a list, these are LI items…

You use CSS and you use the in line feature to make it string out? Is that the deal?

Yes so if you… well see, you have a couple of things going on. One is that if you’re going to create a navigation menu out of LI items, you need to tell the navigation menu that you want it to run horizontally, rather than vertically. I mean, at least in this case. And then in your case, you also wanted to add those images, right? So right here, you wanted to add these images as elements of the LI. And so… I’m trying to…I mean, it’s actually a relatively simple concept, really. You have just an unordered list with list items. Those list items, in this case, are links, right? They’re HTML links and here, they are image links. So you’d have an LI tag and then you have the a tag and then oh, they are not image links. I see. In this case, that’s actually a background image then. Is that right? This is a background…

Those are supposed to be…

Oh pardon me. I’m looking at the wrong thing. I was looking at the upper one.

Right. The ones above are supposed to be themes.

Yeah. So are supposed to be what?

Those are supposed to be themes to subscribe Facebook, Follow Me, Twitter…

Right Thieves?1039481-3014

You know, hot links to those.

Right. So in this case though, what you have is…oh. These are not LI items. These are just image links sitting side by side. I’ve forgotten that.

Yeah. That’s not what I was talking about.

So with the image links sitting side by side, actually, the behavior is going to be quite similar though because you ended up needing to tell this style of image that it would float left and that it would have a little bit of margin in between. And that’s how these things got to be side by side. It’s the same thing is true with this. This got to be side by side because you took each list item and you said that this list item, these LI items, need to float left and when they floated left, they no longer go up and down. And now, they go across because this one goes as far left as it possibly can and then this one pops up beside it. It goes as far left as it possibly can and so on and so forth. And so you created this sideways list by floating the LI items to the left and we take a look at your CSS that you used, let’s see, what is that? Inspect the element, that is my custom links. Oh I see. Maybe you didn’t do that. Custom CSS, custom header link… my custom links right here. My custom links LI position relative. Okay, so…okay, that’s the other method of doing it right. You used display in line and position relative. If you have taken out display in line, they would have stacked on top of each other, right?

How could I space those across the middle in the top? I’d like those to be centered.

Okay, well the way to do that… we’ll try one way first and that’s to start off with the UL my custom links. And so… is that an id or is that a class? That’s an id. So my custom links UL, actually, it’s the other way around. It’s UL my custom… oops. It is UL my custom links and then 1, 2, 3. And then you could do margin left:auto; and then margin right:auto; Did that work? That did not work. Let’s see, where are we? My custom links… oh, it’s because you’ve got margin someplace else. So if we kill that margin… no, I didn’t solve it either. My custom links… this should LI. That should be LI. And now you have… now this margin is really affecting the LI items and then the UL my custom links… you know, sometimes this margin left:auto thing does not work for menus. For example, you can’t make margin left:auto margin right:auto work on the Thesis nav menu and in that case, then all I do is I just add up margin to it until it looks like it’s centered. So margin left you know, 200 pixels or 300 pixels or whatever right, until I’m happy with it to make it centered. You know, often though this whole… the margin left: auto left and right, often does work for centering elements like for example, if you took an image and said margin left:auto margin right:auto, it would center it between the left and the right space. So… but in this case, if you just add…

Will that work for the header image?

Which header image?

I feel like the website is a little bit out of whack. If you look at it on a full screen, I guess it’s not too bad. I’ve even it out a little bit because I reduced the size of the columns but previously before the call today, I felt like it was offset to the left a little bit too much over the content body. It seemed like the image was too far left for the whole header.

I see. Actually, you’re right. The header is off to the left and what I would do in that case is I would add some padding to this. So you’ve got my custom links, you’ve got your header and then you’ve got this div and back to a… you know, I would add… well, you could add just a little bit of padding to the header. And so CSS, edit CSS, custom CSS and then where is that? Custom header link is below this line. Okay, well I don’t see your custom header in here but anyway, if we just say .custom #header…

I think it’s under .custom #header img. It’s about 2/3 of the way down that custom css list.

Yeah, well we need to respond only to the header and not to the header.img. So if we do padding left: 20 px. So what just happened is the..well, let’s see… I’m going to stretch this out at the moment. What just happened is that 20 px moved it too far and so it wouldn’t work. Let’s see… if we go to page… page header. That’s interesting because padding left still doesn’t look right. 15 px. Yeah, you know what, I bet that the problem…okay so instead of that, I think what we did was we put margin on the right hand side but if we put margin on the left instead… so you got margin right 16… if we just made that margin left 16, that would push it over and it looks a little bit… if you made it 14, you know, that looks a little bit more even. An alternative is to put this image in its own class rather than just having just an a, it would be a class left image and then you would specify an entirely separate margin for the left side of this image than you would for the rest. And often you know, when you are working…

If we change the margin from right to left and then 14 makes it bounce out a little bit better, at least for a short term answer.

Yeah, the short term answer is knock the margin down a bit so these images appear more centered in the space, right?

Got it. Yeah, I think since that search to try to get those pictures aligned up I’ve come a long way in my understanding of those. That lies in the UL links and the you know, using the… I used the CSS code to put them in line so they would you know, horizontally.

Well you often need to either take the first element or the last element and have a special class for that. For example, here you can see there’s no side line on this but there is on the back side of Flickr. Now, ordinarily what you would do then is you would take this LI item and you would give it its own class so that you could specify a left and a right border for that one. So you’ve got UL id my custom links and then this LI would be class you know, left link. And then class… these all have the you know, the border to the right but this one will have the border on the left and the right, for example. Although I see…

Yeah you know, actually, I’m sorry. You’re actually using a real character for this. You’re using a… you used your bar right there.

Right. I was just using a hash mark.

Yeah you could just as easily add that hash mark right here then you know, and it would do the same thing.

Right. In front of the a? Before the href?



Or you could create its own LI item and put it in between the 2 LI items. This isn’t how I would do that. I would… if you’ll look at… this is a site that I’ve been working on this weekend. That’s what these little lines are in between these. And each of those lines are created by a border, a side border. So in this case the…oh, let’s see… custom CSS. If you look at the navigation, custom menu, LI… you can see right here, menu LI .tab because this is a Thesis menu. Menu LI .tab has the border right solid 1 pixel and that’s what creates that line. That’s what I would do instead of what you’ve done here which is actually physically put, mark in that space.

Yeah so that…


Great, thank you. That answers mine.

Okay, you’re welcome.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one