Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Ap Divs Messing Up


  • Please log in to reply
9 replies to this topic

#1 Ninjax

Ninjax

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Local time:07:34 PM

Posted 15 September 2008 - 01:36 AM

This is really giving me a headache. Right now I'm making a whole site with AP divs and when I preview it and when I like at it in Dreamweaver's design function they look much different.

Heres my website in dreamweaver: http://img237.imageshack.us/my.php?image=dwap9.png
Now heres my website in Firefox: http://img206.imageshack.us/my.php?image=firefoxvb2.png

Here's some of my code:

background-color: #cccccc;
background-image: url(mywebsiteslicedback.png);
background-repeat: no-repeat;
background-position:top center;
div#myAP {
width:800px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-400px;

BC AdBot (Login to Remove)

 


#2 SLR722

SLR722

  • Members
  • 4 posts
  • OFFLINE
  •  
  • Local time:01:34 AM

Posted 15 September 2008 - 08:23 AM

Please attach your full code.

Source code to CSS and xHTML please.

Also in CSS use px with px (pixels) rather than having pixels and percentiles (%)

Your code to xHTML should cross reference to CSS

Example

<div class="header">
Hello
</div>

And CSS would reflect the reference making the text bold.

.header {
text-decoration: bold;
}

#3 Ninjax

Ninjax
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Local time:07:34 PM

Posted 15 September 2008 - 09:42 AM

Hey SLR722, I didn't understand a single word of that. Could you tell me how to do it please?
Thanks.

Edited by Ninjax, 15 September 2008 - 10:16 AM.


#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:34 PM

Posted 15 September 2008 - 10:02 AM

And as was already stated, we can't really do much unless we can see all of the code.

#5 Ninjax

Ninjax
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Local time:07:34 PM

Posted 15 September 2008 - 10:30 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mywebsitelayered</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	background-color: #cccccc;
	background-image: url(mywebsiteslicedback.png);
	background-repeat: no-repeat;
	background-position:top center;
div#myAP {
	width:800px;
	height:600px;
	position:absolute;
	top:0%;
	left:0%;
	margin-top:-300px;
	margin-left:-400px;

} 
#apDiv1 {
	position:absolute;
	width:2px;
	height:0px;
	z-index:1;
	left: 972px;
	top: 666px;
}
#apDiv2 {
	position:absolute;
	width:180px;
	height:16px;
	z-index:1;
	left: 283px;
	top: 392px;
}
#apDiv3 {
	position:absolute;
	width:504px;
	height:158px;
	z-index:1;
	left: 375px;
	top: 56px;
}
#apDiv4 {
	position:absolute;
	width:1px;
	height:34px;
	z-index:2;
	left: 932px;
	top: 32px;
}
#apDiv5 {
	position:absolute;
	width:0px;
	height:1px;
	z-index:3;
}
#apDiv6 {
	position:absolute;
	width:0px;
	height:30px;
	z-index:4;
	left: 888px;
	top: 32px;
}
#apDiv7 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
#apDiv8 {
	position:absolute;
	width:2px;
	height:0px;
	z-index:5;
	left: 844px;
	top: 32px;
}
#apDiv9 {
	position:absolute;
	width:515px;
	height:183px;
	z-index:6;
}
#apDiv10 {
	position:absolute;
	width:267px;
	height:22px;
	z-index:6;
	left: 284px;
	top: 160px;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #80bb26;
	font-weight: bold;
}
#apDiv11 {
	position:absolute;
	width:452px;
	height:201px;
	z-index:7;
	left: 281px;
	top: 183px;
}
.style2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
#apDiv {
	position:absolute;
	width:227px;
	height:17px;
	z-index:6;
	left: 748px;
	top: 160px;
}
#apDiv12 {
	position:absolute;
	width:6px;
	height:82px;
	z-index:8;
	left: 748px;
	top: 165px;
}
#apDiv13 {	position:absolute;
	width:227px;
	height:17px;
	z-index:6;
	left: 748px;
	top: 160px;
}
#apDiv14 {
	position:absolute;
	width:691px;
	height:176px;
	z-index:9;
	left: 281px;
	top: 419px;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
#apDiv15 {
	position:absolute;
	width:692px;
	height:131px;
	z-index:10;
	left: 281px;
	top: 468px;
}
#apDiv16 {
	position:absolute;
	width:184px;
	height:43px;
	z-index:11;
	left: 280px;
	top: 596px;
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}
#apDiv17 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:12;
	left: 17px;
	top: 124px;
}
-->
</style>
&lt;script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
	if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
	  img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
	  if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
	  nbArr[nbArr.length] = img;
	  for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
		if (!img.MM_up) img.MM_up = img.src;
		img.src = img.MM_dn = args[i+1];
		nbArr[nbArr.length] = img;
	} }
  } else if (event == "over") {
	document.MM_nbOver = nbArr = new Array();
	for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
	  if (!img.MM_up) img.MM_up = img.src;
	  img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
	  nbArr[nbArr.length] = img;
	}
  } else if (event == "out" ) {
	for (i=0; i < document.MM_nbOver.length; i++) {
	  img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
	nbArr = document[grpName];
	if (nbArr)
	  for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
	document[grpName] = nbArr = new Array();
	for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
	  if (!img.MM_up) img.MM_up = img.src;
	  img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
	  nbArr[nbArr.length] = img;
  } }
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('navbuttons/homeover.png','navbuttons/feedbackover.png','navbuttons/getinvolvedover.png','navbuttons/contactusover.png','buttons/tipsover.png','buttons/howover.png','buttons/shopover.png')">
<div id="apDiv11">
  <div align="center" class="style2">Do you want to help save the Earth? But is recycling too hard for you? Don't worry, you've come to the right place, because we're going to make recycling effortless for you! With a few simple steps, you could be making a big difference!<br />
	We&rsquo;ve also put up a store, so you can purchase eco friendly stationary which is cheaper than products which are being sold in stores. We also have a huge variety of products which will make recycling even easier!</div>
