Log in

View Full Version : question...



ebryan
09-21-2007, 11:49 PM
I just started creating web pages in dreamweaver... i created a website www.firststepsagencyonline.com/index1.html.

I created gray panels on both sides of the page, but the problem is that when the website is viewed with different settings and browsers, the gray is either perfect, not filling the extra space, or filling to much...

Can someone help me?

Thank you,
Bryan

TimFA
09-22-2007, 12:34 AM
I'm somewhere where I cannot view your site, please post your code. Best I can figure form here is that you need to use percentages. around 15% will most likely do it. Then you also need to take whatever is in the middle (the table, DIV) and find its correct percentage which 70% should do if I'm understanding you correctly. Unless there is only text. To help you more I need the HTML and any external CSS.

Also please read: http://www.dynamicdrive.com/forums/showthread.php?t=24866, what applies is please use a descriptive title.

Rockonmetal
09-22-2007, 12:36 AM
Yeah i see a little unequal spacing for the gray area on the left... I'll check your css code to see whats going on...

Rockonmetal
09-22-2007, 12:40 AM
Ooooooo... i see whats going on... its all <div> tags...you should either do two things:
1. Convert all or most *mainly outside ones* to table tags.
2. Put a table around the whole page with the following code:

<table style="width:581px; align: center;" cellpadding="0" cellspacing="0" border="0">
<!--the stuff of your page *all the <div> tags* goes here -->
</table>

That should work...

TimFA
09-22-2007, 12:41 AM
Ooooooo... i see whats going on... its all <div> tags...you should either do two things:
1. Convert all or most *mainly outside ones* to table tags.
2. Put a table around the whole page with the following code:

<table style="width:581px; align: center;" cellpadding="0" cellspacing="0" border="0">
<!--the stuff of your page *all the <div> tags* goes here -->
</table>

That should work...

Ahhh. I can't see code so I had no clue. :p He could also put a DIV around it all could he not? Thats what I do. Correct me if I'm wrong, so I can remove it. Don't want bad tips.

EDIT: He would need "margin: auto;" (for the DIV), and "text-align: center;" (on the BODY tag). If he wanted to not center text in one, just specify text-align inside those.

ebryan
09-22-2007, 12:51 AM
thank you for all your help. i am in the process of learning, so any help would be great! thank you, bryan


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First Steps Agency - New York State Early Intervention Program</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_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_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>
<style type="text/css">
<!--
.text {
font-family: "Comic Sans MS";
font-size: 14px;
color: #0000FF;
}
.title {
font-family: "Comic Sans MS";
font-size: 18px;
font-weight: bold;
}
a:link {
font-family: "Comic Sans MS";
font-size: 14px;
color: #0000FF;
text-decoration: none;
}
-->
</style>
</head>

<body onLoad="MM_preloadImages('images/2.jpg','images/6.jpg','images/8.jpg','images/10.jpg','images/12.jpg','images/14.jpg','images/16.jpg')">
<div id="Layer6" style="position:absolute; width:581px; height:35px; z-index:5; left: 289px; top: 661px;" class="text">
<div align="center">&copy;2007 First Steps Agency Inc.<a href="http://www.ebryan.net">
Powered by eBryan.net</a></div>
</div>
<div id="Layer8" style="position:absolute; width:1276px; height:18px; z-index:1; left: 0px; top: 697px; background-color: #F3F3F3; layer-background-color: #F3F3F3; border: 1px none #000000;"></div>
<div id="Layer7" style="position:absolute; width:200px; height:115px; z-index:2; left: 632px; top: 344px;"><img src="images/teacher%20(214%20x%20140).jpg" width="214" height="140"></div>
<div id="Layer1" style="position:absolute; width:803px; height:202px; z-index:4; left: 103px; top: 0px;"><img src="images/slice_banner.jpg" width="819" height="216">
</div>

