Grow your CSS skills. Land your dream job.

Div placement and animated NAV – CSS help!

  • # October 8, 2008 at 5:04 pm

    Hi guys and gals,
    I’m pretty new at web design and I have a question. I’m working on a site for a friend: Faulkner Ventures

    Here is the CSS

    I’m no where near done. In fact, I just started. If you look on the site, there is a div with a light grey background where I plan to place the NAV.

    My question is: is there a better way to place this div without having to use a negative value with the CSS? Or is it okay to do this?

    it works in FF3, Safari, and IE7. So, it looks fine, but I want to make sure that this is the right way of doing it.

    Another question: Is there a way to make an animated NAV with CSS like you can with Java Script (replace image, pre-load, etc.)? Any pros/cons?

    I hope I’m making sense… :?

    Any help is much appriciated!

    Thanks!

    # October 8, 2008 at 6:08 pm

    Considering you have a width assigned to #nav, I would add #nav{margin: 0 auto;} to center the item instead of doing the math. Add a relative position to it, and use top:whatever number; to move it down the page to whatever height you want.

    So, something like #nav {height:31px; width:381px; margin:0 auto; position:relative; top:-15px; background-color:#ccc; }

    Adding "position:relative;" will position the element in relation to it’s normal position. So, if you were to just add the div with nothing, it would appear in the top left corner of the screen. Adding "margin:0 auto;" will center the element, while "top:-15px;" will position the element 15px up from the bottom of #logo. Just experiment with the numbers a little and you’ll get the right position. If you were to use : "position:relative; top:0;" instead, it would position your #nav right at the bottom of #logo as opposed to being kind-of inside it.

    And for the menu, just Google horizontal CSS menus. You should be able to find everything you need.

    # October 8, 2008 at 6:33 pm

    Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".