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">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:760px; margin:0
auto;position:relative; }
/* 760px will display on an 800px screen maximized browser
window without */
/* horizontal scrollbars. */
-->
</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 -
<!-- /wrapper -->
</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?
>
Similar Messages
-
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')">
<!-- This begins the coding for centering the entire webpage -->
<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">
<!-- This begins the background layer for the navbarArea -->
<div id="navbarArea">
<!-- This begins the container div for the navbar -->
<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>
<!--- This ends the container div for the navbar -->
</div>
<!-- This ends the background layer for the navbarArea -->
<!--This begins the entireSite area *excludes navbar* -->
<div id="entireSite">
<!-- This begins the container for the sidebar image -->
<div id= "sidebar">
<!-- This begins a spacer div -->
<div id= "spacer">
</div>
<!-- This ends a spacer div -->
<!--This begins newsletter 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>
<!-- This ends newsletter div -->
</div>
<!-- This ends the sidebar image area-->
<!-- This begins the maintext area -->
<div id= "maintext">
<!-- This begins the titlebar inside the maintext area-->
<div id= "titlebar">
<br />
</div>
<!-- This ends the titlebar of maintext area -->
<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>
<!-- This ends the maintext area -->
<!-- This begins the bottombar image -->
<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>
<!-- This ends the bottom bar image -->
<!-- This begins the hotlinks area -->
<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>
<!--This ends the hotlinks area -->
<!-- This begins the copyright area -->
<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>
<!-- This ends the copyright area -->
</div>
<!-- This ends the entireSite container-->
<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>
<!-- This ends the coding for centering the entire webpage *excludes navbar* -->
<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 -
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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Welcome to KIDS care Colorado.com!</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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>
<!-- TemplateBeginEditable name="meat" -->
<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>
<!-- TemplateEndEditable -->
<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 -
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><!-- end wrapper -->
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. -
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 . -
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 -
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,
smSpindrift 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 -
Footer DIV Positioning Problem in Safari
The website I am working on is giving me a huge headache!
Here's a link to a
sample
page
I have also attached the css. Things look okay in Firefox for
me... I'm on an iMac. The footer stays at the bottom of the page
and to the right as it should be. Safari on the other hand, places
the footer in a totally different location. I haven't checked it in
Internet Explorer OR on a PC yet, but I dread the problems I may be
faced with.
Any help would be appreciated as I am running out of
time.Add clear: both; to your #footer css styles (see below)
#footer {
height: 50px;
text-align: right;
padding: 20px 100px 0px 0px;
color: #FFFFFF;
font: 11px/1.5em Georgia, "Times New Roman", Times, serif;
margin: 0px;
width: 980px;
position: relative;
float: left;
clear: both; /* ADD THIS */
OlDirty wrote:
> The website I am working on is giving me a huge
headache! Here's a link to a
>
http://php.wmsgroup.com/eofd6.org/administration.html
>
> I have also attached the css. Things look okay in
Firefox for me... I'm on an
> iMac. The footer stays at the bottom of the page and to
the right as it should
> be. Safari on the other hand, places the footer in a
totally different
> location. I haven't checked it in Internet Explorer OR
on a PC yet, but I dread
> the problems I may be faced with.
>
> Any help would be appreciated as I am running out of
time.
>
> /* Top Elements */
> * {
> margin: 0px;
> padding: 0px;
> }
> body {
> font: 12px/1.5em Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> background: #000000;
> text-align: left;
> }
> p {
> padding-bottom: 12px;
> color: #000000;
> }
> ol { margin-left: 30px; }
>
> /* links */
> a, a:visited {
> color: #333333;
> background: inherit;
> text-decoration: underline;
> }
> a:hover {
> color: #333333;
> background: inherit;
> padding-bottom: 0;
> text-decoration: none;
> }
> a.gallery, a.gallery:visited {
> color: #FFFFFF;
> text-decoration: underline;
> }
> a.gallery:hover {
> color: #FFFFFF;
> text-decoration: none;
>
> /* headers */
> }
> #volunteer h1 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> color: #660000;
> padding-bottom: 10px;
> }
> #content h1 {
> font: normal 22px Georgia, "Times New Roman", Times,
serif;
> color: #650000;
> padding-bottom: 10px;
> }
> #gallery h1 {
> display: block;
> color: #FFFFFF;
> letter-spacing: -1px;
> padding-bottom: 10px;
> font: normal 20px Georgia, "Times New Roman", Times,
serif;
> }
> h2 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> padding-bottom: 4px;
> border-bottom: 1px dotted #650000;
> width: 300px;
>
> /* images */
> }
> .floatright {
> float: right;
> margin: 4px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 4px;
> }
> .floatleft {
> float: left;
> margin: 4px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 4px;
>
> /* form elements */
> }
> table {
> border-collapse: collapse;
> border: 1px solid #999999;
> margin-top: 3px;
> margin-bottom: 3px;
> }
>
> td, th {
> padding: 0.1em;
> border: 1px solid #CCCCCC;
> }
> form {
> margin:10px; padding: 0 5px;
> background: #F5F5F5;
> }
> label {
> display:block;
> font-weight:bold;
> margin:5px 0;
> }
> input {
> padding:2px;
> border:1px solid #eee;
> font: normal 1em Verdana, sans-serif;
> color:#777;
> }
> textarea {
> width:400px;
> padding:2px;
> font: normal 1em Verdana, sans-serif;
> border:1px solid #eee;
> height:100px;
> display:block;
> color:#000000;
> }
> input.button {
> font: bold 12px Arial, Sans-serif;
> height: 24px;
> margin: 0;
> padding: 2px 3px;
> color: #333;
> background: #e7e6e6 url(button.jpg) repeat-x;
> border: 1px solid #dadada;
> }
>
> /* search form */
> .searchform {
> background-color: transparent;
> border: none;
> margin: 0 5px 0 10px; padding: 5px 0 15px 0;
> width: 190px;
> }
> .searchform p { margin: 0; padding: 0; }
> .searchform input.textbox {
> width: 100px;
> color: #777;
> height: 18px;
> padding: 2px;
> border: 1px solid #E5E5E5;
> vertical-align: top;
> }
> .searchform input.button {
> width: 60px;
> height: 24px;
> padding: 2px 5px;
> vertical-align: top;
> }
>
> /********************************************
> LAYOUT
> ********************************************/
> #wrapper {
> margin: 20px auto 0px;
> width: 980px;
> position: relative;
>
> }
> #logo {
> float: left;
> height: 192px;
> width: 234px;
> position: relative;
> }
> #header {
> float: left;
> height: 192px;
> width: 745px;
> position: relative;
> }
> #content {
> width: 695px;
> background: #FFFFFF;
> color: #000000;
> float: right;
> position: relative;
> height: 100%;
> padding: 20px 30px 30px 20px;
> }
> #gallery {
> float: left;
> height: 200px;
> width: 116px;
> position: relative;
> background: url(images/photogallery.jpg) no-repeat;
> padding-top: 72px;
> padding-left: 12px;
> padding-right: 10px;
> }
> #training_photo {
> height: 197px;
> width: 234px;
> background: url(images/training_photo.jpg) no-repeat;
> position: relative;
> clear: left;
> float: left;
> }
> #volunteer {
> float: left;
> height: 170px;
> width: 214px;
> position: relative;
> background: url(images/volunteer.jpg) no-repeat;
> padding-top: 27px;
> padding-left: 20px;
> color: #333333;
> }
> #firetruck {
> float: left;
> height: 197px;
> width: 266px;
> position: relative;
> }
> #training {
> float: left;
> height: 197px;
> width: 245px;
> position: relative;
> }
>
> /* Navigation */
> #nav {
> float: left;
> height: 390px;
> width: 234px;
> background: #333333;
> position: relative;
> }
> #nav ul {
> float: left;
> list-style: none;
> width: 234px;
> padding: 0;
> height: 40px;
> display: inline;
> text-transform: uppercase;
> margin: 0 0 0 0px;
> }
> #nav ul li {
> display: inline;
> margin: 0;
> padding: 0;
> }
> #nav ul li a {
> display: block;
> float: left;
> width: 214px;
> color: #999999;
> text-transform: capitalize;
> text-decoration: none;
> font: normal 13px/38px Georgia, "Times New Roman",
Times, serif;
> margin: 0;
> padding-left: 20px;
> border-bottom: 1px solid #666666;
> }
> #nav ul li a:hover,
> #nav ul li a:active {
> color: #FFFFFF;
> }
> #nav ul li#current a {
> background: #DBDBDB url(nav-current.jpg) repeat-x;
>
> /* footer */
> }
> #footer {
> height: 50px;
> text-align: right;
> padding: 20px 100px 0px 0px;
> color: #FFFFFF;
> font: 11px/1.5em Georgia, "Times New Roman", Times,
serif;
> margin: 0px;
> width: 980px;
> position: relative;
> float: left;
> -
Div position problem - Menu goes under fotter
Im makeing a page with a head, a body, and footer
The body has a menu to the right
When the conten of the body is smaller the menu, the footer overlay the menu.
How do i get footer to stay under both body and the body menu ?
http://home19.inet.tele.dk/jgom/semidan/index.htmlJesper:<br /><br />To really get into float clearing, there is a good article here -<br /><br />http://www.tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp<br /><br />-- <br />Murray<br />-------------<br />Adobe Community Expert (Dreamweaver)<br /><br /><br /><Jesper_Mø[email protected]> wrote in message <br />news:[email protected]..<br />> Thanks Kath<br />><br />> That one is now in my book maks<br />><br />> I know i have made that that once before... But i cud not remember the <br />> trick :-P<br />><br />> When you reply came in, i was searching the web to find the solution<br />> And have joust found somthing simulary at A list Apart --> <br />> <a href=http://www.alistapart.com/articles/multicolumnlayouts><br />><br />> Back to the drawingbord :-)<br />><br />> Love this forum and all the nice and skilld person in here (I hope the <br />> forum will live long after GoLive is dead)
-
Here is the problem page.http://pb2.gabessdsp.hostzi.com/index.php?page=ordinances
You notice since there is nto enough content on the page the footer is hidden behind the navigation. So how would I go about forcing the footer to always display below the navigation?Add the following
#body {
min-height: 400px; -
CSS divs running into each other 4x3 screens but not widescreen
I am trying to develop a site:
http://www.poweredupgamers.com.
Everything looks great on a widescreen monitor, but when I view it
on older 4x3 monitors the divs run into each other and the spacing
gets all messed up. This occurs regardless of the resolution the
monitors are using.
I thought by setting up margins with % (5% left margin for
left div, etc.) that the divs would change in size to fill the
pages regardless of the resolution the monitor is set at. The divs
do seem to adjust for the resolution, but the monitor format
appears to be a different issue. Do I need to set fixed div
positions or widths to fix this issue? If so, how do I set them to
ensure the page is filled properly (as little blank space as
possible) regardless of the monitor's resolution?
Does it have anything to do with fixed sizes for certain
images inside divs sizes based on % margins?
Thanks very much for any help!Resolution is not the critical issue. Browser viewport width
is. To make
your decision you need to have some ideas about the following
issues -
1. What is the primary target demographic for this site?
2. What are the browsing habits of that demographic? Do they
normally have
their browser window maximized on the screen?
3. If they usually have their browser maximized, what is the
typical screen
width?
4. If they usually do NOT have their browser maximized, what
is the MINIMUM
screen width in that demographic.
5. How do I want to build the page?
a. Fixed width and left aligned?
b. Fixed width and centering?
c. Flexible to fill whatever width from left to right?
d. Flexible (within limits) and left aligned?
e. Flexible (within limits) and centering?
As you can see, this decision is probably much more complex
than you
thought, and will require that you know quite a bit about
your intended
target visitor and their browsing habits.
If you elect to go with 5a, or 5b, then your decision would
be - 'what is
the mimimum browser width I want to support without
horizontal scrolling?'.
Once you have determined that minimum supported width, all of
your decisions
are made. That's how wide you want your page to be.
If you elect to go with 5c, then you just build your page
within a flexible
container (the simplest example - although an obsolet one -
would be to use
a 100% width table to hold the entire page). Be aware that
pages with
limited text content can look VERY sparse and empty on wide
viewports when
built in this way.
If you elect to go with 5d, or 5e, then you would add this
sophistication to
your decision matrix -
'what is the greatest width I want to allow the page and its
contents to
become?'
In this case, you would use the CSS styles - 'min-width' and
'max-width' on
the primary page container. Just so you'll know, although
these styles are
well supported *now*, earlier versions of IE (and some other
browsers) will
not support them so reliably.
So - which is it? 8)
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
==================
"juxtafras" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to develop a site:
http://www.poweredupgamers.com.
Everything
> looks great on a widescreen monitor, but when I view it
on older 4x3
> monitors
> the divs run into each other and the spacing gets all
messed up. This
> occurs
> regardless of the resolution the monitors are using.
>
> I thought by setting up margins with % (5% left margin
for left div, etc.)
> that the divs would change in size to fill the pages
regardless of the
> resolution the monitor is set at. The divs do seem to
adjust for the
> resolution, but the monitor format appears to be a
different issue. Do I
> need
> to set fixed div positions or widths to fix this issue?
If so, how do I
> set
> them to ensure the page is filled properly (as little
blank space as
> possible)
> regardless of the monitor's resolution?
>
> Does it have anything to do with fixed sizes for certain
images inside
> divs
> sizes based on % margins?
>
> Thanks very much for any help!
> -
Hi - stuck on what I think should be a fairly basic layout problem:
I have 2 divs, equal widths but varying heights, one floated to the left and one to the right so that they appear next to eachother on the page. The one on the left contains varying amounts of text, the one on the right contains a flash player so never varies.
Where the text for the left div is long, I want it to start off next to the player, but then flow beneath it rather than continuing downwards at the same width as the div. If I remove the width of the left div, so that it reverts to the container width, the player div positions itself below it, so I can't work out how to get the effect.
Can anyone help?Hi,
hope I understood in the right way: I used (translated from German DW) "modify table" and so I got one more row and two columns in your Main_Content. In one of the new columns I copied the image and beneath I took the text (you now can replace with image and text of your choice), like this:
If that's not a help for your question, please ask me again.
What concerns the width of the pictures, I would format them with PS or a similar program in the same wide.
Hans-G. -
Setting App Div relative to a Table
Hi. I'd like to set an AppDiv relative to a specific Table cell. So its x-y coordinates are 'locked' witin that cell, but the cell - and its table - may float within the page (for example, always in the center). How to?
Thanks in advance...First you would insert a relatively positioned <div> container in the table <td> cell (see below)
<td>
<div id="holder" style="position: relative;">
</div>
</td>
Then in the relatively positioned <div> container you would insert your absolutely positioned <div> (see below)
<td>
<div id="holder" style="position: relative;">
<div id="positioned">This is an absolutely positioned container</div>
</div>
</td>
Use some css to style and position the absolutely positioned <div>
#positioned {
position: absolute;
left: 0;
top: 100px;
width: 250px;
height: 200px;
background-color: #FC3; -
Hi All,
I want to draw an AP Div but I want it to have rounded corners. The reason being is that when I add a seperate background it will be more obvious and look better.
If anybody knows of a better way of adding a body of text with it's own background and rounded corners please can you let me know how to do it?
Many Thanks
Big_GeeWow Big_Gee! I think that's a Big_Question!
For a start, you can add rounded corners using CSS3 but it isn't widely supported accross all browsers. I don't think that DW will add those CSS rules but it won't take too much to find sample code on the web with a quick Google search on CSS Rounded Corners or something. Nancy O has recently responded to a rounded corner question here: http://forums.adobe.com/thread/657158?tstart=30. I don't konw if it makes a difference that you want the effect on AP Divs or not. I haven't read that you can't.
Adding a background image is achieved with CSS and you might be able to think about putting the rounded corners on the image in your graphics editor. That will depend partly on how flexible you site is and whether users can increase text size in the browser.
If you are using AP Divs (position: absolute) you need to be a bit cautious. General advice is to use them very sparingly and when other options don't achive what you want.
Martin -
CSS Styled DIVs that look like tables?
I've just redesigned my entire home web site using CSS div
positioning and I am now about 80% table free. However I have
several pages that I like lined up the way they are in multi
column, multi row tables like this:
http://www.cmhager.com/test/tabletest.shtml
Anyone have some good tutorials on how to accomplish this?
Thanks...Al Sparber- PVII wrote:
> "Thierry | www.TJKDesign.com"
<[email protected]> wrote in
> message news:[email protected]...
>> Let me remind you that the original poster asked how
to design his
>> web site
>> to be *table free*.
>> AFAIK, I answered his question.
>> So what did *you* bring to this thread exactly
besides your smart *ss
>> remark? (excuse my French)
>
> All I have to say to that, is Viva Italia :-)
Do you think because I'm French I care? LOL
I thought after all these years you'd know be better... FYI,
I didn't watch
yesterday and I was not watching 8 years ago.
> Look, Thierry, a poster could ask how to make an income
statement
> table-less and some folks will tell him how, while other
folks will
> advise him to keep it in a table. I think that perhaps
both Gary and I
> saw the fella's page and saw a matrix of images. If he
wants to do
> away with the images or the matrix and use a UL to
display a single
> column of links, then that's fine. I didn't read it that
way.
I'm sorry but nobody suggested the OP should "do away with
the images or the
matrix and use a UL to display a single column". The one
"column" display
was suggested as an advantage of the UL over the table in a
small viewport.
> By the way, replacing the "a" in "***" with an asterisk,
does not
> sanitize or add polish to your propensity for
name-calling. "Mr.
> Semantic" is a much nicer and could have been taken as
an honorific -
> in a good-natured way.
You can insult people without calling them names and I'm sure
you know that
1. The OP asks a question
2. I answer his question.
3. You say that it would be not logical.
4. I list my arguments for using an UL rather than a table
and politely ask
why it would not be logical to use CSS for layout.
5. Rather than answering my questions (or simply chose to not
reply at all)
you decide to come up with:
"Mr. Semantics, I beg your forgiveness. Now I must go make up
my laundry
list. I'm sure the original poster will have a grand old time
making a list
just for you."
I'm sorry but in my book I find this reply insulting. It's
like when you're
talking to someone and he turns your back on you before
you're finished
answering his question. That's the kind of behavior that
makes me call
people smart *ss. I could have used "Mr" though... ;)
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
Maybe you are looking for
-
J1iex issue : J_1IEXCDTL GR qty doesn't get updated
Hi , we have a process like .... Capture excise invoice , MIGO 103 , MIGO 105 and Post excise invoice. Facing one issue wherein system is not updated GR QTY in J_1IEXCDTL table. The step I am following are 1) Capturing excise invoice ( Say number is
-
How to use one dataTable to dynamically assign different values?
For example, there is only one popup window that contains one dataTable. For every commandButton that calls this popup window will result in different dataTables. How to do that? Thank you.
-
Best options for mass pricing load/update?
Hi folks, I need to design an interface to load PR00 pricing condition data into SAP from a 3rd party (custom) system. The interface will need to support (1) creating brand new condition records, (2) changing existing condition records (example i: p
-
Upgraded to CS6 from CS5. now both are running?
I just upgraded to CS6 from CS5. i was told by tech support that i would be prompted to enter my new CS6 serial number to start download and that I would also be prompted to enter my CS5 serial number to activate the upgrade of my existing software.
-
Compaq 15 wifi icon not showing in windows 7
Hello I have a PC Notebook Compaq 15 h000ss, I have just installed Windows 7 64 bits and the wifi icon is not showing, the wifi adapter is not showing either in device manager, and the light on the f12 wifi key is always on. Please, any idea on how c