New Comer (less than 5 posts)
question...
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
Regular Coders
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/s...ad.php?t=24866, what applies is please use a descriptive title.
Senior Coders
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...
Senior Coders
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:
That should work...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>
Regular Coders
Ahhh. I can't see code so I had no clue.Originally Posted by Rockonmetal
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.
Last edited by TimFA; 09-22-2007 at 12:50 AM. Reason: DIV Specifics Forgot
New Comer (less than 5 posts)
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">©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>
Regular Coders
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.
Global Moderator
Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum
New Comer (less than 5 posts)
how should i setup the %?
I am really learning as i go...
Regular Coders
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.
Posting Permissions
Reply With Quote
Bookmarks