Header image and menus are not flush together. I need help fixing HTML/CSS
I am practicing with some sample CSS and Java Script code in an html file. In the snippet below is the source code, and if you want to help me, then all you have to do is to save the code as an html file and you will see how it works.
Basically it is a menu with secondary navigation. What I have tried to do is to have a banner image at the top of the page, and then to have the menus right under the banner image. Meaning that the banner image and menus are flush with no space in between. Unfortunately no matter what I try, their is always like 5 pixels of space between my banner image and the menus. Can someone fix the code so that the image header/banner and the menus are flush. (No space in between). Attached is a header image I have been practicing with. I use these image tags to add the header image:
<img src="images/HeaderBannerIm
Basically it is a menu with secondary navigation. What I have tried to do is to have a banner image at the top of the page, and then to have the menus right under the banner image. Meaning that the banner image and menus are flush with no space in between. Unfortunately no matter what I try, their is always like 5 pixels of space between my banner image and the menus. Can someone fix the code so that the image header/banner and the menus are flush. (No space in between). Attached is a header image I have been practicing with. I use these image tags to add the header image:
<img src="images/HeaderBannerIm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
/***********************************************************************************************
Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
Get this and other scripts at www.dhtmlgoodies.com
You can use this script freely as long as this copyright message is kept intact.
***********************************************************************************************/
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-top:0px;
}
.bodyText{
padding-left:10px;
padding-right:10px;
border-top:1px solid #000000;
}
.bodyText p{
margin-top:5px;
}
#mainContainer{
width:760px;
height:600px;
border:1px solid #000000;
margin:0 auto;
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:85px;
}
#mainMenu{
background-color: #FFF; /* Background color of main menu */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
font-size:0.9em; /* Font size of main menu items */
border-bottom:1px solid #000000; /* Bottom border of main menu */
height:30px; /* Height of main menu */
position:relative; /* Don't change this position attribute */
}
#mainMenu a{
padding-left:5px; /* Spaces at the left of main menu items */
padding-right:5px; /* Spaces at the right of main menu items */
font-weight:bold;
/* Don't change these two options */
position:absolute;
bottom:-1px; /* Change this value to -2px if you're not using a strict doctype */
}
#submenu{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
background-color:#E2EBED; /* Background color of sub menu items */
width:100%; /* Don't change this option */
}
#submenu div{
white-space:nowrap; /* Don't change this option */
}
/*
Style attributes of active menu item
*/
#mainMenu .activeMenuItem{
/* Border options */
border-left:1px solid #000000;
border-top:1px solid #000000;
border-right:1px solid #000000;
background-color: #E2EBED; /* Background color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
#mainMenu .activeMenuItem img{
position:absolute;
bottom:0px;
right:0px;
}
/*
Style attributes of inactive menu items
*/
#mainMenu .inactiveMenuItem{
color: #000; /* Text color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
#submenu a{
text-decoration:none; /* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
padding-left:5px; /* Space at the left of each sub menu item */
padding-right:5px; /* Space at the right of each sub menu item */
color: #000; /* Text color */
font-size:0.9em;
}
#submenu a:hover{
color: #FF0000; /* Red color when the user moves the mouse over sub menu items */
}
</style>
<script type="text/javascript">
/***********************************************************************************************
Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
Get this and other scripts at www.dhtmlgoodies.com
You can use this script freely as long as this copyright message is kept intact.
***********************************************************************************************/
var menuAlignment = 'left'; // Align menu to the left or right?
var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t
var activeMenuItem = false; // Don't change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
/*
These cookie functions are downloaded from
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}
function showHide()
{
if(activeMenuItem){
activeMenuItem.className = 'inactiveMenuItem';
var theId = activeMenuItem.id.replace(/[^0-9]/g,'');
document.getElementById('submenu_'+theId).style.display='none';
var img = activeMenuItem.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='none';
}
var img = this.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='inline';
activeMenuItem = this;
this.className = 'activeMenuItem';
var theId = this.id.replace(/[^0-9]/g,'');
document.getElementById('submenu_'+theId).style.display='block';
if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
}
}
function initMenu()
{
var mainMenuObj = document.getElementById('mainMenu');
var menuItems = mainMenuObj.getElementsByTagName('A');
if(document.all){
mainMenuObj.style.visibility = 'hidden';
document.getElementById('submenu').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
cookieValue = cookieValue.replace(/[^0-9]/g,'');
if(cookieValue.length>0 && cookieValue<menuItems.length){
activeTabIndex = cookieValue/1;
}
}
var currentLeftPos = 15;
for(var no=0;no<menuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
menuItems[no].id = 'mainMenuItem' + (no+1);
if(menuAlignment=='left')
menuItems[no].style.left = currentLeftPos + 'px';
else
menuItems[no].style.right = currentLeftPos + 'px';
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
var img = menuItems[no].getElementsByTagName('IMG');
if(img.length>0){
img[0].style.display='none';
if(MSIE && !Opera && navigatorVersion<7){
img[0].style.bottom = '-1px';
img[0].style.right = '-1px';
}
}
if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem = menuItems[no];
var img = activeMenuItem.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='inline';
}else menuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom = '-1px';
if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px';
}
var mainMenuLinks = mainMenuObj.getElementsByTagName('A');
var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;
while(document.getElementById('submenu_' + subCounter)){
var subItem = document.getElementById('submenu_' + subCounter);
if(leftAlignSubItems){
// No action
}else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';
}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}
subCounter++;
}
if(document.all){
mainMenuObj.style.visibility = 'visible';
document.getElementById('submenu').style.visibility='visible';
}
document.getElementById('submenu').style.display='block';
}
window.onload = initMenu;
</script>
</head>
<body>
<!-- This is the start of the menu -->
<div id="mainMenu">
<a>Products</a>
<a>Support</a>
<a>About us</a>
<a>Download</a>
</div>
<div id="submenu">
<!-- The first sub menu -->
<div id="submenu_1">
<a href="http://www.dhtmlgoodies.com">Product 1</a>
<a href="http://www.dhtmlgoodies.com">Product 2</a>
<a href="http://www.dhtmlgoodies.com">Product 3</a>
</div>
<!-- Second sub menu -->
<div id="submenu_2">
<a href="http://www.dhtmlgoodies.com">Phone</a>
<a href="http://www.dhtmlgoodies.com">Email</a>
<a href="http://www.dhtmlgoodies.com">Knowledge base</a>
</div>
<!-- Third sub menu -->
<div id="submenu_3">
<a href="http://www.dhtmlgoodies.com">History</a>
<a href="http://www.dhtmlgoodies.com">The team</a>
<a href="http://www.dhtmlgoodies.com">Contact us</a>
<a href="http://www.dhtmlgoodies.com">Visions</a>
</div>
<!-- Fourth sub menu -->
<div id="submenu_4">
<a href="http://www.dhtmlgoodies.com">Patches</a>
<a href="http://www.dhtmlgoodies.com">Whitepapers</a>
<a href="http://www.dhtmlgoodies.com">Tab menu</a>
<a href="http://www.dhtmlgoodies.com">Color picker</a>
<a href="http://www.dhtmlgoodies.com">Window scripts</a>
<a href="http://www.dhtmlgoodies.com">Games</a>
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you!
The height of the blue background box for the text of the top menu is being driven by the font size. You have specified it in em,.
Nothing wrong with that, except that the SPACE that the div tag takes up is specified by the height css tag. This is specified in pixels. If ever 0.9em doesn't line up with 30px, you'll either have a gap, or it will overlap.
Specify both as 0.9em.
Next, you need to account for the border. Add a padding of 2px to the #mainmenu css as well. Now it will line up.
See attached HTML.
Open in new window