Bootstrap Carousel and Absolute Position Problem

I have an issue I can't figure out. I'm hoping for a CSS expert:)
http://pensacolachiropracticspinalcenters.com/
I've created a bootstrap carousel. The html blocks go like this.
<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(float:left)
<div #HomeBoxFirst></div>(float:left)
<div #HomeBoxFirst></div>(float:left)
</div>
</div>
I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.
The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions? Thanks

You have code errors.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpensacolachiropracticspinalcenter s.com%2F
To test widgets, I like to go back to basics. Try inserting your widget into a plain vanilla test page with no other scripts on it. Often times scripts from other sources won't play nice with widgets.
If that works OK, then try it in your real web page. Some people will tell you code doesn't matter. But in my experience, code that is free of errors is much simpler to work with.
Nancy O.

Similar Messages

Text and layer position problems

Hi, I am creating a webpage and I have installed a background
image. for which I have centred and all is fine.
I am now using layers to add text so I can place the text
wherever I want.
But when I save and view in IE and Firefox the text is not in
the correct position. I have tried a number of things to solve this
all to no avail.
Please can someone help me.
The text I have so far is:

> I am now using layers to add text so I can place the
text wherever I want.
This is number 4 in the top 5 mistakes someone can make in
building their
pages. Here's why -
http://www.great-web-sights.com/g_layer-overlap.asp
It will help you to understand the difference between
absolute positioning
and centering content. Your layer is absolutely positioned,
and your
background is centering. That's never going to work the way
you want....
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
==================
"YNWA4EVA" <[email protected]> wrote in
message
news:[email protected]...
> Hi, I am creating a webpage and I have installed a
background image. for
> which
> I have centred and all is fine.
>
> I am now using layers to add text so I can place the
text wherever I want.
>
> But when I save and view in IE and Firefox the text is
not in the correct
> position. I have tried a number of things to solve this
all to no avail.
>
> Please can someone help me.
>
> The text I have so far is:
>
>
>
> <!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>Liverpool Hope University - IT Deanery Book
Sales</title>
>
> <style type="text/css">
> 
> </style></head>
>
> <body>
> <div id="Layer3">
> <p>I want my text here </p>
> </div>
> </body>
> </html>
>

Mixed Signal Graph, Selected Cursors, and Cursor Position Problems

I'm trying to work around an issue with a single multiplot cursor on a mixed-signal graph (doesn't work right, R&D bug report #100830) by grabbing the selected cursor x-position and updating that position across all four cursors, as seen below:
However, I'm having two problems.
One, the selected cursor is not always the actual selected cursor. Quite often, especially when selecting and dragging cursors 3 & 4 (indexed 2 & 3), the selected cursor shows up as 0 or 1.
Two, and the one I'm more concerned about, is the fact that the four cursors X-positions never completely line up. In every case, whichever cursor is deemed to be "selected", the other three will align to some point (the same for all three) that is offset from the actual value. Please note that the X-values in my demonstration are identical (1000 points from 0.001 to 1) so I don't see this as being some snap issue where the value is offsetting to the closest available on the other arrays.
I've attached my scratchpad demo.vi as an illustration.
Any help or insight is appreciated.
Thanks,
Mike Webster
Attachments:
demo.vi ‏47 KB

I believe I found where the issue resides at least and a workaround. This is a problem with XY graphs in general when trying to programmatically control the cursor position. Somehow, the software goes looking for the nearest point instead of the identical point and has some sort of issue with its search algorithm. Switching from attempting to match position to copying the cursor 'index' completely cleared up the problem I was having. In the particular application I'm working on, the four graphs have identically spaced data on the X-axis, so this solution should work fine for me.

Use incremental rotary encoder to measure the absolute position and velocity

Hi all,
I faced a problem by using incremental rotary encoder to measure the absolute position of the rotation.
I'm not using NI-Daqmx but NI-motion module. In NI-motion module, I use read encoder position.vi to read the position of the encoder.
However, the readings is in incremental form. I'm doing the feedback control, so I need the absolute position and velocity.
Is there any functions or vi in the labview that can be used to transform the information of incremental encoder to the absolute one?
Thanks
Jun Wong

Jun,
1. The incremental encoder provides incremental position. After switching on the encoder power the encoder counts upwards or downwards. For the absolute position you need the index (R or I) signal. I don't know which type of incremental encoder you have but there should be A, B and (I or R) signals. The index signal should reset the counter to zero setting this way a pseudo-absolute-position (which is lost after the first switch of). Most of the motion controllers have a mode, just after switch on, in which the controller search for the Index. This mode is called Homing.
2. Velocity. It's very simple. You sample the position with a fix sampling clock. Let's say: 10kHz. The speed is: (Actual Position - Previous Position) / Sampling Period. Pos[n] = 10.000inc, Pos[n-1] = 9.900inc. Speed = 10.000 - 9.900 / (1/10kHz) = 1.000.000 inc/sec. If one increment is 0.0001mm then the speed is 100mm/sec.
Paul

Problem with Absolute Positioning

     I have a LARGE number of web pages (>1500) that have fields that are absolutely positioned. I have to process these pages (JSPs) and create a temporary HTML file that will be edited in Dreamweaver. The editing will only modify the CSS file: the temporary HTML is throw-away.
The goal is to use Dreamweaver to organize fields on the screen and have it modify only the position in the CSS.
My problem is that when I create the temporary HTML, it looks fine in the browser, but Dreamweaver displays the elements using a normal flow, and not using the absolute position. I have checked the "AP Elements" tab in DW, and it shows all my fields and the "Prevent overlaps" checkbox is UNCHECKED.
Any guidance will be appreciated...
Here is a small HTML example (CSS below that):
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>CL0350</title>
          <link rel="stylesheet" href="example.css">
          <style type="text/css">
body {
     background-color: #efe;
#formContainer {
     width: 802px;
     height: 564px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     border: 3px #444 solid;
     background-color: white;
     position: relative;
</style>
     </head>
     <body>
          <div id="formContainer">
               <div id="lblEPP_MEMBER_NBR">Member#</div>
               <div id="lblEPP_YMDRCVD">Recv Dt</div>
<input id="txtEPP_MEMBER_NBR"><input id="txtEPP_YMDRCVD"></div>
     </body>
</html>
And finally, the CSS:
#lblEPP_MEMBER_NBR
white-space:nowrap;
POSITION:absolute;
left:17px;
top:43px;
#txtEPP_MEMBER_NBR
POSITION:absolute;
LEFT:17px;
TOP:62px;
WIDTH:110px;
#lblEPP_YMDRCVD
white-space:nowrap;
POSITION:absolute;
LEFT:542px;
TOP:43px;
#txtEPP_YMDRCVD
POSITION:absolute;
LEFT:542px;
TOP:62px;
WIDTH:92px;

Ahh - nevermind. I see you fixed your code.... Now I'll take a look.
On this page in DW, the fields seem to be placed using the absolute positioning, not the normal flow. Is the additional CSS contained in the externally linked CSS file?
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>CL0350</title>
          <link rel="stylesheet" href="example.css">
          <style type="text/css">
body {
     background-color: #efe;
#formContainer {
     width: 802px;
     height: 564px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     border: 3px #444 solid;
     background-color: white;
     position: relative;
#lblEPP_MEMBER_NBR
white-space:nowrap;
POSITION:absolute;
left:17px;
top:43px;
#txtEPP_MEMBER_NBR
POSITION:absolute;
LEFT:17px;
TOP:62px;
WIDTH:110px;
#lblEPP_YMDRCVD
white-space:nowrap;
POSITION:absolute;
LEFT:542px;
TOP:43px;
#txtEPP_YMDRCVD
POSITION:absolute;
LEFT:542px;
TOP:62px;
WIDTH:92px;
}</style>
     </head>
     <body>
          <div id="formContainer">
               <div id="lblEPP_MEMBER_NBR">Member#</div>
               <div id="lblEPP_YMDRCVD">Recv Dt</div>
<input id="txtEPP_MEMBER_NBR"><input id="txtEPP_YMDRCVD"></div>
     </body>
</html>

How do i add a Scroll Bar to a JList Component using absolute positioning?

I've got a applet whose content pane is set to null. I've create a jlist component on this applet and using absolute positioning set the bounds at
ListBox1.setBounds(380,10, 500, 500);.
My problem is creating add a scroll bar to the list box.
JScrollPane scrollPane = new JScrollPane(ListBox1);
C.add(scrollPane);
The above code is what i use and when i run this applet i don't see the list box at all. How do i add a scrollbar to this list box or JList component. Please help.

You need to setBounds() on the JScrollPane, not the JList.
The JScrollPane is the component that is being added to the panel.

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

Box model/none absolute positioning with flash

In recent years none-absolute positioning (or box model positioning) has become the norm with HTML/CSS
this is uselfull for dynamic functions which appear on an event (such as an object which appears when a button is clicked on or a error message that appears when a form box is given invalid input because it automatically inserts itself it the right place.)
One very important example of this is when you have a form which automatically produces an error message and the error message appears bellow the input area which caused it and the rest of the page is pushed down.
With none absolute positioning the developer does not need to worry about this.
But if the objects are given absolute position then it becomes a massive problem, the developer has to go about giving the objects differetn positions dependant on if dynamic objects appear or not
potentially the developer has to consider all possible variables, and code if statements which determine the position of all static objects for all possible variables which dynamic objects could take.
so does flash have a "none absolute positioning" solution to this problem.

Before you get all happy and pleased with yourself, APDivs or Layers seldom work well as a primary layout method. Here are some reasons why:
http://apptools.com/examples/pagelayout101.php
You're much better off using default CSS positioning (which is no positioning at all) along with CSS margins, padding and floats. If you don't believe me, check your page in non-IE browsers with increased/decreased text-sizes (zoom, text only).
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Static v absolute position

Many comments have been made elsewhere about the wisdom of
using 'absolute', particularly when a crossbrowsers are considered
and user's adjustment of text size..to quote one problem...
So, in order to eliminate these glitches from my pages, I
should apparently convert to 'static'..
What would be the steps to take to accomplish this without
too much hassle. I do have a lot of CSS code, which, I guess, when
adjusted would take care of some of the problems.
Is there a tutorial/publication which deals with this
procedure?

Any element without an explicit positioning style is static,
by default,
e.g.,
<html>
<head>
</head>
<body>
<div>This is a static div</div>
<p>This is a static paragraph</p>
</body>
> So, in order to eliminate these glitches from my pages,
I should
> apparently
> convert to 'static'..
That's a gross oversimplification. You should re-design your
layout so that
the page elements are placed on the page as dictated by THE
NORMAL FLOW,
mediated through the CSS rules. Simply taking a page that has
been designed
using absolutely positioned elements, and converting the
absolute position
to static position (by removing the positioning altogether)
will most likely
not work very well. I think you understand this, but I'm not
sure.
> I do have a lot of CSS code
This, too, is a bit troubling. Having a lot of CSS often
means inefficient
use of rules and selectors.
In general, you don't need many custom classes. And, in fact,
they
make your life more difficult when you come back to maintain
the page a year
later. Use ID selectors and create descendent selector rules.
An example -
#maintable { .... }
#maintable td { .... }
#maintable td table { ... }
each of those rules would apply explicitly to a) this table -
<table id="maintable">,
and b) this cell -
<table id="maintable">
<tr>
<td>...</td>
</tr>
</table> (and all others in that table),
and to this table -
<table id="maintable">
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Then you could use this rule -
#maintable table td.special { .... }
to apply to this cell explicitly -
<table id="maintable">
<tr>
<td>
<table>
<tr>
<td class="special">this one</td>
<td>but not this one</td>
<td class="special">this one</td>
<td>but not this one</td>
</tr>
</table>
</td>
</tr>
</table>
Also, it is not necessary to define default styles, e.g.,
font-weight:normal, unless you are trying to counteract some
cascading rule.
Further, it is not necessary to define styles that are
normally inherited,
e.g.,
body { font-family: Calibri, verdana, arial, helvetica,
sans-serif; }
will style all characters used on the page, no matter where
they are located
or in which container.
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
==================
"Karlhevera" <[email protected]> wrote in
message
news:[email protected]...
> Many comments have been made elsewhere about the wisdom
of using
> 'absolute',
> particularly when a crossbrowsers are considered and
user's adjustment of
> text
> size..to quote one problem...
>
> So, in order to eliminate these glitches from my pages,
I should
> apparently
> convert to 'static'..
> What would be the steps to take to accomplish this
without too much
> hassle.
> I do have a lot of CSS code, which, I guess, when
adjusted would take care
> of
> some of the problems.
> Is there a tutorial/publication which deals with this
procedure?
>
>