<div id="Layer2" style="position:absolute; width:101px; height:697px; z-index:7; left: 2px; top: -1px; background-color: #F3F3F3; layer-background-color: #F3F3F3; border: 1px none #000000;">
</div>
<div id="Layer3" style="position:absolute; width:170px; height:476px; z-index:6; left: 103px; top: 217px;"><img src="images/1.jpg" width="176" height="24"><a href="index1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/2.jpg',1)"><img src="images/rollover_2.jpg" name="Image3" width="178" height="17" border="0"></a><img src="images/3.jpg" width="176" height="16"><a href="ourservices.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/4.jpg',0)"><img src="images/rollover_4.jpg" name="Image5" width="178" height="17" border="0"></a><img src="images/5.jpg" width="176" height="17"><a href="earlyintervention.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/6.jpg',1)"><img src="images/rollover_6.jpg" name="Image7" width="178" height="33" border="0"></a><img src="images/7.jpg" width="176" height="17"><a href="abaprogram.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/8.jpg',1)"><img src="images/rollover_8.jpg" name="Image9" width="178" height="33" border="0"></a><img src="images/9.jpg" width="176" height="15"><a href="linksforparents.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/10.jpg',1)"><img src="images/rollover_10.jpg" name="Image11" width="178" height="33" border="0"></a><img src="images/11.jpg" width="176" height="17"><a href="therapists.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/12.jpg',1)"><img src="images/rollover_12.jpg" name="Image13" width="178" height="17" border="0"></a><img src="images/13.jpg" width="176" height="16"><a href="careers.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','images/14.jpg',1)"><img src="images/rollover_14.jpg" name="Image15" width="178" height="18" border="0"></a><img src="images/15.jpg" width="176" height="14"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','images/16.jpg',1)"><img src="images/rollover_16.jpg" name="Image17" width="178" height="17" border="0"></a><img src="images/17.jpg" width="176" height="161"></div>
<div id="Layer4" style="position:absolute; width:406px; height:697px; z-index:8; left: 869px; top: 0px; background-color: #F3F3F3; layer-background-color: #F3F3F3; border: 1px none #000000;"></div>
<div id="Layer5" style="position:absolute; width:580px; height:474px; z-index:9; left: 288px; top: 220px;">
<p class="text"><span class="title">About Us</span><br />
<br />
First Steps is a New York State approved Early Intervention program offering
a variety of services including evaluations, special instruction, speech and
language therapy, occupational therapy, physical therapy, service coordination,
family counseling, family training, and psychological services.</p>
<p class="text">First Steps is dedicated to providing children with<br>
developmental delays with the highest quality of <br>
services. We offer particular expertise in the areas <br>
of core evaluations, special instruction services, <br>
social work services, and family training.</p>
<p class="text">First Steps is a parent friendly, child-oriented <br>
agency.</p>
<p class="text"> The directors or First Steps have a combined total of over
50 years of experience working with children ages birth to 5 who have a variety
of developmental delays. A director is always available to personally address
parental concerns and questions.<br>
<br>
</p>
<p align="center" class="text"><br>
</p>
</div>
</body>
</html>

TimFA
09-22-2007, 01:02 AM
Did you try what Rock said?

EDIT: I think I might see the problem. You customized it for your resolution. You need to go back through and replace all the XXpx with XX%, and size it up for your resolution, for the most part it will look exactly the same in all resolutions, unless images stretch it.

djr33
09-22-2007, 01:03 AM
Forum Rules: http://www.dynamicdrive.com/forums/showthread.php?t=24866

ebryan
09-22-2007, 01:10 AM
how should i setup the %?

I am really learning as i go...

TimFA
09-22-2007, 01:59 AM
Just replace the width and height values (00px) with 1-100% (leave off the px, just "height: 20%;") change it then check until you get it right. If your using a program, the program should have an option between percent of window or something like that.

EDIT: Durrr your using Dreamweaver, my bad.

djr33
09-22-2007, 07:15 AM
I don't see why dreamweaver would matter in regards to that. Change it in the source, or, if you want, use the properties window. But same result.

TimFA
09-22-2007, 05:19 PM
I know, I was making it simple, and said if, then realized he was using Dremaweaver.