#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    15
    Rep Power
    0

    Alignment Issues


    http://www.obanwinterfest.co.uk/Cottage/

    CSS is here: http://obanwinterfest.co.uk/Cottage/Includes/Styles.css

    Thank you very much for your help previously, but now I am having 2 issues here that I cannot fathom.

    1. I cannot for the life of me remove the gap between the image rotation and the navigation bar.

    2. I can't get the navigation bar to centralise in line with the rest of the divs.

    Thanks Again

    Cakeface
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    17
    Rep Power
    0
    you need to change the width a little bit on the <nav> but you just need to change the margins.

    I have this:

    nav {
    margin-bottom: -5px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    All you need to align your nav in the middle of the page is

    Code:
    nav {
      width: 933px;
      margin: 0 auto;
    }
    However, rather than repeating the width and margins for each div / area of content, why not set it once in a wrapper div and place your head, nav, footer etc divs inside the wrapper.

    I have also noticed that you have your #top div declared twice in your stylesheet which needs rectifying (lines 116 and 175).

    With regard to the gap, change your nav ul to

    Code:
    nav ul {
      margin: 0;
      background: linear-gradient(top, #308014 0%, #556B2F   100%);
      background: -moz-linear-gradient(top, #308014 0%, #556B2F 100%);
      background: -webkit-linear-gradient(top, #308014 0%, #556B2F 100%);
      background-color: #308014;
      box-shadow: 0px 4px 9px rgba(0,0,0,0.15);
    }
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Originally Posted by simplypixie
    I have also noticed that you have your #top div declared twice in your stylesheet which needs rectifying (lines 116 and 175).
    "Needs rectifying"? Isn't that stating it overly strongly? It's perfectly valid, but having a single rule would be tidier.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo