Unable to match alignment - working with 2 CSS's

**Tezdread** · Oct 3, 2010 04:33

Hi all,

I've got this problem that I just can't figure out at all...

I've got this site that also connects to a (tumblr) blog which I've customised and I'm unable to get the navigation text to align on the blog & the main site.

I have totally removed the left margin\padding from the navigation in the blog's CSS but I just cant get the navigation links to move to the left?

The blog page is here

This is the CSS but the blog page has embedded CSS too

Code:

html,body{height:100%;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 900px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#title {
	width: 850px;
	margin-top: 19px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: #000066;
	font-weight: bold;
	text-align: left; /* for ie5.5/win */
}
#banner {
	width: 900px;

}
#navigation {
	background-image: url(../images/nav-bg.jpg);
	width: 900px;
	font-weight:bold;
	font-size:15px;
	background-repeat: no-repeat;
	margin-top: -1px;
	margin-bottom: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0;
	height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-top: 2px;
	padding-left: 0px;
	padding-bottom: 5px;
}
#navigation a {
	color: #FFFFFF;
}
#main_column{	
        position:relative;
	width:800px;
        margin-left:10px;
        margin-right:0px;
        margin-bottom:0px;
}
#bottombanner {
        background-image: url(../images/bottom-grass.jpg);
        background-position: top;
	height: 200px;
	background-repeat: no-repeat;

}

The home page is here This is how I want it to be on the blog page

This is the CSS

Code:

@charset "utf-8";
/* CSS Document */
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
body {overflow-y: scroll;}
#outer {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 900px;
    margin:auto;
    min-height:100%;
    margin-top:-123px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
#aouter {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 900px;
    margin:auto;
    min-height:100%;
    margin-top:-315px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
#douter {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 900px;
    margin:auto;
    min-height:100%;
    margin-top:-227px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
#louter {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 900px;
    margin:auto;
    min-height:100%;
    margin-top:-220px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
* html #outer {
    height:100%
}
h1 {	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: #000066;
	font-weight: bold;
}
#header {
    border-top:123px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#aheader {
    border-top:315px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#dheader {
    border-top:227px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#lheader {
    border-top:220px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#navigation {
	background-image: url(../images/nav-bg.jpg);
	width: 900px;
	font-weight:bold;
	font-size:15px;
	background-repeat: no-repeat;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-top: 2px;
	padding-left: 25px;
	padding-bottom: 5px;
}
#title {
	width: 850px;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#main_content{
	width:680px;
	margin-right:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	margin-left: 45px;
}
#pmain_content{
	width:680px;
	background-image: url(../images/flying-geese.png);
	background-position: left top;
	background-repeat: no-repeat;
	margin-right:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	margin-left: 45px;
}
#footer {/* footer now sits at bottom of window*/
    background-image: url(../images/bottom-grass.jpg);
    background-position: center bottom;
	height: 123px;
	background-repeat: no-repeat;
    width:900px;
    margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
    clear:both;
}
#pfooter {/* footer now sits at bottom of window*/
    background-image: url(../images/bottom-grass-pigeon.jpg);
    background-position: center bottom;
	height: 123px;
	background-repeat: no-repeat;
    width:900px;
    margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
    clear:both;
}
#afooter {/* footer now sits at bottom of window*/
    background-image: url(../images/angling-footer.jpg);
    background-position: center bottom;
	height: 315px;
	background-repeat: no-repeat;
    width:900px;
    margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
    clear:both;
}
#dfooter {/* footer now sits at bottom of window*/
	background-image: url(../images/bottom-grass-deer.jpg);
	background-position: center bottom;
	height: 227px;
	background-repeat: no-repeat;
	width:900px;
	margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	clear:both;
}
#lfooter {/* footer now sits at bottom of window*/
	background-image: url(../images/lamping-footer.jpg);
	background-position: center bottom;
	height: 220px;
	background-repeat: no-repeat;
	width:900px;
	margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.conduct {
	background-color: #CCCCCC;
	margin-left: 45px;
	padding-left: 35px;
	padding-top: 15px;
	padding-bottom: 15px;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration:underline;
}
#navigation a {
	color: #FFFFFF;
}.subtitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #216d12;
}
h1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #000066;
}

Thanks

**Paul O'B** · Oct 3, 2010 05:05

The nav is centred so change the text-alignment to left.

Code:

#navigation {
text-align:left;

}

Iis that what you meant?

**Tezdread** · Oct 3, 2010 05:47

Originally Posted by Paul O'B

The nav is centred so change the text-alignment to left.

Code:

#navigation {
text-align:left;

}

Iis that what you meant?

oh boy! I see it now...it was being centred from the CSS inside the page.

That's got that sorted.

Would you be able to explain why I can't get it aligned vertically? Nothing I change gets the nav links in the middle.

Would it make things easier if I put the code from within the blog page into the blog.css?

Thanks

**Paul O'B** · Oct 3, 2010 06:28

Hi,

If you set the line-height to the same as the height of the nav and remove the top and bottom padding it should automatically centre.

Code:

#navigation {
background-image:url("../images/nav-bg.jpg");
background-repeat:no-repeat;
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:bold;
height:25px;
line-height:25px;
margin:5px auto 0;
padding:0 0 0 5px;
width:900px;

If that's what you meant as it didn't look too far out anyway.

**Tezdread** · Oct 3, 2010 12:18

Originally Posted by Paul O'B

Hi,

If you set the line-height to the same as the height of the nav and remove the top and bottom padding it should automatically centre.

Code:

#navigation {
background-image:url("../images/nav-bg.jpg");
background-repeat:no-repeat;
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:bold;
height:25px;
line-height:25px;
margin:5px auto 0;
padding:0 0 0 5px;
width:900px;

If that's what you meant as it didn't look too far out anyway.

Hey Paul, that has helped. There is still some movement when looking at the blog page then the other pages but I guess I can live with that. I tried making adjustments but none of them worked.

Thanks again

**Paul O'B** · Oct 3, 2010 15:29

Hi,

You have conflicting rules and different html and css so it will be hard to make this consistent.

For your nav you have this:

Code:

#navigation {
    background-image: url(../images/nav-bg.jpg);
    width: 900px;
    font-weight:bold;
    font-size:15px;
    background-repeat: no-repeat;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    padding-top: 2px;
    padding-left: 25px;
    padding-bottom: 5px;background:red
}

900 + 25 = 925px wide but your container is only 900px wide!

You also have some reset styles in one file and not in the other.

You need to go through the code and make sure that you have the same rules for the defaults and for your body settings etc.

I notice there is a border on the header image also which should be removed.

img {border:0 none}

**Tezdread** · Oct 4, 2010 10:40

Yeah it's a bit of a mess, will work on it

Thanks

User Tag List

Thread: Unable to match alignment - working with 2 CSS's

Thread Tools

Display

Unable to match alignment - working with 2 CSS's

Bookmarks

Bookmarks

Posting Permissions