...

View Full Version : overlapping



berry05
03-17-2008, 02:29 PM
hi! i have a overlapping problem and i dont know what to do....

http://www.lockedforums.com/forums/index.php

thats my site...see how the tabs are overlapping the thing under it...how to i fix that?

abduraooft
03-17-2008, 04:01 PM
That's because you've used a lot of absolute positions without knowing the consequences.
Remove them all. In fact unordered list (http://www.w3schools.com/html/html_lists.asp) is the easy and semantic way to construct this menu. So remove all divs used for this.

berry05
03-17-2008, 04:44 PM
so i just get rid of the div tags?



<!-- Start HTML generated by IMS from Virtual Mechanics Inc.-->
<div id="Oobj1" style="position:absolute;z-index:1;visibility:visible; left:87px;top:120px;width:23px;height:26px;">
<img name="Ggeo1" Align=Top src="http://www.lockedforums.com/forums/numbers/1.jpg" alt="" border="0" width="23" height="31"></div>

<div id="Oobj2" style="position:absolute;z-index:2;visibility:visible; left:110px;top:120px;width:200px;height:26px;">
<img name="Ggeo2" Align=Top src="http://www.lockedforums.com/forums/numbers/2.jpg" alt="" border="0" width="200" height="31"></div>

<div id="Oobj3" style="position:absolute;z-index:3;visibility:visible; left:310px;top:120px;width:200px;height:31px;">
<img name="Ggeo3" Align=Top src="http://www.lockedforums.com/forums/numbers/3.jpg" alt="" border="0" width="200" height="31"></div>

<div id="Oobj4" style="position:absolute;z-index:4;visibility:visible; left:509px;top:120px;width:200px;height:31px;">
<img name="Ggeo4" Align=Top src="http://www.lockedforums.com/forums/numbers/4.jpg" alt="" border="0" width="200" height="31"></div>

<div id="Oobj5" style="position:absolute;z-index:5;visibility:visible; left:708px;top:120px;width:200px;height:31px;">
<img name="Ggeo5" Align=Top src="http://www.lockedforums.com/forums/numbers/5.gif" alt="" border="0" width="200" height="31"></div>

<div id="Oobj6" style="position:absolute;z-index:6;visibility:visible; left:146px;top:120px;width:102px;height:31px;">
<div id="Grtf6" class="dfltt">
<font face="Arial" class="fsx06" color="#ffffff">HOME<br></font></div>
</div>

<div id="Oobj7" style="position:absolute;z-index:7;visibility:visible; left:339px;top:124px;width:91px;height:31px;">
<div id="Grtf7" class="dfltt">
<font face="Arial" class="fsx06" color="#ffffff">FORUM<br></font></div>
</div>

<div id="Oobj8" style="position:absolute;z-index:8;visibility:visible; left:339px;top:124px;width:75px;height:31px;">
<div id="Grtf8" class="dfltt">
<font face="Arial" class="fsx06" color="#5f5f5f"><a href="http://www.lockedforums.com/forums"><font color="#5f5f5f">FORUM</font></a><br></font></div>
</div>

<div id="Oobj9" style="position:absolute;z-index:9;visibility:visible; left:146px;top:122px;width:74px;height:31px;">
<div id="Grtf9" class="dfltt">
<font face="Arial" class="fsx06" color="#5f5f5f"><a href="http://www.lockedforums.com"><font color="#ff0000">HOME</font></a><br></font></div>
</div>


<script language="JavaScript" type="text/javascript" for="window">
<!--
var isNav4 = false, isIE4 = false, isIE4 = false, isNC6 = false;
var cmx = 0, cmy = 0;

if (document.all) isIE4 = true;
else if (document.getElementById) isNC6 = true;
else if (document.layers) isNav4 = true;

if (isNav4) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE);
window.onmousedown=NNmouseDown;
window.onmouseup=NNmouseUp;
window.onmousemove=NNmouseMove;
window.onresize=ReloadPage;
}
else if (isIE4){
window.document.onmousedown=IEmouseDown;
window.document.onmouseup=IEmouseUp;
window.document.onmousemove=IEmouseMove;
window.onresize=ReloadPage;
}
else if (isNC6){
window.document.onmousedown=NNmouseDown;
window.document.onmouseup=NNmouseUp;
window.document.onmousemove=NNmouseMove;
window.onresize=ReloadPage;
}
Version = 221;
ob = new Array();
pObjLst= new Array;
Molst = new Array();

initOb(0,2,9,768,0,0,'Oobj2','');
initOb(1,6,9,768,0,0,'Oobj6','');
initOb(2,7,8,33536,0,0,'Oobj7','');
initOb(3,8,null,2048,0,0,'Oobj8','');
initOb(4,9,null,2048,0,0,'Oobj9','');

