Forum Moderators: not2easy
I am having a problem that occurs when I attempt to set the width of the header. For some reason when I attempt to define the width of the header, which I am doing to center the buttons, and mouseover any of the buttons the left column moves to the center of the page in Internet Explorer 6. It works fine in Firefox(no surprise there). I just dont understand why it is doing that. Below is the code for the page and below that is the css for the buttons. Below that is the javascript for the mouseover of the buttons.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The CSS Experiment</title>
<style type="text/css">
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 240px; /* LC fullwidth + CC padding */
}
#header, #footer {
/* margin: 0 auto; */
padding-left: -100px; /* LC fullwidth */
padding-right: -100px; /* RC fullwidth + CC padding */
}
.column {
position: relative;
float: left;
}
#center {
padding: 0 20px;
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 200px; /* RC fullwidth */
}
/*** Just for Looks ***/
body {
background-color: #0099CC;
}
#header, #footer {
font-size: 14px;
text-align: center;
padding: 3px;
background-color: #0099CC;
margin: 0 auto;
width: 600px
}
#left {
background-color: #0099CC;
}
#center {
background-color: #0099CC;
}
#right {
background-color: #0099CC;
}
.column {
padding-top: 1em;
text-align: justify;
}
</style>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
</head><body>
<div id="header"><div id="header">
<a href="http://www.google.com" style="color: black"><dl class="dropdown"><div id="stdButton">Home</div></dl></a>
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Knowledge</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">People</a></li>
<li><a href="#" class="underline">Places</a></li>
<li><a href="#" class="underline">Things To Do</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Blogs</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Adventure</a></li>
<li><a href="#" class="underline">Brevard</a></li>
<li><a href="#" class="underline">Science</a></li>
<li><a href="#" class="underline">Technology</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Links</dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul>
<li><a href="#" class="underline">Adventure</a></li>
<li><a href="#" class="underline">Brevard</a></li>
<li><a href="#" class="underline">Florida</a></li>
<li><a href="#" class="underline">Technology</a></li>
</ul>
</dd>
</dl>
<div style="clear:both" />
</div></div></div>
<div id="center" class="column">
<h1>This is the main content.</h1>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla.</p>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="footer">This is the footer.</div>
</body></html>
dropdown.css starts here:
body {margin:25px; font:10px Arial}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:120px; border:2px solid #9ac1c9; padding:5px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:130px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:130px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:120px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
#stdButton
{
width:120px;
text-decoration:none;
border:2px solid #9ac1c9;
padding:5px;
font-weight:bold;
cursor:pointer;
background:url(images/header.gif);
display:block;
}
a:hover {background:url(images/header_over.gif)}
Code for dropdown.js:
var DDSPEED = 10;
var DDTIMER = 15;
// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}
// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) ¦¦ (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
Thank you in advance for any assistance you provide.
First, I noticed an error:
<div id="header"><div id="header">
You should not have two divisions with the same id even though you have #header defined twice in your css.
as for the centering issue, it is probably because of this:
text-align: center;
in the second #header declaration and the fact the #header does not close until after your buttons. I suspect the whole page should be in a wrapper with text-align: left and that the #header should close sooner, before the buttons.
Marshall
On another not is it possible to have the contents of a div display the contents of another page? Just like one would do when utilizing frames. If not how would I do that?
Alternatively, use server side technology to build your contents.
In case you were more interested in how to make only part of the screen scroll: overflow might help, as well as putting the parts you want to stay put on the screen as position:fixed.
