SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to position horizontal menu directly under header

    Hello developers and designers,

    I am trying to get my simple CSS menu to sit directly beneath the header image, with no space between the two. Both objects are in their own divs, #header and #horizontalmenu. Here's the HTML:

    Code:
    ...
    <body>
    <div id="wrapper"><!--Every thing enclosed in this div-->
    <div id="header"></div><!--The logo is held in this div -->
    <div id="horizontalmenu">
    <ul class="menu"><li><a href="">Menu 1</a></li>
    	<li><a href="">Menu 2</a></li>
    	<li><a href="">Menu 3</a></li>
    	<li><a href="">Menu 4</a></li></ul>
    </div>
    
      <div id="container">...
    And here's the style sheet:

    Code:
    body {
    	font: 80&#37;/1.5 Verdana, Arial, Helvetica, sans-serif;
    	color: #8A8987;
    /*	margin: 20px 0px; */
    	padding: 0px;
    	text-align: center; /* Centers the page in Internet Explorer */
    	background-image: url(../images/BG_Grey_Gradient_&_Lines.gif);
    	background-repeat: repeat-x;
    	background-color: #d9d9d9;
    }
    #header {
    	width: 728px;
    	margin-right: auto;
    	margin-left: auto;
    /*	margin-bottom: -20px; */
    	height: 180px;
    	background-image:url(../images/header.jpg)
    }
    #horizontalmenu {
    	width: 728px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-bottom: -20px;
    	height: 20px;
    }
    #wrapper {
    	background: url(../ims/bg.jpg) repeat-y left;
    	width: 728px;
    	margin: 20px auto;
    	text-align: left; /* Reverses the above rule for the rest of the content */
    }
    #adbanner {
    	width: 728px;
    	margin-right: auto;
    	margin-left: auto;
    /*	margin-bottom: -20px; */
    	height: 90px;
    }
    #footer {
    	width: 728px;
    	margin-right: auto;
    	margin-left: auto;
    /*	margin-top: -20px; */
    	height: 92px;
    	text-indent: 40px;
    	text-align: left;
    	color: #666B64;
    }
    #container {
    	width: 500px;
    	float: left;
    }
    #content {
    	margin-right: 100px;
    	margin-left: 30px;
    }
    #content p {
    	text-align: left;
    }
    #sidebar {
    	width: 200px;
    	float: right;
    	margin-right: 5px;
    	margin-left: 10px;
    	text-align: left;
    }
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	font-size: 11px;
    	color: #3C3C3C;
    	font-weight: bold;
    	background: none;
    }
    #sidebar li {
    	margin: 0 0 10px;
    	padding: 0;
    	list-style-type: none;
    	background: none;
    	color: #3C3C3C;
    	font-weight: bold;
    }
    #sidebar a, a:visited {
    	border-left: 10px solid #95927F;
    	padding: 4px 4px 4px 10px;
    	color: #95927F;
    	display: block;
    	background: none;
    	width: auto;
    	text-decoration: none;
    }
    #sidebar a:hover {
    	border-left: 10px groove #FBFBFA;
    	color: #F50874;
    	background: none;
    }
    #currpage a {
    	border-left: 10px double #F50874;
    	color: #666666;
    	background: none;
    } /* To highlight the current page - apply as necessary */
    h1 {
    	border-left: 18px solid #DBD4C7;
    	padding-left: 1em;
    	font-size: 1em;
    	width: 40px;
    	margin: 20px 0 20px 0;
    	text-align: left;
    }
    h2 {
    	border-left: 15px solid #6A6A68;
    	padding-left: 1em;
    	font-size: 1em;
    	width: 40px;
    	margin: 20px 0 20px 0;
    }
    h3 {
    	border-left: 15px solid #DBD4C7;
    	padding-left: 1em;
    	font-size: 1em;
    	width: 40px;
    	margin: 20px 0 20px 0;
    	color: #95927F;
    	font-weight: bold;
    	text-decoration: underline;
    }
    h4 {
    	border-left: 6px solid #6A6A68;
    	padding-left: 1em;
    	font-size: 1em;
    	width: 40px;
    	margin: 20px 0 20px 0;
    }
    ul {
    	list-style-type: none; /* suppression of useless elements */
    	width: 100%; /* precision for Opera */
    }
    li {
    	float: left;
    } /* lists aligned to the left */
    /* Menu */
    .menu a {
         margin: 0 2px;
         width: 100px; /* definition of menu button size */
         height: 20px;
    	 float: left;
         display: block;
         text-align: center;
         border: 1px solid gray;
         text-decoration: none;
         color: #000;
         background: #fff;
         }
    .menu a:hover {
         background: #ccc;
         border: 1px solid gray; 
         }
    .menu a:active {
         background: gray;
         border: 1px solid gray; 
         color: #fff;
         }
    /* END MENU */
    .last {
    	margin-bottom: 0;
    }
    .clearing {
    	height: 0;
    	clear: both;
    }/*Used here to clear the floated elements above*/
    And here's the visual output:

    As you can see, IE renders the page exactly as I want it, but Firefox leaves a small gap.

    I've tried the following to no avail :

    > Put menu into it's own div after the header (Shown above)

    > Placing menu after header, but not inside a div (Both browsers displayed gap like this)

    > Put menu code inside the header div (Menu displayed at top of header div in both browsers)

    Any ideas gratefully appreciated thanks!

    Cheers,

    Michael

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try turning off padding on both (esp bottom padding). Good rule of thumb start with * { margin:0; padding:0; } in your style sheets --- this eliminates a bunch of cross browser issues between FF, IE, Safari etc. because you then have to specify all margin and padding settings for each element down the css tree in your document.

    Look at the header and navigation on my site (www.ngcomputing.com) - then look at the css at www.ngcomputing.com/css/globals.css

    Thus, #splash sets the bottom margin to 1px to create the white space between the splash image (the leopard) and the navigation below it. The #nav has a margin of 0 all around.

    Just imagine stacking blocks in a top down method :

    Block A
    Block A Bottom Margin

    Block B
    Block B Bottom Margin

    Block C
    Block C Bottom Margin


    Note, that I'm controlling the space between each block by using the bottom margin setting -- rather than trying to use bottom and top margin settings, for instance, this is more confusing because it is out of a "top down" flowing method :

    Block A
    Block A Bottom Margin
    Block B
    Block C Top Margin
    Block C

    Also remember your css shorthand notation :

    margin: top right bottom left;

    examples :

    margin: 10px auto 10px auto;
    margin: 5px 2px 10px 2px;
    margin: 5px; <-- all margins set to 5px

    These work with padding. Check out a good css manual or book on css shortcut or compact notation.

    let me know if you need further help. good luck.
    intragenesis, llc professional web & graphic design

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Most elements in mozilla have a 1em top margin and you haven't taken this into account.

    Code:
    ul.menu{margin:0;padding:0}
    You must address the padding and margin on all the elements you use.

    If you have no forms in your page then you can use :
    Code:
    * {margin:0;padding:0}
    However these days most people are using a reset css to avoid the problems with form elements when using the universal reset.

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for your feedback--most helpful indeed! I'll give that reset script a go later today.


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
  •