SetDimensions();

MoLNo = 5;
pageObj = 0;
function SetDimensions()
{
var scrW;
var srcH;

if(isNav4) {
scrW = window.innerWidth;
scrH = window.innerHeight;
}
else if(isIE4) {
scrW = document.body.offsetWidth-20;
scrH = document.body.offsetHeight;
}
else if(isNC6) {
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}

currrects = new Array(2,6,7,8,9,0);
setCurrectRects(currrects)
delete currrects;
}


function initOb (ncount, nref,ntrg, nflg,nl,nr,szidname, sznn4name)
{
pObjLst[ncount] = nref;
ob[nref] = new Array();

if(document.getElementById) {
ob[nref].obj = document.getElementById(szidname);
ob[nref].style = ob[nref].obj.style;
}
else if(isNav4) {
var objstr;
if(sznn4name.length>0) {
objstr= sznn4name +'document.'+ szidname;
}
else {
objstr='document.' + szidname;
}
ob[nref].obj = eval(objstr);
ob[nref].style = ob[nref].obj;
}
else if(isIE4) {
ob[nref].obj = document.all[szidname];
ob[nref].style = ob[nref].obj.style;
}

if(ntrg!=null) {
ob[nref].trg =ntrg;
}
ob[nref].flg =nflg;
ob[nref].bdl = nl;
ob[nref].bdr = nr;
Molst[ncount] = nref;
}

function setCurrectRects(currrects) {
for (i=0;i< currrects.length-1;i++) {
getCurrentRect(ob[currrects[i]]);
}
}

function getCurrentRect(ob){
el = ob.obj;
if(isNav4){
ob.left = el.pageX + ob.bdl;
ob.top = el.pageY + ob.bdl;
ob.right = el.pageX + el.clip.width-ob.bdr;
ob.bottom = el.pageY + el.clip.height-ob.bdr;
}
else{
ob.left = el.offsetLeft+1;
ob.top = el.offsetTop +1;
tempEl = el.offsetParent;
while (tempEl != null) {
ob.left += tempEl.offsetLeft;
ob.top += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
ob.right = ob.left+ el.offsetWidth-ob.bdr;
ob.bottom = ob.top+ el.offsetHeight-ob.bdr;
ob.left += ob.bdl;
ob.top += ob.bdl;
}
}

function ReloadPage() {
SetDimensions();
}

function NNmouseMove(e) {
cmx = e.pageX;
cmy = e.pageY;
if(MoLNo > 0) MoOvrTst();
}
function NNmouseDown(e) {
cmx = e.pageX;
cmy = e.pageY;
if(MoLNo > 0) MouseDown();
}
function NNmouseUp(e) {
cmx = e.pageX;
cmy = e.pageY;
if(MoLNo > 0) MouseUp();
}
function IEmouseMove() {
cmx = window.event.clientX + document.body.scrollLeft;
cmy = window.event.clientY + document.body.scrollTop;
if(MoLNo > 0) MoOvrTst();
}
function IEmouseDown() {
cmx = window.event.clientX + document.body.scrollLeft;
cmy = window.event.clientY + document.body.scrollTop;
if(MoLNo > 0) MouseDown();
}
function IEmouseUp() {
cmx = window.event.clientX + document.body.scrollLeft;
cmy = window.event.clientY + document.body.scrollTop;
if(MoLNo > 0) MouseUp();
}
function MoOvrTst()
{
var i;
for(i=0; i < MoLNo; i++) {
Cobj = Molst[i];
if(ob[Cobj].flg) {
if(ob[Cobj].flg & (1<<5)) {
if(MouseOver() == 1) {
if(ob[Cobj].flg & (1<<6)) {
setVisibility("hidden");
}
else {
setVisibility("visible");
}
}
else {
if(ob[Cobj].flg & (1<<7)) {
setVisibility("hidden");
}
else {
setVisibility("visible");
}
}
}
if(ob[Cobj].flg & (1<<8)) {
if(!(ob[Cobj].flg & (1<<12)) && MouseOver() == 1) {
if(ob[Cobj].flg & (1<<9) && isActive() ) {
ob[Cobj].flg = ob[Cobj].flg | (1<<12);
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("hidden");
}

Cobj = ob[Cobj].trg;
setVisibility("visible");
}
else if(ob[Cobj].flg & (1<<10)) {
ob[Cobj].flg = ob[Cobj].flg | (1<<12);
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("visible");
}

Cobj = ob[Cobj].trg;
setVisibility("hidden");}
}
else if((ob[Cobj].flg & (1<<12)) && MouseOver() == 0) {
if(!(ob[Cobj].flg & (1<<16))){
if(ob[Cobj].flg & (1<<9)) {
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("visible");
}
Cobj = ob[Cobj].trg;
setVisibility("hidden");
ob[Molst[i]].flg = ob[Molst[i]].flg & ~(1<<12);
}
else if(ob[Cobj].flg & (1<<10) && isActive()) {
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("hidden");
}
Cobj = ob[Cobj].trg;
setVisibility("visible");
ob[Molst[i]].flg = ob[Molst[i]].flg & ~(1<<12);
}
}
else {
ob[Molst[i]].flg = ob[Molst[i]].flg & ~(1<<12);
}
}
}
}
}
}

