Ap div moves in IE

I placed an image in the draw ap div tool and placed it above
a background image. When previewed in IE, the image in the ap div
moved to the left, which is also the edge of the div for the main
content. What am I doing wrong.
Thank you

This is the ap div tag in html: <div
id="apDiv5"><img src="../images/welcome-mate.gif" width="250"
height="105" /></div>
This is the main content area: <div
id="mainContent"><img src="../images/hOUSE.jpg" width="575"
height="553" /></div>
This is the css code: .thrColFixHdr #mainContent {
float: right;
margin-left: 5px;
width: 575px;
height: 553px;
margin-top: 5px;
color: #000033;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
background-image: none;
#mainContent {
height: 553px;
width: 565px;
overflow: auto;
The page is from a template that I am using for all my pages.
The ap div is acting as if it was just a div and align left
for the width.
The only thing that is right about the ap div is that it
stays in place in relation to the height. I hope this makes sense.
Thanks for the help.

Similar Messages

AP Div "Moves" in Different Browsers

(The site in question is at www.yankee-lake.org) In a
template file, I have a layout table, within the first cell of
which is a jpg image as my page banner. I want a flash movie to
"float" above the jpg banner, and appear to be framed by the jpg
image. I used an AP div to contain the flash movie. If I position
the AP Div so that the movie is positioned correctly in Internet
Explorer, then it does not display properly in FireFox, Safari,
Opera, Camino, Chrome. Conversely, if I position the AP Div to
display properly in the other browsers, then the movie is not in
the proper position when viewed in Internet Explorer.
I think that the problem is that Internet Explorer uses a
different amount of space between left and top edges of the
viewport and the first elements of the web page, than the other
browsers. And, since the AP div is absolutely positioned within the
viewport, I get this anomalous behavior. But, I don't know how to
fix it.
If I use relative positioning, then I don't know how to
"layer" the movie to float above the banner graphic.
Thanks in advance for any assistance you can provide.
Brad

The AP Div is not moving. It's the rest of your content that
is moving.
Add this to your CSS -
body { margin:0; padding:0; }
and then locate the Flash div as desired.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"LinkDoctor" <[email protected]> wrote in
message
news:gd89tv$lqu$[email protected]..
> (The site in question is at www.yankee-lake.org) In a
template file, I
> have a
> layout table, within the first cell of which is a jpg
image as my page
> banner.
> I want a flash movie to "float" above the jpg banner,
and appear to be
> framed
> by the jpg image. I used an AP div to contain the flash
movie. If I
> position
> the AP Div so that the movie is positioned correctly in
Internet Explorer,
> then
> it does not display properly in FireFox, Safari, Opera,
Camino, Chrome.
> Conversely, if I position the AP Div to display properly
in the other
> browsers,
> then the movie is not in the proper position when viewed
in Internet
> Explorer.
>
> I think that the problem is that Internet Explorer uses
a different amount
> of
> space between left and top edges of the viewport and the
first elements of
> the
> web page, than the other browsers. And, since the AP div
is absolutely
> positioned within the viewport, I get this anomalous
behavior. But, I
> don't
> know how to fix it.
>
> If I use relative positioning, then I don't know how to
"layer" the movie
> to
> float above the banner graphic.
>
> Thanks in advance for any assistance you can provide.
>
> Brad
>

Div moves down when window is resized

Hello,
Here's my problem: When I resize my browser window the main div is resized up until a certain point when it just falls below all of the other content.
How can I prevent this from happening? I have both the top and bottom div's set to auto width, so I can't figure out whats going wrong.
Here's the website if you want to see for yourself: www.hondovfd.org
Here's some code from my template file:
<!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=UTF-8" />

<title>Untitled Document</title>

<meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
<meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
<link href="../stylesheet1.css" type="text/css" rel="stylesheet" />

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColLiqHdr">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<h3>Navigation : </h3>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="/index.php">Home</a></li>
<li><a href="/support.php">Support Hondo</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
    <ul>
      <li><a href="/people.php">Our People</a></li>
      <li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
      <li><a href="/medical.php">Medical</a></li>
      <li><a href="/apparatus.php">Apparatus</a></li>
      <li><a href="/training.php">Training</a></li>
      <li><a href="/volunteer.php">Volunteer</a></li>
      <li><a href="/statistics.php">Statistics</a></li>
      <li><a href="/patchtrading.php">Patch Trading</a></li>
    </ul>
</li>
<li><a href="/gallery2/main.php">Photo Gallery</a></li>
<li><a href="/calendar.php">Calendar</a></li>
<li><a href="/news.php">Blog/News</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<span class="lefttext">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8567201">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
</img></input></input>
</span>
</form>
<span class="lefttext"><br />
</span>
<center>
<span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
</center>
</div>
<div id="sidebar2">
    <p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
    <a href="/membersonly/register.php">Register</a></p>
    <p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
    <p>Call Statistics as of:<br />
    <?php
$myFile = "/home/hondovf1/public_html/membersonly/month.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?><?php
$myFile = "/home/hondovf1/public_html/membersonly/date.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></p>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
    <td width="60%">EMS Calls</td>
    <td width="40%"><?php
$myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
    <td>Fire Calls</td>
    <td><?php
$myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
    <tr>
    <td>Other Calls</td>
    <td><?php
$myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
</table>
<hr />
     
    <div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
    var googleNumSearchResults = 5;
     var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
    customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
     
</div>

<div id="mainContent">
<div class="topleft"></div><div class="top"><div class="topright"></div></div>
<div class="wrap">

    <table width="95%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="47" class="h2">Header</td>
      </tr>
      <tr>
        <td>Text Goes Here!</td>
      </tr>
    </table>

</div><br class="clearfloat" />
<div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
</div>
</div>
</div>
     <br class="clearfloat" />
<div id="footer">
    <p align="center">© Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
</div>
</div>
<script type="text/javascript">

</script>
<?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
</body>
</html>
And here is my CSS file:
body {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     width: auto;
     color: #333333;
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
     background-image: url(images/main-right.png);
     background-repeat: repeat-y;
.thrColLiqHdr #container {
     width: 95%; /* this overrides the text-align: center on the body element. */
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
     height: auto;
     background-image: url(/images/halftone1.png);
.thrColLiqHdr #header {
     padding: 0 10px;
     height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
     background-image: url(images/header.jpg);
     background-repeat: no-repeat;
     background-position:center;
     border-bottom-width: 5px;
     border-bottom-style: solid;
     border-bottom-color: #000;
.thrColLiqHdr #navbar {
     height:45px;
.thrColLiqHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.thrColLiqHdr #sidebar1 {
     float: left; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 15%; /* top and bottom padding create visual space within this div */
     height: 100%;
     padding-top: 15px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar2 {
     float: right; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 15%; /* top and bottom padding create visual space within this div */
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar3 {
     float: right; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 275px; /* top and bottom padding create visual space within this div */
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
     margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
     margin-right: 10px;
     text-align: center;
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.thrColLiqHdr #mainContent {
     margin-top: 10px;
     margin-bottom: 10px;
     float: left;
     width: 65%;
     background-image: url(images/main-right.png);
     background-repeat: repeat-y;
     background-position: right;
.h2 {
     color: #B4241B;
     font-size: 20px;
     letter-spacing: -2px;
     font-weight: 100;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     line-height: normal;
.thrColLiqHdr #footer {
     text-align: center;
     color: #666;
     font-size: 11px;
     padding: 10px;
     background: #f7f7f7;
     border-top: 1px solid #aaa;
     width: auto;
.thrColLiqHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.topleft {
     height:22px;
     width:19px;
     background-image:url(images/top-left.png);
     float: left;
.top {
     height:23px;
     background-image: url(images/top.png);
     background-repeat:repeat-x;
     width: auto;
.topright {
     height:22px;
     width:28px;
     background-image:url(images/top-right.png);
     float: right;
.textarea{
.wrap{
     text-align: justify;
     padding-right: 40px;
     padding-left: 40px;
     background-repeat: repeat-y;
     float:left;
     background-image: url(images/main-left.png);
     width: auto;
     clear: left;
.wrapright {
     width:4px;
     background-image:url(images/main-right.png);
     background-repeat: repeat-y;
     float: right;
.bottomleft {
     height:22px;
     width:19px;
     background-image:url(images/bottom-left.png);
     float: left;
     clear: left;
.bottom {
     height:23px;
     background-image: url(images/bottom.png);
     background-repeat:repeat-x;
     width: auto;
.bottomright {
     height:22px;
     width:27px;
     background-image:url(images/bottom-right.png);
     float: right;

That's one of the problems with liquid (%) based layouts. In your default.css file, replace the top 2o selector rules with the following:
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    margin:0;
    padding:0;
    background: url(images/main-right.png) repeat-y;
.thrColLiqHdr #container {
    width: 95%;
   min-width: 870px; /**keep page from collapsing**/
    margin:0 auto;
    background: url(/images/halftone1.png);
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

How do I make sidebar div move with the content div in Firefox 14?

Hello,
The sidebar div blocks the content div in Firefox 14 when the browser window is resized smaller. In other browsers, this is not a problem.
The website url is: www.gaddislaw.com
Thanks for your help!

I assume you want the main content text to be 'flexible' i.e., narrow and widen when you alter the size of the browser window. If so amend your 'content' css to as below:
.content {
padding-top: 25px;
padding-bottom: 10px;
margin-left: 290px;
margin-right: 40px;

Floating divs of different heights

I have a layout that a client requires that is 3 columns wide
I am trying to set it up with floating divs and the divs have different heights.
What is the best way to lay this out and is it possible to use Edge Reflow to do this as when I lay out the divs at my starting resolution and then start to change it for media queries the divs move from their starting positions.
Hope it clear what I'm trying to achieve.
Would I be better using Dreamweaver to do this than edge reflow?

I think you are expeciencing someting similar to this user's post:
http://forums.adobe.com/message/5542351#5542351
We are looking at solutions, and it definitely helps us to understand how users experience the problem.

Template- container div background not expanding with page

Hello! Still fairly new to Dreamweaver. I'm building a website using a template I made. Theres one problem I can't figure out... I've created my "container" div and I'm using a style to add a background to this div. I have all my other divs inside the container. The problem I'm running into is that with pages of different lengths, the background doesn't expand to fill the rest of the page. As my content div (editable region) expands with more content, and my footer div moves down as it should, the background image just cuts off where it ended in the template. I created the background in photoshop, and I know for a fact that it's long enough to handle the lengthy pages. It's not a matter of the background image not being long enough, its just as the content div expands bigger than the template, it doesn't fill the entire container div.
So far my only solution is to make sure the template is tall enough to handle the longest page, and the shorter pages just have the added space below the content. I dont really want to do this, but I will if I have to. I hope I was clear enough, if you need screenshots or need to see the code I can post it. Thanks in advance for your help!
Justin

Unfortunately I dont have a server yet, I realize that would be easiest and I apologize.
I tried adding the repeat-y like you said, and it didn't make any difference. I also went into the style and chose repeat-y from the dropdown box and it added
background-repeat: repeat-y;
and that didnt work either. I may not have explained it well enough, in my template.dwt page the background works exactly as it should, it expands with the page. But after I created the new pages using this template, then expanded the content in the editable region, thats when the container background doesn't expand to fill the page. It's stuck at the point I saved it in the template. I dont want the entire background showing all the time, on the shorter pages I want it to only go to the bottom of the content. Does that make sense?
Thank you

AP DIV problems

Hi, im inserting a AP DIV onto a page, but the posistion I
put it moves an inch to the left when I save and view the page.
For example;
http://www.ldnwrestling.com/index2.html
Now when I save the page, the AP DIV is in the black box, and
the wrestler is as well. Yet when I save and view the page, the
Wrestler and I assume the AP DIV move an inch to the left. This is
driving me nuts! Can anyone help me and tell me what im doing
wrong?
Code is also atached for whole webpage.
Many thanks

> Alas, it did not help me.
We would have to see what you did to know what you did
incorrectly. Can you
show us the page where you made these changes?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"jcchappy" <[email protected]> wrote in
message
news:ftrpi9$a78$[email protected]..
> Hi Osgood,
> Thanks. I found this solution by "Murray" on a prevuios
post;
>
> Change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> 
> </style>
> </head>
>
> change this -
>
> <body ...>
>
> to this -
>
> <body ...>
> <div id="wrapper">
>
> and this -
>
> </body>
>
> to this -
>
> 
> </div>
> </body>
>
> and see if that helps.
>
> Alas, it did not help me. But one thing I want to check
- the webpage im
> trying it on is based on a template. Thus, I tried the
above on the
> template
> itself. It didn't work. So I tried taking a page based
on the template,
> and
> then appying the code within the editabe region. No
luck,
> Any ideas?
>
> Thanks
>

Firefox 12+ Issue with Dragging rotated div

On a div with text, i have double click event which rotates the div by 90 degrees and a drag event which lets the user to move the div around, with in its parent. Dragging normal text div works perfectly fine. I have problem when it's rotated 90 degrees or -90 degrees. There is slight shift in the div before it starts moving along with the mouse.
Here is an example of what I am talking about.
http://jsfiddle.net/shore_haritha/sf43B/
I have this issue from firefox 12 through the latest version. When I looked at the Change log for Firefox 12 this is what I found.
"The element.getBoundingClientRect() method now considers effect of CSS transforms when computing the element's bounding rectangle."
Does anyone have an idea what is going on here? Any help would be appreciated.

Hello,
I tried to recreate the issue you mentioned in the JSFiddle. To confirm, the issue is when the div is at 90 degrees and when you try to move this using the mouse (select the div and move), only at this stage does the div move a bit to the right and only then can you move it. The same issue doesn't happen when the div is horizontal (180 degrees). Did I get that right?
P.S: I tried to record the issue, but for some reason, I couldn't record the moving div using the recording tool.
Thank you

Dreamweaver CS3 Div Alignment Problems.

I have been building a website on my new MacBook. I have it
just about done so I uploaded it to my web host to check out the
appearance. It looks great on my Mac, but I checked it on my
parents PC and it looked terrible. Being a new Mac user, I thought
it was something going on with the operating systems, but I checked
it on a Mac deskop and the alignment was still messed up. On the
Mac desktop it is too far to the left and on the PC it is too far
to the right. This is the link to the site:
http://www.potomacsouth.com/Home.html
You can click View>Source to see the code.
I noticed if you drag the window to a different size the
images behind the div move, but the div stays in place. Is there
some kind of code or something that I can do to make it stay in the
designated area on every computer regardless of settings?
Thanks.

evansdb78 wrote:
> I noticed if you drag the window to a different size the
images behind the div
> move, but the div stays in place. Is there some kind of
code or something that
> I can do to make it stay in the designated area on every
computer regardless of
> settings?
Thats because you are using Absolutely Positioned
<divs> so they stay...
well.... Absolutely Positioned i.e., they WILL NOT move as
you increase
or decrease the width of the browser window.
Solution:
Open your page and go to code view
FIND THIS PIECE OF CODE:
<div align="center"><img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832" height="558" /><br />
CHANGE IT TO:
<div style="position: relative; width: 832px; margin: 0
auto;">
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND YOUR ABSOLUTELY POSITIONED <DIV> CODE:
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Marys City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our Contact Us
link.</p>
</div>
MOVE IT TO DIRECTLY BETWEEN THE TWO LINES OF CODE YOU
ORIGINALLY
CHANGED. SO IT LOOKS AS BELOW:
<div style="position: relative; width: 832px; margin: 0
auto;">
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Marys City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our Contact Us
link.</p>
</div>
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND THE 'apDiv2' CSS IN THE HEAD SECTION OF YOUR PAGES
CODE AND
CHANGE THE 'LEFT' AND 'TOP' POSITIONING AS BELOW.
#apDiv2 {
position:absolute;
width:315px;
height:358px;
z-index:1;
left: 70px;
top: 160px;
overflow: auto;
THATS IT. IT SHOULD NOW MOVE AS YOUR BACKGROUND IMAGE MOVES

AP Div Problem ?

After extensive reading and experimenting - I have finally completed my website - and it has been published!
I needed to place images exactly where I required them - not the standard Left/right/absolute etc! I then discovered AP DIV's and what a pleasure. My pages previewed perfectly on my computer using Internet Explorer as my browser. I showcased my new website to my wife on her laptop - and was hoorified to find that all of the images which were placed in AP Div's had moved and were now placed over text!
I have ascertained that this results from our different display settings (1024x768 vs 1280x768). Please save my sanity by advising how I can get around this problem. My site uses the 2 Column, Header & Footer, Liquid layout (one of the standard layouts) - can this possibly have something to do with the problem?
Thanks

Roy Marnewick wrote:
Hi Osgood
Many thanks for your rapid response.
I am part of the way there in understanding your proposed solution.
However - I understand basics only at this stage, and get by by
experimentation to achieve what I need. You have mentioned a "container" -
which I have seen mentioned in various documentation but do not understand
exactly what it is - or how I place one in my document!
I would be most grateful if you could :
1. tell me what it is?
2. how do I place a container in the document?
3. how do I set the relative position?
As a side issue - if these AP divs float around - how are they used usefully
if not placed in a container - or are they always meant to be in a
container?
Regards
Roy
1) A container is just a box on your page, could be a <div> or something else, a table cell, a paragraph etc.
2) You will already have many containers in your document.
3) To set the containers position to relative use css:
position: relative;
Example:
<div id="content">Some content here</div>
Set its position to relative with css:
#content {
width: 750px
margin: 0 auto;
position: relative;
Now if you want to use an AP <div> and have that AP <div> move along with the content when the browser window is widened or narrowed you have to insert the AP <div> inside the relatively positioned container,
<div id="content">
<div id="fixed">This AP <div> takes its co-ordinantes from the top left of the content box</div>
Some content here
</div>
The css:
#fixed {
position: absolute;
left: 50px;
top: 150px;
AP <divs> are really quite useless apart from the odd ocassions (like the above example) and maybe the most simplest of site constructions

CSS Align right problem

Hi
I am using the following css to align a div to the right hand
side of the
page:
#headerRight { RIGHT: 10px; MARGIN-RIGHT: 0px; POSITION:
absolute; TOP: 5px;
align: right; border: 0; width: 235px;}
The above seems to work well, except for one small annoying
problem. If the
content of the page is wide and causes the horizontal scroll
bar to appear,
then the div seems to work as it appears 10px from the right
side of the
window. However if I move the horizontal scroll bar over to
the right, then
the div doesnt move accordingly.
If I then resize the browser window, then the div moves and
always lines up
10px from the edge no matter what size the window is.
Anyone know where I am going wrong, or need any more
information?
Thanks
Brendan
Rate your experiences with your UK and Ireland builders at
http://www.ratethebuilder.co.uk
=========================================

Solved the problem by using the following javascript code:
function scrollDetect(){
document.getElementById("headerRight").style.left =
document.body.clientWidth - 245 + document.body.scrollLeft;
setInterval("scrollDetect()", 500);
Where 245 is the width of the div.
Only problem is that the code probably isnt cross browser at
the moment, but
I'll work on that.
Thanks again for all your help.
Rate your experiences with your UK and Ireland builders at
http://www.ratethebuilder.co.uk
=========================================
"RateTheBuilder" <[email protected]>
wrote in message
news:[email protected]...
> Osgood
>
> Sorry, would love to post a url, but content is
sensitive.
>
> Basically I have a div which stretches the width of the
page which
> contains the header details. Then on top of this div but
to the very right
> of the page I have a div that I have absolute
positioning set. This div
> must remain the set distance from the right of the
screen (10px) even when
> the user is scrolling horizontally.
>
> Thanks for your time so far and I hope I've shed a
little more light.
>
> Brendan
> ______________________________________________
> Rate your experiences with your UK and Ireland builders
at
>
http://www.ratethebuilder.co.uk
> =========================================
>
> "Osgood" <[email protected]> wrote in
message
> news:[email protected]...
>> RateTheBuilder wrote:
>>
>>> Osgood
>>>
>>> There is no content on the same level as the div
to the right, but the
>>> content below the div may extend the width of
the page. There are other
>>> divs on the same level as the one I want to keep
right and I have the
>>> problem div above them, so that is why I used
absolute positioning.
>>
>> Sorry i'm lost.
>>
>> You say you have no content on the same level as the
div to the right and
>> then say there are other divs on the same level as
the one you want to
>> keep right?
>>
>> Can you post a url to the page in question?
>>
>
>

[Spry Effects] Dynamic Width

Hi,
I have a question about the blind Effect, the effect works
superb but there is one little problem, the div block i use it on
is of an dynamic width, this means if the site is resized to an
smaller resolution the div moves with it. If i use the blind effect
on the div i can't resize it any more, the width has a fixed length
an will go out of the screen if the browser is resized.
Does anybody has an idea if this is changeable, or is it not
possible?
Regards.

Hi UserXyX,
I'm guessing you can get around the problem by using an
onPostEffect observer and resetting the width of the element you
were blinding to "auto" or "". (example: ele.style.width = "auto";)
You can see an example that uses an effects observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
--== Kin ==--

H.264 High Profile 5.1 possible?

Hi
Do you think it will anytime be possible to play h.264 in high profile 5.1 on AppleTV?
Dive

.mov works...
try this file... Dolby Digital 5.1 in a .mov container. VisualHub will supposedly be adding this ability to there outputs...
http://uploaded.to/?id=yqshmu

How do I move multiple Divs at a time?

Hi,
I can't seem to figure out how I move multiple Divs at a time. I have resized certain Div in the middle and now I have to move all the Divs that are below it up to align it with that certain div again. How do I select and move all the Divs in once? I know you can move them one at a time by changing the position in the properties or just drag them in the design view, but I have a fairly large amount of Divs.
Thanks in advance,
EC

but is there any other way? Like changing something in the properties that will make the Divs bump up to the Div aoove that when you remove one out of there
I'm afraid not.
I imported the whole site as divs by splitting the images in photoshop and saving it for web and devices.
This is approach is OK for quick comps to show a client but definitely NOT suitable for a production site. As soon as you attempt to edit your layout, the page will explode and fall apart. This is caused by the rigid/fragile code that graphics apps attempt to generate based on the images sizes.
Start over. Use graphics apps to slice and optimize images only.
Use DW to build your HTML and CSS code.
Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Adobe Developer's Center - Getting Started tutorials
http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted
Using DW Page Properties to create a basic CSS style sheet
http://kb2.adobe.com/community/publishing/505/cpsid_50576.html
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

AP Divs (layers) move when I open my website on different window size.

First of all, this is my first time trying to make a website.
I'm doing an assignment for my class and i found it difficult for me to fix. I have spend 4-5 hours researching online but nothing work for me.
Well,the problem is the AP Divs (layers) move when I open my website on different window size(iphone,ipad).
The website only look right on 1366 x 786 resolution. Please take a look at my 2 pics below:
And I don't know how to make the website to fit on the iphone and ipad so that I don't have to scroll down or sroll to the right to view the whole thing.
Please someone help me!
The code:
<!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=utf-8" />
    <meta name="viewport" content="width=device-width" />
<title>Boston Green Community College</title>
<style type="text/css">

</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="Pictures/34d-1.png" alt="Insert Logo Here" name="Insert_logo" width="619" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
    <div id="apDiv11"><font color="#f4f1f1">
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script></font>
</div>
    <div id="apDiv1">


<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
                              </div>
                                </div>
<div class="content">
    <center><img src="Pictures/DFDF11.png" width="959" height="556" longdesc="Pictures/junior-2-960x.jpg" /></h1></center>
</div>
<div class="footer">
     <img src="Pictures/RRR1.png" width="202" height="70" />
     <div id="apDiv3">
       <p> </p>
       <p><a href="Job.html">Jobs</a>         </p>
       <p><a href="Art Gallery.html">Art Gallery</a>         </p>
       <p><a href="Contact us.html">Contact Us </a></p>
    </div>
    <div id="apDiv4"><center>
<P>About</P>
<a href="visiting.html">visiting</a> | <a href="Map.html">maps </a>| <P><a href="About.html">about BGCC</a></P>
<P>Academic</P>
<P><a href="Courses.html">schools+courses</a></P>
<P>Admissions </P>
<P><a href="cost & aid basics.html">cost & aid basics </a>| <a href="Apply now.html">join BGCC</a>
<P>Studen Life</P>
<P><a href="Athletics.html">Athletics</a></P>
<P>Greenforce Education</P>
<P><a href="Career.html">career center</a></P>
</center> </div>
     <p><font size="2" color="black">BGCC | 99 GreenField | Boston, MA 02199 |617-0101-1000| TTY 617-0202-9944|</font></p>
    <div id="apDiv9"><a href="Donate.html" target="_blank"><a href="Donate.html"><img src="Pictures/three-green-logo.jpg" width="218" height="99" longdesc="Pictures/three-green-logo.jpg" /></div>
    <div id="apDiv8"><a href="Apply now.html" target="_blank"><a href="Apply now.html">
<img border="0" src="Pictures/cxgvxdvxgd.jpg" alt="Apply Now" width="218" height="99"></a></div>
</div>
</div>
</body>
</html>

That's what APDivs do. This is the single most common problem new people have with web page layouts. DO NOT use positioning. You don't need it. Start over. Learn to use CSS floats, margins and padding to align elements.
Below is a basic HTML5 Layout. View source in browser to see the code.
http://www.alt-web.com/sandbox/HTML5-BasicLayout.html
Nancy O.

Ap div moves in IE

Similar Messages

Maybe you are looking for