</div>
<div id="apDiv3">
  <table width="133" height="84" border="0" cellpadding="0" cellspacing="0">
	<tr>
	  <td>&nbsp;</td>
	</tr>
	<tr>
	  <td>&nbsp;</td>
	</tr>
	<tr>
	  <td>&nbsp;</td>
	</tr>
	<tr>
	  <td>&nbsp;</td>
	</tr>
  </table>
<a href="java script:;" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','navbuttons/homeover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="navbuttons/home.png" alt="" width="80" height="19" border="0" id="Home" onload="" /></a><a href="java script:;" target="_top" onclick="MM_nbGroup('down','group1','Feedback','',1)" onmouseover="MM_nbGroup('over','Feedback','navbuttons/feedbackover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="navbuttons/feedback.png" alt="" border="0" id="Feedback" onload="" /></a><a href="java script:;" target="_top" onclick="MM_nbGroup('down','group1','getinvolved','',1)" onmouseover="MM_nbGroup('over','getinvolved','navbuttons/getinvolvedover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="navbuttons/getinvolved.png" alt="" border="0" id="getinvolved" onload="" /></a><a href="java script:;" target="_top" onclick="MM_nbGroup('down','group1','contact','',1)" onmouseover="MM_nbGroup('over','contact','navbuttons/contactusover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="navbuttons/contactus.png" alt="" border="0" id="contact" onload="" /></a></div>
<div id="apDiv4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Tips','','buttons/tipsover.png',1)"><img src="buttons/tips.png" width="41" height="41" border="0" id="Tips" /></a></div>
<div id="apDiv6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('How','','buttons/howover.png',1)"><img src="buttons/how.png" width="41" height="41" border="0" id="How" /></a></div>
<div id="apDiv8"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shop','','buttons/shopover.png',1)"><img src="buttons/shop.png" width="41" height="41" border="0" id="Shop" /></a></div>
<div class="style1" id="apDiv10">Welcome to Recycle GB</div>
<div class="style1" id="apDiv">Shop</div>
<div id="apDiv12"><img src="advert.gif" alt="" width="232" height="228" /></div>
<div class="style1" id="apDiv2">We will provide...</div>
<div class="style3" id="apDiv14">
  <div align="center">Recycle GB is working with local councils to provide every <br />
	house in the country with the following equipment:</div>
</div>
<div id="apDiv15">
  <div align="center"><img src="bins.png" alt="" width="620" height="130" /></div>
</div>
<div class="style4" id="apDiv16">
  <div align="center">a black recycling bin for <br />
	general household waste</div>
</div>
</body>
</html>

The distortion happens with all my Dreamweaver websites.

Edited by Ninjax, 15 September 2008 - 10:31 AM.


#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:34 PM

Posted 15 September 2008 - 05:07 PM

Validate your code. You will find that there are some simple errors (such as tag mismatches) that may fix the problem.
http://validator.w3.org/

#7 SLR722

SLR722

  • Members
  • 4 posts
  • OFFLINE
  •  
  • Local time:01:34 AM

Posted 15 September 2008 - 06:29 PM

Get rid of all the CSS and place in an external file
Remove the Javascript and get some DOM from jQuery or AjaxKit or DynamicDrive and again include an external file call
Replace the ID="" and Class="" with '
And use the validator to markup and replace header with xHTML

I have seen the problem though, you need to end several tags and remove the clashing table code. Run the Validator, thats what I was told 5 years ago when I posted code like this. Only way to learn.

#8 Ninjax

Ninjax
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Local time:07:34 PM

Posted 16 September 2008 - 11:20 AM

Ok guys thanks. But I've run into another problem.
How do I make it so that it shows up properly on all computer screens? Because I tried it on a different sized computer screen, and everything was jumbled.

#9 SLR722

SLR722

  • Members
  • 4 posts
  • OFFLINE
  •  
  • Local time:01:34 AM

Posted 16 September 2008 - 11:37 AM

Hello

I need to see the code. It wont work on all screens unless you define FIXED or FLUID.

FIXED means that the resolution is FIXED width so the table is 50% meaning 50% of the window or 450 pixels, for only taking 450pixels of the window

FLUID is covering all screens, all shapes and sizes including mobile/wireless devices

FLUID can be done with width="100%"

So if the table was 100% and height was 100% it would cover the middle and height.

Explosive Entertainment for example you can see the code is using this method, it remains the center, same height on all window resize

#10 Ninjax

Ninjax
  • Topic Starter

  • Members
  • 26 posts
  • OFFLINE
  •  
  • Local time:07:34 PM

Posted 16 September 2008 - 03:27 PM

Thanks, the code is posted above.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users