Coding mishaps

I wasn’t surprised that one of my peskiest problems while building my website was the navigation bar. I felt confident at first, but of course my ideal navigation is a bit more advanced than what we have learned in class. I wanted to have the Missourian logo on the left and align the other links on the right side of the page. After the initial styling, this was the mess I made:

Navigation 1

After lots of trial and error, I decided to split the navigation bar into two parts: a basic image of the Missourian logo and a div with the list items. As you can see, I ran into some problems with overlapping text because the list items were too wide and there was not enough padding between the logo and the list. Additionally the navigation bar didn’t look like one cohesive element because the components were different heights.

After I added some padding to the right side of the logo, I was in better shape except that my floated elements were all over the place and my list items were still too wide.

Navigation 2

I managed to get that all worked out, but I still didn’t have the alignment I wanted. I decided to add a second div to my navigation bar to serve as a bumper of sorts. I placed it in between the logo and the list items. It doesn’t have any content except basic dimensions and a background color. This definitely feels like a hack, and there’s probably a better way to do it that would be more reliable, but so far it’s been working. If you know a better way though, I’m all ears.

Navigation 3
The final product
Advertisements

One thought on “Coding mishaps

  1. Hi Adrienne,

    Your nav bar looks great! I agree it has been one of the more challenging parts of the design. When in doubt, I wrap things in a div as well. Not sure if that’s correct, but it can make things work a lot better! Best of luck with the rest of your site, it looks great so far.

    Kerri

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s