SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unable to match alignment - working with 2 CSS's

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The nav is centred so change the text-alignment to left.

    Code:
    #navigation {
    text-align:left;
    
    }
    Iis that what you meant?

  3. #3
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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}

  7. #7
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah it's a bit of a mess, will work on it
    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •