Jump to content

Please Please can anyone help??

khalen

By khalen
in CSS

Recommended Posts

khalen Newbie

khalen

Posted
Posted

Please guys can anyone take a zip file of my code ... very small only a few kb... to help me get the page to look the same regardless of which browser is being used or what size monitor it is being viewed on.Alternatively I can paste all the code on here if someone will please look at it!I have tried without any success and dont know what is wrong with it.Please..Paul

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Paste your code, we'll have a look.Btw a few kilobytes is already quite a bit of code :)

Link to comment
Share on other sites
khalen Newbie

khalen

Posted
  • Author
Posted

Thank you soooo much. This is the css file.

	body{		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */		background-color:#c8d0e0;	}		a img  {	border : none;	}		#footer{		height:30px;		vertical-align:middle;		text-align:right;		clear:both;		padding-right:3px;		background-color:#cccccc;		margin-top:2px;		width:790px;	}	#footer form{		margin:0px;		margin-top:2px;	}	#dhtmlgoodies_dragDropContainer{	/* Main container for this script */		width="100%";		height="100%";		background-color:#c8d0e0;		-moz-user-select:none;	}	#dhtmlgoodies_dragDropContainer ul{	/* General rules for all <ul> */		margin-top:0px;		margin-left:0px;		margin-bottom:0px;		padding:2px;	}		#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */		list-style-type:none;		height:15px;		background-color:#cccccc;		border:1px solid #000;		padding:2px;		margin-bottom:2px;		cursor:pointer;		font-size:13px;		line-height:15px;	}		li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */		border:1px dotted #600;			background-color:#cccccc;	}		#dhtmlgoodies_dragDropContainer ul li.correctAnswer{	/* Correctly moved item */		background-color:lime;		color:#000;	}	#dhtmlgoodies_dragDropContainer ul li.wrongAnswer{	/* Item moved to wrong box */		background-color:red;		color:#FFF;	}			/* LEFT COLUMN CSS */	div#dhtmlgoodies_listOfItems{	/* Left column "Available students" */				float:left;		padding-left:50px;		padding-right:10px;				/* CSS HACK */		width: 180px;	/* IE 5.x */		width/* */:/**/160px;	/* Other browsers */		width: /**/160px;					}	#dhtmlgoodies_listOfItems ul{	/* Left(Sources) column <ul> */		height:160px;		width: 200px;	}			div#dhtmlgoodies_listOfItems div{		border:1px solid #999;			}	div#dhtmlgoodies_listOfItems div ul{	/* Left column <ul> */		margin-left:5px;	/* Space at the left of list - the arrow will be positioned there */		margin-right:5px;	/* Space at the right of list */	}	#dhtmlgoodies_listOfItems div p{	/* Heading above posible answers column */		width: 210px;		margin:0px;			font-weight:bold;		padding-left:12px;		background-color:#c8d0e0;			color:#000000;		margin-bottom:5px;	}	/* END LEFT COLUMN CSS */		#dhtmlgoodies_dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */		background-color:#E2EBED;		border:1px solid #317082;	}		/* Start main container CSS */		div#dhtmlgoodies_mainContainer{	/* Right column DIV */		width:590px;		float:right;		}	#dhtmlgoodies_mainContainer div{	/* Parent <div> of small boxes */		float:left;		margin-right:10px;		margin-bottom:10px;		margin-top:0px;		border:1px solid #c8d0e0;		/* CSS HACK */		width: 172px;	/* IE 5.x */		width/* */:/**/170px;	/* Other browsers */		width: /**/170px;					}	#dhtmlgoodies_mainContainer div ul{		margin-left:10px;	}		#dhtmlgoodies_mainContainer div p{	/* Heading above question boxes */		margin:0px;		padding:0px;		padding-left:12px;		font-weight:italic;		background-color:#c8d0e0;			color:#000000;			margin-bottom:5px;	}		#dhtmlgoodies_mainContainer ul{	/* Small box in right column ,i.e <ul> */		width:152px;		height:80px;			border:0px;			margin-bottom:0px;		overflow:hidden;			}		#dragContent{	/* Drag container */		position:absolute;		width:150px;		height:15px;		display:none;		margin:0px;		padding:0px;		z-index:2000;	}	</style>	<style type="text/css" media="print">	div#dhtmlgoodies_listOfItems{		display:none;	}	body{		background-color:#FFF;	}	img{		display:none;	}	#dhtmlgoodies_dragDropContainer{		border:0px;		width:100%;	}

And this is the main code for the pages.

<html><head><link rel="stylesheet" type="text/css" href="setup_style.css" /></head>	<style type="text/css" media="print">	div#dhtmlgoodies_listOfItems{		display:none;	}	body{		background-color:#FFF;	}	img{		display:none;	}	#dhtmlgoodies_dragDropContainer{		border:0px;		width:100%;	}	</style>		<script type="text/javascript">				/* VARIABLES YOU COULD MODIFY */	var boxSizeArray = [1,1,1,1];	// Array indicating how many items there is rooom for in the right column ULs		var arrow_offsetX = -5;	// Offset X - position of small arrow	var arrow_offsetY = 0;	// Offset Y - position of small arrow		var arrow_offsetX_firefox = -6;	// Firefox - offset X small arrow	var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow		var verticalSpaceBetweenListItems = 5;	// Pixels space between one <li> and next												// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li													var initShuffleItems = true;	// Shuffle items before staring	var indicateDestionationByUseOfArrow = true;	// Display arrow to indicate where object will be dropped(false = use rectangle)		var lockedAfterDrag = true;	/* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */			/* END VARIABLES YOU COULD MODIFY */		var dragDropTopContainer = false;	var dragTimer = -1;	var dragContentObj = false;	var contentToBeDragged = false;	// Reference to dragged <li>	var contentToBeDragged_src = false;	// Reference to parent of <li> before drag started	var contentToBeDragged_next = false; 	// Reference to next sibling of <li> to be dragged	var destinationObj = false;	// Reference to <UL> or <LI> where element is dropped.	var dragDropIndicator = false;	// Reference to small arrow indicating where items will be dropped	var ulPositionArray = new Array();	var mouseoverObj = false;	// Reference to highlighted DIV		var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;	var destinationBoxes = new Array();	var indicateDestinationBox = false;			function getTopPos(inputObj)	{			  var returnValue = inputObj.offsetTop;	  while((inputObj = inputObj.offsetParent) != null){		  if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;	  }	  return returnValue;	}		function getLeftPos(inputObj)	{	  var returnValue = inputObj.offsetLeft;	  while((inputObj = inputObj.offsetParent) != null){		  if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;	  }	  return returnValue;	}			function cancelEvent()	{		return false;	}	function initDrag(e)	// Mouse button is pressed down on a LI	{		if(document.all)e = event;		if(lockedAfterDrag && this.parentNode.id!='allItems')return;				var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);				dragTimer = 0;		dragContentObj.style.left = e.clientX + sl + 'px';		dragContentObj.style.top = e.clientY + st + 'px';		contentToBeDragged = this;		contentToBeDragged_src = this.parentNode;		contentToBeDragged_next = false;		if(this.nextSibling){			contentToBeDragged_next = this.nextSibling;			if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;		}		timerDrag();		return false;	}		function everythingIsCorrect()	{		alert('Well done! You have answered them all correctly. Move on to the next page.');			}			function timerDrag()	{		if(dragTimer>=0 && dragTimer<10){			dragTimer++;			setTimeout('timerDrag()',10);			return;		}		if(dragTimer==10){			dragContentObj.style.display='block';			dragContentObj.appendChild(contentToBeDragged);		}	}		function moveDragContent(e)	{		if(dragTimer<10){			if(contentToBeDragged){				if(contentToBeDragged_next){					contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);				}else{					contentToBeDragged_src.appendChild(contentToBeDragged);				}				}			return;		}		if(document.all)e = event;		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);		var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);						dragContentObj.style.left = e.clientX + sl + 'px';		dragContentObj.style.top = e.clientY + st + 'px';				if(mouseoverObj)mouseoverObj.className='';		destinationObj = false;		dragDropIndicator.style.display='none';		if(indicateDestinationBox)indicateDestinationBox.style.display='none';		var x = e.clientX + sl;		var y = e.clientY + st;		var width = dragContentObj.offsetWidth;		var height = dragContentObj.offsetHeight;				var tmpOffsetX = arrow_offsetX;		var tmpOffsetY = arrow_offsetY;		if(!document.all){			tmpOffsetX = arrow_offsetX_firefox;			tmpOffsetY = arrow_offsetY_firefox;		}		for(var no=0;no<ulPositionArray.length;no++){			var ul_leftPos = ulPositionArray[no]['left'];				var ul_topPos = ulPositionArray[no]['top'];				var ul_height = ulPositionArray[no]['height'];			var ul_width = ulPositionArray[no]['width'];						if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){				var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;				if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;				if(noExisting<boxSizeArray[no-1] || no==0){					dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';					var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');					for(var liIndex=0;liIndex<subLi.length;liIndex++){						var tmpTop = getTopPos(subLi[liIndex]);						if(!indicateDestionationByUseOfArrow){							if(y<tmpTop){								destinationObj = subLi[liIndex];								indicateDestinationBox.style.display='block';								subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);								break;							}						}else{														if(y<tmpTop){								destinationObj = subLi[liIndex];								dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';								dragDropIndicator.style.display='block';								break;							}							}										}										if(!indicateDestionationByUseOfArrow){						if(indicateDestinationBox.style.display=='none'){							indicateDestinationBox.style.display='block';							ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);						}											}else{						if(subLi.length>0 && dragDropIndicator.style.display=='none'){							dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';							dragDropIndicator.style.display='block';						}						if(subLi.length==0){							dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'							dragDropIndicator.style.display='block';						}					}										if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];					mouseoverObj = ulPositionArray[no]['obj'].parentNode;					mouseoverObj.className='mouseover';					return;				}			}		}	}		function checkAnswers()	{				for(var no=0;no<destinationBoxes.length;no++){			var subLis = destinationBoxes[no].getElementsByTagName('LI');			if(subLis.length<boxSizeArray[no])return;							for(var no2=0;no2<subLis.length;no2++){				if(subLis[no2].className=='wrongAnswer')return;			}				}				everythingIsCorrect();					}			/* End dragging 	Put <LI> into a destination or back to where it came from.	*/		function dragDropEnd(e)	{		if(dragTimer==-1)return;		if(dragTimer<10){			dragTimer = -1;			return;		}		dragTimer = -1;		if(document.all)e = event;				if(destinationObj){			var groupId = contentToBeDragged.getAttribute('groupId');			if(!groupId)groupId = contentToBeDragged.groupId;						var destinationToCheckOn = destinationObj;			if(destinationObj.tagName!='UL'){				destinationToCheckOn = destinationObj.parentNode;			}						var answerCheck = false;			if(groupId == destinationToCheckOn.id){				contentToBeDragged.className = 'correctAnswer';						answerCheck=true;				}else{				contentToBeDragged.className = 'wrongAnswer';			}			if(destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')contentToBeDragged.className='';									if(destinationObj.tagName=='UL'){				destinationObj.appendChild(contentToBeDragged);			}else{				destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);			}			mouseoverObj.className='';			destinationObj = false;			dragDropIndicator.style.display='none';			if(indicateDestinationBox){				indicateDestinationBox.style.display='none';				document.body.appendChild(indicateDestinationBox);			}									contentToBeDragged = false;						if(answerCheck)checkAnswers();							return;		}			if(contentToBeDragged_next){			contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);		}else{			contentToBeDragged_src.appendChild(contentToBeDragged);		}		contentToBeDragged = false;		dragDropIndicator.style.display='none';		if(indicateDestinationBox){			indicateDestinationBox.style.display='none';			document.body.appendChild(indicateDestinationBox);					}				mouseoverObj = false;			}		/* 	Preparing data to be saved 	*/	function saveDragDropNodes()	{		var saveString = "";		var uls = dragDropTopContainer.getElementsByTagName('UL');		for(var no=0;no<uls.length;no++){	// LOoping through all <ul>			var lis = uls[no].getElementsByTagName('LI');			for(var no2=0;no2<lis.length;no2++){				if(saveString.length>0)saveString = saveString + ";";				saveString = saveString + uls[no].id + '|' + lis[no2].id;			}			}						document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';			}		function initDragDropScript()	{		dragContentObj = document.getElementById('dragContent');		dragDropIndicator = document.getElementById('dragDropIndicator');		dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');		document.documentElement.onselectstart = cancelEvent;;		var listItems = dragDropTopContainer.getElementsByTagName('LI');	// Get array containing all <LI>		var itemHeight = false;		for(var no=0;no<listItems.length;no++){			listItems[no].onmousedown = initDrag;			listItems[no].onselectstart = cancelEvent;			if(!itemHeight)itemHeight = listItems[no].offsetHeight;			if(MSIE && navigatorVersion/1<6){				listItems[no].style.cursor='hand';			}					}				var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');		var uls = mainContainer.getElementsByTagName('UL');		itemHeight = itemHeight + verticalSpaceBetweenListItems;		for(var no=0;no<uls.length;no++){			uls[no].style.height = itemHeight * boxSizeArray[no]  + 'px';			destinationBoxes[destinationBoxes.length] = uls[no];		}				var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');		var itemBox = leftContainer.getElementsByTagName('UL')[0];				document.documentElement.onmousemove = moveDragContent;	// Mouse move event - moving draggable div		document.documentElement.onmouseup = dragDropEnd;	// Mouse move event - moving draggable div				var ulArray = dragDropTopContainer.getElementsByTagName('UL');		for(var no=0;no<ulArray.length;no++){			ulPositionArray[no] = new Array();			ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);				ulPositionArray[no]['top'] = getTopPos(ulArray[no]);				ulPositionArray[no]['width'] = ulArray[no].offsetWidth;			ulPositionArray[no]['height'] = ulArray[no].clientHeight;			ulPositionArray[no]['obj'] = ulArray[no];		}				if(initShuffleItems){			var allItemsObj = document.getElementById('allItems');			var initItems = allItemsObj.getElementsByTagName('LI');						for(var no=0;no<(initItems.length*10);no++){				var itemIndex = Math.floor(Math.random()*initItems.length);				allItemsObj.appendChild(initItems[itemIndex]);			}		}		if(!indicateDestionationByUseOfArrow){			indicateDestinationBox = document.createElement('LI');			indicateDestinationBox.id = 'indicateDestination';			indicateDestinationBox.style.display='none';			document.body.appendChild(indicateDestinationBox);		}					}		window.onload = initDragDropScript;	</script>	</head>		<body>		<table border="1" height=15% width=100% align=centre bgcolor="#cccccc">	<td align=center><h3>Different shaped signs have different meanings.  Place the answer you think offers the best description underneath each sign. Correct answers will highlight in green and incorrect answers will highlight in red.	<br><br>If you get any answers wrong press F5 and have another go!</h3></td>		</table>	<br><br>			<div id="dhtmlgoodies_dragDropContainer">		<div id="topBar">		</div>		<div id="dhtmlgoodies_listOfItems">		<div>				<p>Answers</p>				<ul id="allItems">			<li id="node20" groupId="box1">Information Sign</li>			<li id="node1" groupId="box2">Warning Sign</li>			<li id="node9" groupId="box3">Positive Order</li>			<li id="node21" groupId="box4">Negative Order</li>				</ul>			<form name="button" action="unit1_p2.html">			<input type="submit" value="Next Page">			</form>		</div>		</div>		<div id="dhtmlgoodies_mainContainer"><!-- ONE <UL> for each "room" --><div>		<table border=0 align="right" bgcolor="#c8d0e0">		<tr>		<td>			<table border=0 align=center bgcolor="#c8d0e0">					<tr>					<td align=center><img src="images/no_through_road.jpg" width="90" height="90">						<div>						<p></p>						<ul id="box1">						</ul>						</div>						</td>					<td align=center><img src="images/crossroad.jpg" width="90" height="90">						<div>								<p></p>						<ul id="box2"></ul>						</div>					</td>				</tr>				<tr>					<td align=center><img src="images/ahead_only.jpg" width="90" height="90">						<div>						<p></p>						<ul id="box3">						</ul>						</div>					</td>					<td align=center><img src="images/40mph.jpg" width="90" height="90">						<div>						<p></p>						<ul id="box4"></ul>						</div>					</td>				</tr>			</table>		</td>	</tr></table></div></div></td><ul id="dragContent"></ul><div id="dragDropIndicator"></div><div id="saveContent"></div></body></html>

If I run this in IE it is ok but in Firefox it looks naff ... also different size monitors display it badly too. The four images are just road signs ... I have not included those.i know it must be the css but can't figure out what.Thanks for looking!Paul

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Yikes thats a lot of code. Do you have a link? There are some images there that we won't be able to see.

Link to comment
Share on other sites
khalen Newbie

khalen

Posted
  • Author
Posted
Yikes thats a lot of code. Do you have a link? There are some images there that we won't be able to see.
no i dont have a link because it is not live yet ... i cannot put it live till I finish it which is going to be a long time yet and I cant finish it till I resolve this problem.The images are just four road signs that could be any images for the purpose of seeing the problem. I could include the images if you like.If you read my original post ... I did ask if anyone could take a zip file of this so they could load it it into an editor and see what i am seeing. If I knew where the problem was I would post just that portion of the code but I dont. I am really sorry about the amount of code but I think it is in the css that is causing the problem. The other file is mostly drag and drop code.
Link to comment
Share on other sites
khalen Newbie

khalen

Posted
  • Author
Posted
Alrigth maybe a zip file would be good...
Synook ... now I know what a 'devoted member' means. thanks a million. Now, I cant see how I attach it to a post so is there an email address I can send it to?Paul
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...