function MouseOver()
{
if( cmx >= ob[Cobj].left && cmx <= ob[Cobj].right && cmy >= ob[Cobj].top && cmy <= ob[Cobj].bottom) {
return 1;
}
else {
return 0;
}
}

function setVisibility(code)
{
var i;
if((ob[Cobj].flg & (1<<24))&& (ob[Cobj].flg &(~(1<<24)))) {
ob[Cobj].style.visibility = code;
for(i = 0; i < ob[Cobj].gsz; i++) {
ob[ob[Cobj].grp[i]].style.visibility = code;
}
}
else {
ob[Cobj].style.visibility = code;
}
}

InitVisibility();

function InitVisibility()
{
var i;
obTriggered = new Array();
nCount=0;

obGroup = new Array();
for(i=0; i < MoLNo; i++) {
obGroup[i]=0;
}

for(i=0; i < MoLNo; i++) {
bHidden=0;
if(ob[Molst[i]].flg & (1<<4)) {
bHidden=1;
}
else if(ob[Molst[i]].flg & (1<<8)) {
if( (ob[Molst[i]].flg & (1<<9)) ||(ob[Molst[i]].flg & (1<<13)) ) {
obTriggered[nCount]= ob[Molst[i]].trg;
nCount+=1;
}
else if( (ob[Molst[i]].flg & (1<<15)) ) {
if( (ob[Molst[i]].flg & (1<<10)) ||(ob[Molst[i]].flg & (1<<14)) ) {
bHidden=1;
}
}
}
else {
bHidden=0;
}

if(bHidden==1) {
code = "hidden";
}
else {
code = "visible";
}

Cobj=Molst[i];
if(obGroup[Cobj]!=1){
setVisibility(code);
}

var j;
if((ob[Molst[i]].flg & (1<<24)) && (ob[Molst[i]].flg & (~(1<<24)))) {
for(j = 0; j < ob[Molst[i]].gsz; j++) {
obGroup[ob[Molst[i]].grp[j]] =1;
}
}
}

for(i=0; i < nCount; i++) {
Cobj =obTriggered[i];
code = "hidden";
setVisibility(code);
}
}

function isActive()
{
var bVisible = 1;
if(ob[Cobj].flg & (1<<17)){
if(isNav4){
bVisible = ob[Cobj].style.visibility=="show";
}
else{
bVisible = ob[Cobj].style.visibility=="visible";
}
}
return bVisible;
}

function MouseUp()
{
var i;
for(i=0; i < MoLNo; i++) {
Cobj = Molst[i];
if(MouseOver() == 1) {
if( (ob[Cobj].flg & (1<<14)) && isActive()) {
if(!(ob[Cobj].flg & (1<<16))) {
if( (ob[Cobj].flg & (1<<15))) {
setVisibility("hidden");
}
Cobj = ob[Cobj].trg;
setVisibility("visible");
}
}
else if( (ob[Cobj].flg & (1<<13))) {
if(!(ob[Cobj].flg & (1<<16))) {
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("visible");
}
Cobj = ob[Cobj].trg;
setVisibility("hidden");
}
}
}
}
}

function MouseDown()
{
var i;
for(i=0; i < MoLNo; i++) {
Cobj = Molst[i];
if(MouseOver() == 1) {
if( (ob[Cobj].flg & (1<<13)) && isActive()) {
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("hidden");
}
Cobj = ob[Cobj].trg;
setVisibility("visible");
}
else if( (ob[Cobj].flg & (1<<14))) {
if( (ob[Cobj].flg & (1<<15)) ) {
setVisibility("visible");
}
Cobj = ob[Cobj].trg;
setVisibility("hidden");
}
}
}
}

//-->
</script>
<!-- End IMS generated HTML.-->

abduraooft
03-18-2008, 08:28 AM
Seems like you fixed it by adding a <br/>, but I don't agree with you. I haven't played with vBulletin, though I'm sure than you can remove most of errors in your markup. See
http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.lockedforums.com%2Fforums%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0
BTW, what's the purpose of that javascript posted above?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum