PDA

View Full Version : Need help figuring out why page elements aren't lining up


webmom24
06-19-2006, 12:22 AM
I can't figure out why the banner at the top of my page is over a little bit further to the left than all of the other elements on the page. All of the elements are set for a left margin of 20px and everything is the same width (750 px). It also seems like my slide show could be closer to my banner image. The code for this page is pretty long... but I'm copying it below. Thanks for any help :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bennington Project Independence</title>
<style type="text/css">
<!--
#banner_graphic {
position:absolute;
left:20;
top:20;
width:750px;
height:155;
z-index:1;
}
#flash_fma {
position:absolute;
left:20px;
top:175px;
width:750px;
height:150;
z-index:2;
}
#header {
position:absolute;
left:20px;
top:327px;
width:750px;
height:24px;
z-index:3;
background-color: #000099;
}
#center_content {
position:absolute;
left:20px;
top:352px;
width:750px;
height:485px;
z-index:4;
background-color: #FFFFFF;
}
#Layer3 {
position:absolute;
left:634px;
top:616px;
width:38px;
height:2px;
z-index:5;
}
#footer {
position:absolute;
left:20px;
top:837px;
width:750px;
height:24px;
z-index:6;
background-color: #000099;
}
#navigation {
position:absolute;
left:20px;
top:352px;
width:142px;
height:485px;
z-index:7;
background-color: #990033;
}
#photos {
position:absolute;
left:161px;
top:352px;
width:245px;
height:485px;
z-index:8;
background-color: #f7eedf;
}
#text {
position:absolute;
left:407px;
top:352px;
width:363px;
height:485px;
z-index:9;
background-color: #f7eedf;
}
body {
background-color: #7dabef;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="bpi_css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body { text-align:center; color:#CCC; }
#wrapper { text-align:left; width:750px; margin:0 auto;position:relative; }
-->
</style>
</head>


<body ...>
<div id="wrapper">
<div id="banner_graphic">
<div align="left">images/banner_graphic3.jpg</div>
</div>
<div id="flash_fma">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','750','heigh t','150','src','flash_fma2','quality','high','plug inspage','http://www.macromedia.com/go/getflashplayer','movie','flash_fma2' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="150">
<param name="movie" value="flash_fma2.swf" />
<param name="quality" value="high" />
<embed src="flash_fma2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed>
</object>
</noscript></div>
<div id="header"></div>
<div id="center_content"></div>
<div id="footer"></div>
<div id="navigation">Home (www.google.com) Activities (activities.html) Services (services.html) Calendar of Events (events.html) About Us (about.html) Our New Home (new_home.html) Support Us (support.html) Contact Us (contact.html)</div>
<div id="photos">
<div align="center">
<p class="caption_txt">



images/homepage_photosample2.jpg

A visit to a local horse farm</p>
<p class="caption_txt">images/horse.jpg

A visit to a local horse farm

</p>
</div>
</div>
<div id="text">


<span class="bold">Bennington Project Independence</span> has been helping families keep loved ones at home and in the community for more than 25 years. Bennington Project Independence is a not-for-profit agency that provides cost-effective quality Adult Day Care and Day Health Rehabilitation Services for adults over 18 facing physical and mental challenges, including Alzheimer's Disease and frailties associated with aging.



The professional staff of Bennington Project Independence are here to help share the care.



BPI is for adults who need:</p>
<ul>
<li class="bulleted_list">Nursing Care
<li class="bulleted_list">Medication Administration
<li class="bulleted_list">Assistance with Daily Living Skills (eating, walking, toileting, bathing)
<li class="bulleted_list">Restorative Therapy Assistance
<li class="bulleted_list">Social Interaction and Recreation
[/list]


BPI is for families who need:</p>
<ul>
<li class="bulleted_list">A break from the caregiving role
<li class="bulleted_list">To go to work
<li class="bulleted_list">To take care of other life responsibilities
[/list]
</div>
</div>
</body>

</html>

dthomsen8
06-19-2006, 01:55 AM
It is customary to post code here by using the "Code" feature in the "Message body" line when you post a message.

Have you put this page up on a web site? If so, provide the URL.

If not, I will wait for someone else to copy the code and try it out. That may be difficult, since we don't have the graphics specified in your code, and will have to use placeholders instead.

One problem with margins and padding is that MS Internet Explorer and Firefox and Netscape do not handle them the same way. If you fix a problem with IE, you may hear from other users that it is broken in Firefox, or Netscape, or Opera, or Safari (Mac).

What brower are you using for testing?

webmom24
06-19-2006, 02:11 AM
Sorry about that... so I hit the code button then copy the code in?

I used Netscape 7.2, IE 6 and Firefox to test - the alignment problem happens with all of them. I have not yet put the page up anywhere. I could load it to my site in a folder for testing. Let me see if I can do that and I'll get back to you.

webmom24
06-19-2006, 02:59 AM
Okay... I have the page uploaded. Here it is...

http://www.stadnikdesigns.com/bpi/

aimee
06-26-2006, 02:26 AM
Hi Webmom,
I checked out your URL and everything lines up perfectly on the left in my browser. (IE 6.0) And, I think the site looks great! I like the little slide show on the Home page. It adds a nice touch of interactivity for the viewer. Good work!

webmom24
06-26-2006, 12:11 PM
Thanks Aimee - When I originally posted the question things weren't lining up properly. I still don't know why but I guess it had something to do with absolute positioning. I removed those elements, had everthing "float: left" and enclosed it all in a wrapper to center it and voila... tips I ended up getting from the Dreamweaver forum at Adobe. I've had a number of minor glitches getting this site to a point where I could flesh it out and run with it. Boss looked at it Friday and loved it - now I just have to put the rest of the pages together, final review and go live :). Lots of hard work... steep learning curve LOL :)

Maureen

aimee
06-26-2006, 06:47 PM
Hi Maureen,
The learning curve is amazingly steep! LOL Just when I think I have something figured out I realize that the subject is much more complex and in-depth than what I thought. But, it's fun and I'm having a blast! :) I love your site. It's going to be really great!