AP Div position question

Hello .i have a question about Dreamweaver cs 3 . I want to
set align of my page to center so I am making my main table to
center. but when I draw a AP Div inside my table and preview my
page in browser it appear in another position more left into my
page and not in the position that it appears in Dreamweaver .can
you help me ? thanks a lot !

Post a link to your page, please.
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
==================
"1298larryio" <[email protected]> wrote in
message
news:g7o4ot$qsv$[email protected]..
>i set the margin: 0 auto; but still nothing. i check the
page i couldn't
>download the css . it said that an unexpected error
occurs . i am probably
>doing something wrong . thanks for the help anyway .

Similar Messages

AP Div positioning question...

Hi,
I have decided to overlay an AP DIV tag so that I can position an image exactly where I'd like. (I saw a tutorial on this on YouTube)
Well, I tested the page in Safari, and all looks well, but when I tested it in FireFox, the DIV appears slightly more shifted to the right, revealing what's underneath. (this AP div is image text, with an effect applied, and I have placed it to cover up the regular HTML text that lies beneath which is in a regular, standard div container...just so it "pops" a bit more)
How do I get it to be absolute then, or is this a dirty trick?! See the tutorial here:
http://www.youtube.com/watch?v=VDBPAQRrM-c
Thank you!

Sorry, but this won't work. You're trying to nail jelly to a wall and hope it sticks. Your best option is to use a graphic for the whole thing or skip the fancy stuff and use HTML text within a single division (layer). The problem with overlapping layers this way is that when text size is increased/decreased in browser it will distort the positioning and there's really nothing you can do about browser and user settings.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Help with div positioning

I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
     width:97%;
#container {
     min-height: 1000px;
     width:100%;
     min-width:850px;
     border-color:#000;
     border: solid 2px;
     alignment-baseline:middle;
     margin:25px;
#header {
     float:left;
#collage {
     float:right;
     width:202px;
#menu {
     margin-top:20px;
     height:30px;
     float:left;
     clear:left;
#MenuBar1 {
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
     clear:inherit;
#meat {
     float:left;
     clear:left;
     /* [disabled]max-width:600px; */
     padding:20px;
     padding-left:40px;
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
     clear:both;
     width:100%;
     height:auto;
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Welcome to KIDS care Colorado.com!</title>



<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
      <div align="center"><span id="MenuBar1"><a href="#">Home</a>
        </span>
      </div>
    </li>
    <li><span id="MenuBar1"><a href="#">Programs</a></span></li>
    <li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
    <li><span id="MenuBar1"><a href="#">Donate</a></span></li>
    <li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>

<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>

<div id="footer">
<div align="center">
    <p> </p>
    <p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
    <p>PO Box 19442 • Boulder, CO 80308
    </p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Offset div / positioning problem in IE

I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
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" />
<title>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
          background-color: #333333;
#entireSite #sidebar #spacer {
          height: 300px;
          width: 350px;
#entireSite #sidebar #newsletter {
          background-image: url(../Images/NewsLetterBackground.png);
          height: 165px;
          width: 350px;
          color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
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>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">

<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">

<div id="navbarArea">

<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><strong><a href="index.html">Home Page</a> </strong></li>
    <li><strong><a href="About Us.html">About Us</a></strong></li>
    <li><strong><a href="Services.html">Services</a> </strong></li>
    <li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
    <li><strong><a href="Contact Us.html">Contact us</a></strong></li>
    <li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>

</div>


<div id="entireSite">

<div id= "sidebar">

<div id= "spacer">
</div>


<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
    <td>Name:</td>
    <td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Zip Code:</td>
    <td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>

</div>


<div id= "maintext">

<div id= "titlebar">
<br />
</div>

<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
    <td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
    <br />
    Water Damage</center></td>
    <td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
    <br />
    Fire Damage</center></td>
    <td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
    <br />
    Mold Remediation</center></td>
    <td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
    <br />
    Soot Removal</center></td>
    <td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
    <br />
    Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>


<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>


<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>


<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>

</div>

<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator

Div Color Questions

Alright, I'm brand new to CSS and to Dreamweaver so please be easy on me if this is a completely idiotic question . I have just started some code for a site I'm working on. I have it almost set up how I want it minus the bells and whistles. My only issue is I can't get my "left" and "right" div background colors to change. I've tried playing with the code, I've tried playing with the dreamweaver features, but there's no changes. I was hoping somebody could give me a hand? I'm sure once I see what I'm doing wrong it will be a d'oh moment. I have CSS Rules made for each section and have tried to click into it and change the background color, but nothing updates. The font, etc won't change either. What the heck am I doing wrong? Thanks in advance for any assistance! The section of code is below:
<body>
<div id="shadow">
<div id="Wrapper">
    <div id="Banner">
      <blockquote><a href="index.html"><img src="images/BDBBanner.gif" alt="Bully Dog Bakery Banner" width="800" height="200" /></a></blockquote>
    </div>
    <div id="Navigation">Home | About Us | Nutrition | Products | Specials | Our Customers | Contact</div>
<div id="bodyArea">
<div id="left">
    <p>Info Here</p>
</div>
<div id="right"><p>News and Pictures will go here.</p></div>
    </div>
    <div id="footer"><p>Copyright info will go here</p></div>
</div>
</div>
</body>

I can't see where in YOUR css that light green colour is coming from?
That's why I'm suggesting it may be Tripod taking over your page a bit. Unfortunately you pay a price for FREE web hosting and in the case of Tripod they cram your page with 'unwanted' adverts. The light green is behind the advert which appears at the foot of the page.
If I take just your html and css then the page works ok to the point whereby you can see the left and right column colors.
If you haven't introduced the light green color into your page then someone else did and that someone else is Tripod.

Centering ap div position problem

Hi people, I'm new to dreamweaver and have what seems to be a basic problem but one that I can't fix, even after looking on the forums and web.
My problem is when I go into design mode I can drag my "ap divs" around so they are in the centre of my screen (webpage) and nicely lined up, however once I test the website in any web-browser they are no longer centered and seem to reposition themselves at random. I've included some screen-shots so you can see what I mean.
Website in design view
Website in webbrowser
Here is my code so you can look at it and spot my mistakes.
<title>index</title>
</head>
<style type="text/css" >
body
background-image:url('background.png');
background-repeat:no-repeat;
background-position:50% -2%;
background-color:#D7D7D7;
</style>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 535px;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 360px;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</html>
If you can see the solution to my problem or if there is another/better way of centering text/banners using ap divs, then please let me know. Thanks in advance.

The biggest mistake that those new to Dreamweaver make is using Absolutely Positioned <divs>.
Why, because in most instances they will 'restrict' your construction. By their nature being Absolutely Positioned they do NOT move away from the co-ordinates that you give them. What you are seeing is the background image moving, its an illusion.
I would never advise anyone to use AP positioning unless they have a great deal of experience in positioning.
One way to control AP <divs> is to surround them in a 'wrapper' <div> (see code below)
<div id="wrapper">
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</div>
Then use css to make the wrappers position 'relative' and to center it horizontally using margin: 0 auto (see below)
#wrapper {
position: relative;
width: 578px;
margin: 0 auto;
Your AP <divs> will now take their co-ordinates from the top/left of the 'wrapper' <div>
So alter your left positioning to 0 in your apDiv1 and apDiv2 (see below)
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 0;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 0;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
As the default position is left you don't really need to declare it but it does no harm if you do.

AP Div positioning

My problem is that I have 3 apDivs inside my table layout and
they do not move with the rest of the content on the page. The rest
of the table is set to center align so that it always stays in the
middle of the window when you resize it. The apDivs, however, do
not move and it seems that if I change the position to anything
other than absolute it has a negative effect. Does anyone know of a
solution to this problem?

Certainly. You need to understand how absolute positioning
works, though.
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Now - to fix your problem, try this -
Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
(the ellipsis represents any other attributes that might be
mentioned in the
body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
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
==================
"JonnyBoy333" <[email protected]> wrote in
message
news:[email protected]...
> My problem is that I have 3 apDivs inside my table
layout and they do not
> move
> with the rest of the content on the page. The rest of
the table is set to
> center align so that it always stays in the middle of
the window when you
> resize it. The apDivs, however, do not move and it seems
that if I change
> the
> position to anything other than absolute it has a
negative effect. Does
> anyone
> know of a solution to this problem?
>

JLabel icon position question

I want to have a JLabel with text and an icon. I want the text to be positioned on the left and I want the icon on the right. My question is: Is this possible and if so how?

RTFM
http://java.sun.com/j2se/1.4.2/docs/api/javax/swing/JLabel.html#setHorizontalTextPosition(int)

Css absolute position question? with flash object?

am only concerned with the "top" and left margin how do i
play it to flash objects. I figure i can put it in a div but how do
i format it.........
<object type="application/x-shockwave-flash"
allowScriptAccess="never" allowNetworking="internal" height="125"
width="250" align="middle" data="
http://www.profilepitstop.com/mp3_players/flash/slimline.swf?uid=157681&extc1=3D3D3D&extc2 =3A3738&extc3=2E3A2D">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="
http://www.profilepitstop.com/mp3_players/flash/slimline.swf?uid=157681&extc1=3D3D3D&extc2 =3A3738&extc3=2E3A2D"
/>
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
</object>

On Wed, 25 Jun 2008 15:50:27 +0000 (UTC), "antman24"
<[email protected]> wrote:
>bump
bump doesn't work with the vast majority of people who reply
- we
don't use the web page - but a news feed from it.
you need to repost the entire question
~Malcolm~*...
~*

Positioning question

The page in question is at:
http://www.salleboise.com/yflier2.cfm
What I have a question about is the 'register' icon next to
the class date
of 5/29
I'd like the image to align with the text at the top of that
line item.
What am I missing to make that happen?
Thanks!!

Thanks!
"Murray *ACE*" <[email protected]> wrote
in message
news:f2ilpr$7sn$[email protected]..
> Move the div that contains that image so that it
precedes the line -
>
> Session 10: 5/29/07 -- 6/21/07 (and its associated
image)
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "Steve Grosz" <[email protected]> wrote in
message
> news:f2il51$79l$[email protected]..
>> The page in question is at:
http://www.salleboise.com/yflier2.cfm
>>
>> What I have a question about is the 'register' icon
next to the class
>> date of 5/29
>>
>> I'd like the image to align with the text at the top
of that line item.
>> What am I missing to make that happen?
>>
>> Thanks!!
>>
>
>

Text in Div tag question

hello Dreamweavers.
I have made a Div Tag and placed and image within it. Im also copy/pasting lorum ispum text in the div tag.
what id like to know is,why does DW put the text down the bottom and not from the top where the red arrow is.
So how can I add text from the top of the image?
thank you.

Try the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.banner {
    width: 600px;
    margin: auto;
.banner img {
    display: block;
    float: left;
    margin-right: 15px;
.banner p {
    margin-right: 15px;
.banner p span {
    font-weight: bold;
</style>
</head>
<body>
<div class="banner"> <img src="_images/top_back8.jpg" alt="img">
<p><span>Lorem Ipsum</span> is the exploitation of core competencies as an essential enabler, measure the process, not the people. Building a dynamic relationship between the main players. As knowledge is fragmented into specialities an important ingredient of business process reengineering whether the organization's core competences are fully in line, given market realities. The three cs - customers, competition and change - have created a new world for business highly motivated participants contributing to a valued-added outcome.</p>
</div>
</body>
</html>
I like to keep it simple and restrict the use of ID's

Site with div newbee question - content is not showing rights

Hi
I have set up a template with div codes and it looks right.
However as soon as I am putting content into my editable div (content) - the design goes funny. I am sure there is something stupid that I made wrong.
Can you help?
That is how it should look like (apart from the footer)
http://www.heroldes.com/jac/site_vorschlag/show_right.html
and this happens, when I put content into it.
http://www.heroldes.com/jac/site_vorschlag/vorschlag_badcontent.html
Code css
http://www.heroldes.com/jac/site_vorschlag/show_right.html
Looking forward to your reply
Cader

cader01 wrote:
Hi
Yes the BG picture is in the right place.
I have posted another link just to show what happens if I put more text.
The container is defined long enough - but it just mosves everything around.
http://www.heroldes.com/jac/screenshot.PNG
The background images are not in the correct place on the server so its difficult for me to see what is going on because I can't see the whole picture.
However looking at your css you should never set a height on a <div> unless you actually know what height it is going to be and you will only ever know that on 2 ocassions:
1) If only an image/s is in the <div>
2) When you specifically set the height of a <div> for a scrolling area.
I would remove any height from the <divs> where they not needed. Setting height for <divs> will generally pose you a nightmare as you can never keep track of them. Building for the web is ALL to do with mathematics and calculations. If you are out by the slightest, only has to be a pixel, then you could find yourself in all sorts of problems.

CSS positioning question

Am just trying to nail this CSS positioning thing once and
for all, with a simple enough two column layout.
I've posted a link below which is pretty much there - but
there is an unintended gap between the banner image, and the navbar
link with
unwanted gap
It should look like this :
link without
unwanted gap
Cheers,
Iain

Al Sparber- PVII wrote:
> "Thierry | www.TJKDesign.com"
<[email protected]> wrote in
> message news:ei5iju$od4$[email protected]..
>> Iain71 wrote:
>>> Am just trying to nail this CSS positioning
thing once and for all,
>>> with a simple enough two column layout.
>>>
>>> I've posted a link below which is pretty much
there - but there is
>>> an
>>> unintended gap between the banner image, and the
navbar :
>>>
>>>
http://www.oriental-chamber.co.uk/homepage5.htm
>>>
>>> It should look like this :
>>>
>>>
http://www.oriental-chamber.co.uk/homepage2.htm
>>
>> Try this:
>> #header img {vertical-align:bottom}
> Float left should work too. I believe this is a function
of using a
> strict DOCTYPE.
>
http://www.projectseven.com/csslab/images/baseline/
As well as "display:block".
I just didn't want to plug a URL:
http://www.tjkdesign.com/articles/imageanddoctypes.htm
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

Need help with footer div positioning

hi guys,
thank you for checking out my post...
on my website i want a footer div to sit at the very bottom
of the page. if the content requires the page to be scrolled i
would like the footer to be pushed down still at the bottom.
so basically, whether the page needs to be scrolled or not,
the footer div will be at the absolute bottom of the page. hope
that makes sense!
ive been trying and trying with endless tutorials and trying
different things that i know but to no avail.
if you could have a look at my site
here i would
be most grateful for any advice or solutions.
thank you once again and i hope to hear from you.
all the best,
sm

Spindrift wrote:
>
quote:
either make that bottom:0px; or bottom:0;
>
> oops! sorry, my bad! ive made the correction
> now the footer kind of works but just stays in the same
place as the content
> scrolls behind it.
> when no scrolling is needed on a page what we have is
good though.
> im after getting the content to push the footer down to
the bottom of the page
> so when you scroll down to the bottom (if the page needs
to be scrolled) the
> footer will be at the bottom (of the page not screen) if
that makes sense.
> many thanks,
> sm
>
You could check out this demo - view the code - paying
attention to the
comments in the embedded css, particularly, the padding on
the #body
(note that this is a div and not the body tag) div and the
height of the
#footer div.......
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
Personally I'd just let it go with the flow :-)
chin chin
Sinclair

AnyChart Tooltip position question

How can I show the whole tooltip? It happens when I hover on points near the corner of the chart areas. Thank you!

Hi, I already checked the tooltip text formatting documentation but I couldn't find a Z-Index or overflow property.
<tooltip_settings enabled="true">
<format><![CDATA[PRO: {%Name}
{%SeriesName}: {%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}
DISTRIBUTION: {%YPercentOfCategory}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}%]]>
</format>
<font family="Arial" size="10" color="0x000000" />
<position anchor="CenterTop" halign="Center" valign="Top" padding="10" />
</tooltip_settings>

AP Div position question

Similar Messages

Maybe you are looking for