Adding a Layer (absolute position div) to a locked page

Maybe I am just not understanding templates but I have a
really simple one that has one editable region called "content". I
want to add a absolute positioned div to the content area but DW
tells me this would require changing code that is locked by the
template. I thought that the editable area automatically put in by
DW would accommodate the added code (css) that DW puts in when
adding a template to the page.
So what is the Editable area called "Head" used for anyways
if not for situations like this?
Thanks

Here's the problem with layers in template child pages, and a
simple
solution.
When you DRAG a layer onto the page in DW (this means you
click on the layer
icon in the Insert Toolbar and drag the layer on the page),
DW wants to put
the code for that layer immediately under the body tag, e.g.,
BEFORE DRAG -
<body...>
<table>
AFTER DRAG -
<body ...>
<div id="foo" style="position:absolute; ...>LAYER
STUFF</div>
<table>
In a template child page, this region is usually not part of
your editable
region, and so the layer's code is rejected by the template
engine. This is
a bad thing.
If instead of dragging the layer onto the page, you use
INSERT | Layer, that
should work provided your cursor is in an editable region,
but since
editable regions are usually within tables or other layers,
you have just
broken one of the rules listed above. This is also a bad
thing.
THE SOLUTION -
Open your template page in DW, and create a special place
where it is SAFE
to put your layers. In code view, find this -
</body>
and click so that your cursor insertion point is just to the
left of
</body>.
Now, use INSERT | Template Objects > Editable Region, and
name this region
"Layer Pad" or something like that.
When you save your template page, all your child pages will
now have the
LayerPad editable region on them.
THE BIG FINISH -
On any child page where you need a layer, just click in this
editable
region, and use INSERT | Layer. Bada bing, bada boom.
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
==================
"htown" <[email protected]> wrote in message
news:[email protected]...
> Maybe I am just not understanding templates but I have a
really simple one
> that
> has one editable region called "content". I want to add
a absolute
> positioned
> div to the content area but DW tells me this would
require changing code
> that
> is locked by the template. I thought that the editable
area automatically
> put
> in by DW would accommodate the added code (css) that DW
puts in when
> adding a
> template to the page.
>
> So what is the Editable area called "Head" used for
anyways if not for
> situations like this?
>
> Thanks
>
>

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.

