Unable to match alignment - working with 2 CSS's

Tezdread · October 3, 2010, 10:33am

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

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

@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

Tezdread · October 3, 2010, 11:47am

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

Tezdread · October 4, 2010, 4:40pm

Yeah it’s a bit of a mess, will work on it
Thanks

PaulOB · October 3, 2010, 11:05am

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


#navigation {
text-align:left;

}

Iis that what you meant?

PaulOB · October 3, 2010, 9:29pm

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:


#navigation {
    background-image: url(../images/nav-bg.jpg);
[B]    width: 900px;[/B]
    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[B];
[/B]    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 · October 3, 2010, 6:18pm

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.
#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;
[B]line-height:25px;[/B]
margin:5px auto 0;
[B]padding:0 0 0 5px;[/B]
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

PaulOB · October 3, 2010, 12:28pm

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.


#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;
[B]line-height:25px;[/B]
margin:5px auto 0;
[B]padding:0 0 0 5px;[/B]
width:900px;

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