Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't seem to line up banner with Nav bar

    This is driving me nuts, for the life of me I don't understand why the banner and the nav bar aren't lining up on the edges, and it appears to be different (how it is off) in IE and Firefox. Basically they should both be 750px in width but the edges of the nav bar and banner beneath it never line up. Thanks for any help....

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      margin:0;
      padding:0;
      text-align: center; /* IE5/Win fix */  
    }
    
    #wrapper {
      width:750px;
      height:100%;
      margin:0 auto 0 auto;
      text-align: left;
    }
    
      #top {
       width:750px;
       height:60px;
       padding:5px 1px 0 3px;
      }
    
    		#logohead {
    		  width:370px;
    		  height:60px;
    		  position:absolute;
    		  left:157px;
    		  top:17px;
    		  background-image:url(../images/ricochetlogo.gif);
    		  background-repeat:no-repeat;
    		  background-position:bottom left;
    		  z-index:5000;
    		 }
    		
    		#toplinks {
    		  height:60px;
    		  width:365px;
    		  margin-left:380px;
    		  font-family:Verdana, Arial, Helvetica, sans-serif;
    		  font-size:11px;
    		  color:#666666;
    		}
      
        #midbanner {
         width:auto;
         height:170px;
         position:relative;
    	 background: url(banner.gif) no-repeat;
        }
        
    	#midblock {
    	 width:auto;
         height:45px;
         position:relative;
    	 background-color:#6292BB;
    	 margin:1px 0 0 0;
    	}
    	
        #bottomcontent {
         width:auto;
         height:auto;
        }
    	
    		#leftnavbox {
    		
    		}
    	
    		#leftboxes {
    		width:185px;
    		height:auto;
    		padding:5px 5px 0 5px;
    		float:left;
    		/*border:1px solid gray;*/
    		}
    		
    			.leftbox, .leftboxBottom {
    			height:80px;
    			width:98%;
    			border:1px solid #8D8D8D;
    			background-image:url(../images/leftboxstrip.gif);
    			background-repeat:no-repeat;
    			background-position:top;
    			color:#334C99;
    			font-family:Verdana, Arial, Helvetica, sans-serif;
    			font-size:11px;
    			font-weight:bold;
    			padding-top:2px;
    			}
    			
    			.leftbox{
    			margin-bottom:10px;
    			}
    		
    		#rightboxes {
    		width:535px;
    		padding:5px 0 0 0;
    		margin-left:205px;
    		border:1px solid pink;
    		}
    			.rightbox1, .rightbox2, .rightbox3 {
    			height:176px;
    			width:165px;
    			border:1px solid blue;
    			background-image:url(../images/teststip.gif);
    			background-repeat:no-repeat;
    			background-position:top;
    			color:#ffffff;
    			font-weight:bold;
    			}
    			
    			.rightbox1 {
    			float:left;
    			}
    			
    			.rightbox2 {
    			margin-left:183px;
    			}
    			
    			.rightbox3 {
    			float:right;
    			}
    		
    		#bottombox {
    			height:80px;
    			width:535px;
    			margin-top:10px;
    			border:1px solid orange;
    			}
    		
    /* hide from IE/Mac \*/
    * html #bottomcontent,* html #midbanner {
      width:750.5px;
      wid\th:750px;
      }
    /* end hide */
    /****** BEGIN MENU ******/
    #nav,#nav li,#nav li ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      }
      
    #nav {
      position: relative;
      width:750px;
      min-height: 3.1em;
      height:auto;
      margin:0;
      font-size: .8em;
      top: 0;
      }
      
    #nav li {
      margin: 0 0 0 2px;
      padding: 0;
      width:100px;
      float:right;
      text-align:center;
      font-weight: bold;
      color:#444;
      }
    
    #nav a {
      display:block;
      color:#999999;
      text-decoration:none;
      background: url(inactive.gif) no-repeat;
      background-image: url(inactive.gif);
      background-repeat: no-repeat;
      background-position: top left;
      margin:0;
      position: relative;
      font-weight: bold;
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:13px;
      top: 0;
      line-height: 1.4em;
      }
    
    #nav a:hover {
      color:#888888;
      }
    
    ul#nav li a.here {
      background: url(active.gif) no-repeat;
      z-index: 310;
      position: relative;
      margin-bottom: -1px;
      color:#334C99;
      }
      
    ul#nav li a.here:hover {
      color:#334C99;
      }
      
    ul#subnav {
      width:750px;
      min-height: 23px;
      height: 1.7em;
      background:url(subnav_background.gif) repeat-x;
      border-top:1px solid #CECECE;
      border-left:1px solid #CECECE;
      border-right:1px solid #CECECE;
      text-align:right;
      padding:0 2px 0 0;
      clear:both;
      z-index:290;
      position:absolute;
      margin: 0;
      right: 0;
      top: 1.34em;
      }
    /* hide from IE/Mac \*/
    * html #nav {
      height: 3.1em;
      wid\th:752px;
      lef\t: 1px;
      }
    
    * html #nav a {
      height: 1%;
      }
    
    * html ul#subnav {
      wid\th:753px;
      }
    /* end hide */
    
    #subnav li {
      position:relative;
      z-index:102;
      display: block;
      margin: 0;
      padding: 0;
      float:left;
      line-height: 1.4em;
      width:50px;
      }
    
    ul#subnav li a {
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:9px;
      margin-top:3px;
      color:#666666;
      background-image:url();
      border-left:1px solid #cccccc;
      }
    /* end menu */
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="top">
    		<div id="logohead">&nbsp;</div>
    		<div id="toplinks" align="right"><img src="images/arrows2.gif">Client Login</div>
      </div>
      <ul id="nav">
    		<li><a class="a3" href="#">Link1</a></li>
    		<li><a class="a2" href="#">Link2</a></li>
    		<li><a class="a1" href="#">Link3</a></li>
    		<li><a class="a0 here" href="#">Home</a>
    		<ul id="subnav"><li>&nbsp;</li></ul>
    		</li>
      </ul>
      <div id="midbanner"></div>
      <div id="bottomcontent">
      </div>
    </div><!--end Wrapper-->
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Can't seem to line up banner with Nav bar-banner.gif  
    Attached Images Attached Images    

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Personally I think you are overcomplicating your CSS. What browsers are you trying to cater to? You seem to be using absolute positioning when it isn't necessary. If its okay with you I would like to recode your CSS and html. Do you have an image of how it should look?

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    As many as I can..... but mainly IE, Mozilla/Firefox, and Mac users as well.

    I am sure my code is not as efficient as could be, but it takes me awhile to do things in CSS because I have only done a few. I can send you an image if you'd like....

    EDIT: I sent you an email.
    Last edited by niemie; 07-08-2005 at 02:33 AM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Check this out
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    
    html,body {
    margin:0;
    padding:0;
    text-align: center; /* IE5/Win fix */
    height:100%;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#FFFFFF;
    color:#FFFFFF;
    }
    #wrapper {
    width:750px;
    margin:auto;
    }
    #nav {
    list-style:none;
    width:400px;
    float:right;
    }
    #nav li {
    width:100px;
    height:20px;
    float:left;
    }
    a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
    display:block;
    height:15px;
    background-image:url(inactive.gif);
    background-repeat:no-repeat;
    color:#999999;
    text-align:center;
    text-decoration:none;
    padding-top:5px;
    }
    a.inactive:hover {
    color:#888888;
    font-weight:bold;
    }
    a.active, a.active:link, a.active:visited, a.active:active {
    display:block;
    height:15px;
    background-image:url(active.gif);
    background-repeat:no-repeat;
    color:#334C99;
    text-align:center;
    text-decoration:none;
    padding-top:5px;
    }
    a.active:hover {
    color:#334C99;
    font-weight:bold;
    }
    #subnav {
    list-style:none;
    background-image:url(subnav_background.gif);
    height:22px;
    clear:both;
    border:1px solid #CECECE;
    border-bottom:0;
    color:#999999;
    }
    #subnav li {
    width:124px;
    height:18px;
    text-align:center;
    float:left;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
    display:block;
    height:14px;
    padding-top:4px;
    color:#999999;
    text-decoration:none;
    } 
    #subnav li a:hover {
    color:#888888;
    font-weight:bold;
    }
    #midbanner {
    height:170px;
    background-image:url(banner.gif);
    text-align:left;
    }
    #bottomcontent {
    text-align:left;
    color:#000000;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<ul id="nav">
    		<li><a class="active" href="#">Home</a></li>
    		<li><a class="inactive" href="#">Link1</a></li>
    		<li><a class="inactive" href="#">Link2</a></li>
    		<li><a class="inactive" href="#">Link3</a></li>
    	</ul>
    	<ul id="subnav">
    		<li><a href="#">Subnav 1</a></li>
    		<li><a href="#">Subnav 2</a></li>
    		<li><a href="#">Subnav 3</a></li>
    		<li><a href="#">Subnav 4</a></li>
    		<li><a href="#">Subnav 5</a></li>
    		<li><a href="#">Subnav 6</a></li>
    	</ul>
    	<div id="midbanner">Mid Banner</div>
    	<div id="bottomcontent">Bottom Content</div>
    </div><!--end Wrapper-->
    </body>
    </html>
    It looks good among the latest browsers.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks!! That fixed the alignment issue and surely seems to have cleaned up the code. I'll go back and add the other classes I need for the boxes etc under the main banner.

    One thing though, I need to get the active tabs to lay over the top of the top pixel of the nav bar so the nav bar's top border goes behind it... I tried z-index but to no avail....

    EDIT: Also, what's the best method to use to get a few pixels of space between the inactive tabs? Thanks.
    Last edited by niemie; 07-08-2005 at 04:14 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    
    html,body {
    margin:0;
    padding:0;
    text-align: center; /* IE5/Win fix */
    height:100%;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#FFFFFF;
    color:#FFFFFF;
    }
    #wrapper {
    width:750px;
    margin:auto;
    }
    #nav {
    list-style:none;
    width:416px;
    float:right;
    }
    #nav li {
    width:100px;
    height:20px;
    margin-left:4px;
    float:left;
    position:relative;
    }
    a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
    display:block;
    height:15px;
    background-image:url(inactive.gif);
    background-repeat:no-repeat;
    color:#999999;
    text-align:center;
    text-decoration:none;
    padding-top:5px;
    }
    a.inactive:hover {
    color:#888888;
    font-weight:bold;
    }
    a.active, a.active:link, a.active:visited, a.active:active {
    display:block;
    position:absolute;
    width:100px;
    height:16px;
    top:0;
    left:0;
    z-index:1;
    background-image:url(active.gif);
    background-repeat:no-repeat;
    color:#334C99;
    text-align:center;
    text-decoration:none;
    padding-top:5px;
    }
    a.active:hover {
    font-weight:bold;
    }
    #subnav {
    list-style:none;
    background-image:url(subnav_background.gif);
    height:22px;
    clear:both;
    border:1px solid #CECECE;
    border-bottom:0;
    color:#999999;
    }
    #subnav li {
    width:124px;
    height:18px;
    text-align:center;
    float:left;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
    display:block;
    height:14px;
    padding-top:4px;
    color:#999999;
    text-decoration:none;
    } 
    #subnav li a:hover {
    color:#888888;
    font-weight:bold;
    }
    #midbanner {
    height:170px;
    background-image:url(banner.gif);
    text-align:left;
    }
    #bottomcontent {
    text-align:left;
    color:#000000;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<ul id="nav">
    		<li><a class="active" href="#">Home</a></li>
    		<li><a class="inactive" href="#">Link1</a></li>
    		<li><a class="inactive" href="#">Link2</a></li>
    		<li><a class="inactive" href="#">Link3</a></li>
    	</ul>
    	<ul id="subnav">
    		<li><a href="#">Subnav 1</a></li>
    		<li><a href="#">Subnav 2</a></li>
    		<li><a href="#">Subnav 3</a></li>
    		<li><a href="#">Subnav 4</a></li>
    		<li><a href="#">Subnav 5</a></li>
    		<li><a href="#">Subnav 6</a></li>
    	</ul>
    	<div id="midbanner">Mid Banner</div>
    	<div id="bottomcontent">Bottom Content</div>
    </div><!--end Wrapper-->
    </body>
    </html>
    I basically made the #nav li's position:relative; then made the active class links position:absolute; and gave them a z-index:1; and changed the height a little. To get a few pixels in between the tabs, add some margin-left or margin-right to the li's, if you do that you will need to adjust the width of the ul#nav to fit each li.
    Last edited by _Aerospace_Eng_; 07-08-2005 at 04:22 AM.

  • #7
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So the Javascript changed it? That one is beyond me, still trying to understand why the Javascript.

    Probably edited my last post to late as well so you didn't see it, but what is the best method to add a few pixels between each of the inactive tabs?

    I am beginning to think my first effort was horrible.... thanks for your help!

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I saw it, been editing my post to, I was experimenting with some other javascript. I edited my post reread my post think I answered your questions. Ignore the javascript it has nothing to do with your problem.

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, will do - the reason I initially absolutely positioned the logo (which is above the sub nav on the opposite side of the tabs) was to get it to sit a little below the top of the tabs, which I could not get it to do with relative. I now realize that if the user shrinks the width of the screen that will throw everything off.

    I attached a screen shot of what I am trying to do, as far as positioning the logo. The logo itself is 250W by 57H. Again, trying to get it to sit just below the tops of the tabs, and have been unsuccessful. You will also see in that picture the tiny pixel gaps between the active tab and the top border of the nav bar - still seems to hold true even after your successful recode...

    Thanks so much for taking the time to help me out, I really appreciate your time. (I've got a long way to go!)
    Attached Thumbnails Attached Thumbnails Can't seem to line up banner with Nav bar-example.gif  

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    I saw it, been editing my post to, I was experimenting with some other javascript. I edited my post reread my post think I answered your questions. Ignore the javascript it has nothing to do with your problem.
    That one looks awesome in Firefox but IE messes it up... not sure where the changes occured...

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I see those spaces but I think they look fine, gives a little creative look. As far as your logo goes. Make the wrapper div position:relative; and then use absolute positioning to position the logo. Making an elements container position:relative; and then using absolute positioning for the element will go off the top of the container and not the browser. Yeah just noticed the mess up in IE, use this for the #nav css
    Code:
    #nav {
    list-style:none;
    width:416px;
    float:right;
    width:420px; !important
    }
    The !important tells IE to use that width instead, at the moment IE is the only browser that I believe understands the important rule. Though this might be the IE 3 pixel gap that peeps talk about. Read here.
    Last edited by _Aerospace_Eng_; 07-08-2005 at 04:43 AM.

  • #12
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It all turned out nicely - just one obsticle left. I'm trying to put in an arrow image next to the active sub nav list. I tried it out first on the global level (#subnav) to see how it lined up. The problem is (I think because they are floated left) that the arrows don't line up next to the list items - but I am unsure of what to change to not mess up the text spacing of the list items. I don't think list-position is relavant.... can't think of anything else. Changing their widths will just mess up the spacing.

    Example attached.
    Attached Thumbnails Attached Thumbnails Can't seem to line up banner with Nav bar-subnavs.gif  

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Might be better off putting them inside the link tags as image tags. I think that will work just fine.

  • #14
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think you're right - will do!


  •  

    Posting Permissions

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