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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Formatting problem

    I am having trouble formatting some things. I have a series of menus in the upper left hand side of my page and after the last menu (which is "Contact") I want there to be a bar the same size (vertically) of the other menus that fills the rest of the top of the screen to the right of that last menu. I've tried various things and can't seem to get it. Also, I have an <hr> for a bar that goes underneath the menu and in firefox it appears directly underneath the menus as it should but in IE it's tottaly screwed. Code is here http://pastebin.com/m75703dc8

    Any help is much appreciated.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    bar the same size (vertically) of the other menus that fills the rest of the top of the screen to the right of that last menu
    Hello Juicy, That's a little confusing...

    If you want the lighter tan background of your menu to extend to the bottom of the page, you can also add a bar between the menu and content this way, have a look at faux columns.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    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 don't think faux columns are the best solution for this. I would do something like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Menu Test</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    #navhold {
    background: #E0E0E0;
    border-bottom:1px solid #999;
    }
    #dd {
    padding: 0 0 20px 0;
    }
    #dd li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: 11px arial;
    }
    #dd li ul li {
    float:none;
    }
    #dd li a.menu {
    display: block;
    text-align: center;
    background: #E0E0E0;
    padding: 4px 10px;
    margin: 0 1px 0 0;
    color: #000;
    text-decoration: none;
    }
    #dd li a.menu:hover {
    background: #CCCCCC;
    }
    #dd li ul {
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
    background: #EAEBD8;
    border: 1px solid #000;
    }
    #dd li > ul {
    top: auto;
    left: auto;
    }
    #dd li:hover ul, #dd li.over ul {
    display:block;
    }
    #dd li ul a {
    display: block;
    font: 11px arial;
    text-align: left;
    text-decoration: none;
    padding: 5px;
    color: #000;
    }
    #dd li ul a:hover {
    background: #004BE2;
    color: #FFF;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0;
    }
    </style>
    <script type="text/javascript">
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("dd");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    </head>
    <body>
    <div id="navhold">
    	<ul id="dd">
    		<li><a href="#" class="menu">Home</a>
    			<ul>
    				<li><a href="#">HTML Tutorials</a></li>
    				<li><a href="#">DHTML Tutorials</a></li>
    				<li><a href="#">JavaScript Tutorials</a></li>
    				<li><a href="#">CSS Tutorials</a></li>
    			</ul>
    		</li>
    		<li><a href="#" class="menu">Download</a>
    			<ul>
    				<li><a href="#">ASP Scripts</a></li>
    				<li><a href="#">PHP Scripts</a></li>
    				<li><a href="#">Ajax Scripts</a></li>
    				<li><a href="#">Perl Scripts</a></li>
    			</ul>
    		</li>
    		<li><a href="#" class="menu">Order</a></li>
    		<li><a href="#" class="menu">Help</a></li>
    		<li><a href="#" class="menu" id="mmenu3">Contact</a>
    			<ul>
    				<li><a href="#">Office</a></li>
    				<li><a href="#">Sales</a></li>
    				<li><a href="#">Customer Service</a></li>
    				<li><a href="#">Shipping</a></li>
    			</ul>
    		</li>
    	</ul>
    	<div class="clear">&nbsp;</div>
    </div>
    </body>
    </html>
    BTW you don't need all of that js for a simple drop down menu. You just need a snippet for IE6. I also added a doctype which you didn't have. Not having one was likely the cause for IE not displaying the menu properly.
    Last edited by _Aerospace_Eng_; 01-13-2008 at 06:35 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks!

  • #5
    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 edited my post with a revised code. I forgot to check in IE but thats fixed now with the most recent code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I edited my post with a revised code. I forgot to check in IE but thats fixed now with the most recent code.
    Thanks. This helps a lot. U rule.


  •  

    Posting Permissions

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