Alignment Issues

Dev Shed Forums Sponsor:

January 29th, 2013, 06:11 PM

Cakeface

Registered User

Join Date: Aug 2010

Posts: 14

Time spent in forums: 2 h 54 m 24 sec
Reputation 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

January 29th, 2013, 06:26 PM

MattMan730

Registered User

Join Date: Jul 2011

Posts: 16

Time spent in forums: 3 h 28 m 33 sec
Reputation 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;
}

January 30th, 2013, 08:53 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

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);
}

January 31st, 2013, 12:06 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 9 m 15 sec
Reputation Power: 4192

Quote:

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. I'm available for hire at Dynamic Site Solutions.

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).

Developer Shed Advertisers and Affiliates