Rendering bug with absolutely positioned button tags

I'm using Firefox 10.0.1 and I've found a bug regarding button elements that are absolutely positioned. The problem is setting both the right and left CSS attributes does not affect the width of the button as it should.
Here is some example code to show what I mean (the forum is mangling the html, hopefully you can get the gist of it):<br />
<br />
<pre><nowiki><html>
<body>
<div style="width: 500px; position: relative;">
<button style="position: absolute; left: 0; right: 0;">Test</button>
</div>
</body>
</html></nowiki></pre>
In all other browsers the button will be 500px wide. In Firefox, it will fit to the text.

Why don't you give that button a width:100% if you want it to take the full width of that DIV container?

Why is a table td not suitable as a containing block for absolute positioning of an element when other browsers allow that CSS feature?

Absolute positioning requires a containing element. I'm taking a class on HTML5 and CSS3 from ed2go.com. A photo display using thumbnails in a table shows the full size picture with its corner in the center of the thumbnail when you hover over the thumbnail.
Snippet of code for one td
<pre><nowiki><td>
<img src="pix2/flower01.png" alt="" class="small">
<img src="pix2/flower01.png" alt="" class="left"></td></nowiki></pre>
The "small" class makes the picture a thumbnail. The "left" class positions the full size picture with its corner in the center of the thumbnail when the mouse hovers over the thumbnail. This works correctly in Internet Explorer but not Firefox. The reason is that Firefox does not consider a td to be a containing element by using position:relative so the large picture corner is in the center of the viewport. Although td is not a block element it would seem that allowing absolute positioning with respect to a td would be a good default implementation.
The "problem" can be "fixed" by simply placing the two <img> inside a <p></p>.<br />
You can see the two different implementations at http://s179350112.onlinehome.us/temp6.htm and http://s179350112.onlinehome.us/temp7.htm
Is Firefox implementing the Standard correctly? Would a default implementation as in Internet Explorer be allowed by the Standard?

Yes, I see the same on the temp7 page.
Maybe someone at the MozillaZine "Web Development/Standards Evangelism" forum knows more about this.
*http://forums.mozillazine.org/viewforum.php?f=25
The helpers at that forum are more knowledgeable about web development issues.<br>
You need to register at the MozillaZine forum site in order to post at that forum.

Bayside Beat Tutorial - Part 4 - Absolute positioning

I am stuck on the Absolute positioning section. My image is supposed to be spread out across the screen and the text is supposed to be at 36% as a layer on top of the image. Here are the instructions:
To keep related styles together, select #wrapper in the Selectors pane, and click the plus button to create a new selector called #hero after it.
In the Layout category, set the position property to relative.
With #hero still selected in the Selectors pane, create a new selector called #hero article to style the <article>element nested inside the hero <div>.
In the Layout category, set the width property to 36%, and left and right padding to 10px.
Set the position property to absolute.
The moment I set steps 4 & 5, I get the following layout:
It should look like this:

Looking at your screenshot, it looks as though you have wrapped the <article> around the hero <div> in the underlying HTML. The problem isn't with your CSS, but the HTML structure.
Compare your HTML file with the version in the completed folder.

Question about Button and TextBox positions

Hello everybody,
I just started using Borland Together 6.1 extended with Java and I want to design a UserForm (an Application), especially a Online Bank terminal, where u can input and output different data. My problem is that when I add buttons and textboxes from the toolbox menu, I cannot put then on the place I want, I'm restricted to some positions (center, right, left, west, east and so on). My question is how can I create my elements on the position I want, how can I resize them. Could someone tell me some specific functions, which I should use.
Thankx

You should try to find a LayoutManager that suits you. If you can't find one, you can set the Layout to null, then use absolute positioning.
setLayout(null);
yourComponent.setLocation(50, 50);
yourComponent.setSize(40, 20);You need to set both the location and size of components when the layout is null.

Bootstrap Carousel and Absolute Position Problem

Similar Messages

Maybe you are looking for