Div/css problem

http://video-excel.com/my_div_page.html
i found this follow-along tutorial on creating pages with
divs and css.
naturally, though, it didn't tell you EVERYTHING you needed
to know [smile]
so please go to the above page. notice the gaping hole in
the white section.
obviously my question is going to be: what do i need to do in
css to make both
the gray and/or white boxes to close up to the footer if one
or the other has
less content?
thanks.

Google "faux column" - could that do it?
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
==================
"Deaf Mike" <[email protected]> wrote in
message
news:esh94v$5gr$[email protected]..
>
http://video-excel.com/my_div_page.html
>
> i found this follow-along tutorial on creating pages
with divs and css.
> naturally, though, it didn't tell you EVERYTHING you
needed to know
> [smile]
>
> so please go to the above page. notice the gaping hole
in the white
> section.
> obviously my question is going to be: what do i need to
do in css to make
> both
> the gray and/or white boxes to close up to the footer if
one or the other
> has
> less content?
>
> thanks.
>

Similar Messages

Css problem in internet explorer

Hi to all!
On my page as part of the page template I have build in a little drop-down user panel on the left top of the page.
html:<div id="userpanel">
<span><img src="'#APP_IMAGES#openSlidedown.png" /> <a>logon: &APP_USER.</a>
<div id="userpanel_hsreg"><p>Autorisiert für: &APP_CODES_DISP.</p>
<p>| #NAVIGATION_BAR#</p>
</div></span>
</div>css:#userpanel,
#userpanel * {
        position:relative;
     font-family:verdana; font-size:12px;
     margin:0; padding:1px; border:0;
     white-space:nowrap;
#userpanel a,
#userpanel span { display:inline-block; }
#userpanel>span>a { color:#999; }
#userpanel span:hover div { display:block; }
#userpanel>span:hover > a { color:black; }
#userpanel_hsreg {
          display:none;
          position:absolute;
          left:+5px;
          top:+24px;
          background:#fff;
          padding:10px 18px;
          line-height:180%;
          border:1px solid silver;
          border-radius: 6px;
          box-shadow:1px 2px 5px #aaa;
          z-index:99;
#userpanel>span>a {
          border-bottom:1px solid silver;
          margin-top: 5px;
          }So what happens is this: if the user hovers over the "+logon: username+", a little box pops up with some further information (the item &APP_CODES_DISP.) and the logout-link. Below this link, the Navigation bar starts. So while the box pops up, it covers a part of the region below, what its meant to do.
The promlem is, that this doesnt work in Internet Explorer properly, when its launched from apex. Instead, the popup-box is displayed behind the region below. In Mozilla, as always, everything worls fine. This problem ocured already, when I opened the html-file from desktop, but I fixed that by putting the z-index-attribute in. Only now, in Apex, its still now working in IE. I am not that of an expert in css. I have tried different XHTML declarations in the header, all no difference.
The current one:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This might be a bit of a tricky issue, so I dearly hope, someone can help me. (Similar problem like the other threat I started recently here where the round-corner attribute is not working in IE-Apex, but this time its a bit more vital. :) )
I have v 4.0.2.
Thanks and greetings,
tobi

Hi again!
This turns out not to be an APEX-issue, as I tought first, but rather a css-problem. Maybe therefore I'm in the wrong forum, but maybe someone can help me anyway.
I have created two pages with the relevant element: (login with test/test please) one page with standard tabs and another with my own html-navigation. Now Internet Explorer has the option "Compatibility View" which in our company is activated by default. On page 1 it makes no difference, but on the second, with Compatibility View on, the drop-down box apeares behind my selfimplemented navigation bar. WHY IN GODS NAME DOES THIS HAPPEN??
I have posted the same question in a german web-developer forum (here) also, because its quite urgent that I solve this, and as I mentioned above, many colleagues work with IE.
So if anyone here is a css-IE9-expert... :)
Thanks and best regards,
Tobi
edit: ok, its solved. The userpanel-div needed a "z-index:1;" attribute for IE. :)
Edited by: tpetri on 03.09.2012 09:53

Yes another strange IE CSS problem

Hi all,
I was wondering if some kind soul could help me work out
hopefully my last CSS problem. If you look at my site:
http://www.aclighting.com/shop/
in IE you will see a light blue line at the bottom of the left hand
side navigation menu. In Firefox and other browsers it isn't there,
they are behaving, but I can't work out why IE is showing that
there.
This is the HTML
Class mid is what shows the blue line.
#shop #content-wrapper #menu .mid {
background: url(/images/menu_div.gif) no-repeat left top;
padding-top: 9px;
padding-left: 5px;
color: #FFFFFF;
font-weight: bold;
font-size: 100%;
I don't understand why its showing near the botton in IE.
Steve

Doooza wrote:
> Hi all,
> I was wondering if some kind soul could help me work out
hopefully my last CSS
> problem. If you look at my site:
http://www.aclighting.com/shop/
in IE you will
> see a light blue line at the bottom of the left hand
side navigation menu. In
> Firefox and other browsers it isn't there, they are
behaving, but I can't work
> out why IE is showing that there.
> I don't understand why its showing near the botton in
IE.
Its on you background image?
http://www.aclighting.com/images/menu_bottom.gif
IE is probably making a container slightly higher for some
reason and
therefore shows more of te background image.
Just use a 'dedicatted' background image minus the blue line

Possible CSS problem?

Hi All,
I am in the process of making a website for a friend, when I ran into what looks like a css problem.
I purchased the css file in a template from a guy who does tutorials on youtube, I have contacted him on several occasions but his customer service is pretty awful and he hasn't replied to any contact.
When using a mobile or tablet to view the website the header and footer area is pushed to the left. (please see attached image)
I added 100% to the following containers but still it never changed them.
#header-wrapper
#footer-content-wrapper
#footer
If I change the widths to 1000px then it sorts it out for the mobile view but then the website on a pc/laptop is distorted.
the website can be found at www.leightonsterling.com
Thankyou in advance.

There's nothing wrong with your site. That's exactly what fixed-width, centered layouts do in smaller displays. They move to the left. If you want a responsive web site that adjusts to mobile and tablet device widths, you need a Responsive Layout.
Look at FluidGrid Layouts in Dreamweaver CS6 & CC. Or use one of the following Responsive Frameworks to jump start your project.
Project Seven's Page Packs (commercial CSS Templates, Widgets & Extensions for DW)
http://www.projectseven.com/products/templates/index.htm
Excellent products, excellent customer support. A+++
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Fluid Grid Layouts in CS6
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
Nancy O.

CSS and DIV alignment problem in IE6

I am working on a new site based on a DW template. I have
modified the right layout slightly for a flash header and also for
a footer div. I am also using alternate CSS files to fix IE6
display problems.
The site looks correct in IE7 and Safari, but in IE6
something is causing the right DIV to collapse. I have tried
adjusting the padding and margins for the divs in the alternate css
file several times with different results.
Does anyone have suggestions on how to correct this that I
might be overlooking.
site can be viewed at
http://www.lasnapshotz.com
Thanks in advance.

Sorry typed the link wrong originally. Here is the real link:
http://www.lasnapshotz.com

Css problem in spry gallery demo, ie "doubled margin" for thumbnails

http://labs.adobe.com/technologies/spry/demos/gallery/
View page in both Firefox and IE6. Note that in Internet
Explorer (Windows), the margin on the left is double that of the
same in Firefox. This is a well-documented IE CSS issue that occurs
when a floated element also has margin set on the side to which it
is floated, as in float:left; margin:5px;
It's an issue when the margin is such that it causes wrapping
within the thumbnails parent container... in IE browsers.
Add display:inline to the #thumbnails div rule to correct the
problem.
Just FYI.
Donna Casey

Thanks Donna! The fix will appear in the next drop.
--== Kin ==--

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

CSS problem with IE

Hi
I have created a style sheet and linked it to a template to
form the basis of a website. I have included a background image in
the masthead. It works fine in Firefox, but when I review the
template or any pages made from the template in Internet Explorer
the background image is not visible. I have checked my CSS with the
W3C validator and there are no errors, so I am assuming that it is
an IE problem. If anyone can help it would be great, as at least
50% of the people who will wish to view the site I am trying to put
together will be using IE.

Assuming that this is the correct path to the background
image, change
this -
background: url("../graphics/for banner.jpg")no-repeat right
top;
to this -
background: url("../graphics/for banner.jpg") no-repeat right
top;
(note missing space after the closing parenthesis)
Also, it's very bad form to have spaces in your
file/pathnames. I suuggest
that you rename those files.
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
==================
"sallw" <[email protected]> wrote in message
news:[email protected]...
> Oh, and here is the code to the CSS
>
> /***********************************************/
> /* HTML tag styles */
> /***********************************************/
>
> body{
> font-family: Arial,sans-serif;
> color: #333333;
> line-height: 1.166;
> margin: 0px;
> padding: 0px;
> background-color: #f8f8fa;
> width: 100%;
> }
>
> a:link, a:visited, a:hover {
> color: #006699;
> text-decoration: none;
> }
>
> a:hover {
> text-decoration: underline;
> }
>
>
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial,sans-serif;
> margin: 0px;
> padding: 0px;
> }
>
> h1{
> font-family: Times New Roman;
> font-size: 120%;
> color: #002a69;
> }
>
> h2{
> font-size: 114%;
> color: #006699;
> }
>
> h3{
> font-size: 100%;
> color: #002a69;
> }
>
> h4{
> font-size: 100%;
> font-weight: bold;
> color: #002a69;
> }
>
> h5{
> font-size: 100%;
> color: #334d55;
> }
>
> ul{
> list-style-type: square;
> }
>
> ul ul{
> list-style-type: disc;
> }
>
> ul ul ul{
> list-style-type: none;
> }
>
> label{
> font: bold 100% Arial,sans-serif;
> color: #334d55;
> }
>
>
> /***********************************************/
> /* Layout Divs */
> /***********************************************/
>
> #masthead{
> margin: 0;
> padding: 10px 0px;
> background: url("../graphics/for banner.jpg")no-repeat
right top;
> border-bottom: 1px solid #cccccc;
> width: 100%;
>
> }
>
> #navBar{
> margin: 0 80% 0 0;
> padding: 0px;
> background-color: #eeeeee;
> border-right: 1px solid #ccc;
> border-bottom: 1px solid #ccc;
> }
>
> #content{
> float:right;
> width: 75%;
> margin: 0;
> padding: 0 3% 0 0;
> }
>
>
> /***********************************************/
> /*Component Divs */
> /***********************************************/
>
> #siteName{
> margin: 0px;
> padding: 0px 0px 10px 10px;
> }
>
>
> /*************** #pageName styles **************/
>
> #pageName{
> padding: 10px 0px 0px 0px;
> }
>
>
> /************* #breadCrumb styles *************/
>
> #breadCrumb{
> font-size: 80%;
> padding: 5px 0px 5px 10px;
> }
>
>
> /************** .feature styles ***************/
>
> .feature{
> padding: 0px 0px 10px 10px;
> font-size: 80%;
> }
>
>
> /************* #siteInfo styles ***************/
>
> #siteInfo{
> clear: both;
> border: 1px solid #cccccc;
> font-size: 75%;
> color: #cccccc;
> padding: 10px 10px 10px 10px;
> margin-top: 0px;
> }
>
>
> #siteInfo img{
> padding: 4px 4px 4px 0px;
> vertical-align: middle;
> }
>
>
> /************* #search styles ***************/
>
> #search{
> padding: 5px 0px 5px 10px;
> border-bottom: 1px solid #cccccc;
> font-size: 90%;
> }
>
> #search form{
> margin: 0px;
> padding: 0px;
> }
>
> #search label{
> display: block;
> margin: 0px;
> padding: 0px;
> }
>
>
> /*********** #navBar link styles ***********/
>
> #navBar ul a:link, #navBar ul a:visited {display:
block;}
> #navBar ul {list-style: none; margin: 0; padding: 0;}
>
>
> #navBar li {border-bottom: 1px solid #EEE;}
>
>
> html>body #navBar li {border-bottom: none;}
>
>
>
> /*********** .relatedLinks styles ***********/
>
> .relatedLinks{
> margin: 0px;
> padding: 0px 0px 10px 10px;
> font-size: 90%;
> }
>
> .relatedLinks h3{
> padding: 10px 0px 2px 0px;
> }
> .relatedLinks a:visited{
> color: #006699;
> text-decoration: none;
> }
>
> .relatedLinks a:hover{
> color: #006699;
> text-decoration: underline;
> }
> /************** #headlines styles **************/
>
> #headlines{
> margin: 0px;
> padding: 10px 0px 20px 10px;
> font-size: 80%;
> }
>
> #headlines p{
> padding: 5px 0px 5px 0px;
> }
>

Ap Div Tag Problem

OK so this is my first wbesite in dreamweaver so and i ran into a problem....i made a AP div tag but i can get it where i want it.....my backrground is center in the website and i put my nav links in a AP div tag so i could then put them in a certain area where i wanted.(i think is the only way i know hjow to do this) Well how can i get them centered left and right in the website but the top and bottom i want to place by hand???? they are where they need to be when i preview it in the browser but in the dreamweaver file they are down and to the right......i had to keep messing with it and previewin it until it showed up where i wanted it to in the browser. Im sure i have a setting worng either in my CSS or html.... Please help!

First rule of web design is to stop thinking like a graphic or print designer. Web pages need to be flexible to perform well on different devices, browsers, user settings, screen and text sizes. And web designers have almost no control over these user-centric variables.
The second rule of web design, you cannot precisely position text or other elements on top of big background image and expect it to stick. It just doesn't work.
http://alt-web.com/Backgrounds.shtml
If your navigation bar requires a background, it should be separate from the page background. You'll need to use solid colors or create image slices for your nav bar in your graphics editor.
Third rule, use default CSS positioning (which is no positioning at all). Align objects with CSS margins, padding and floats.
Basic CSS Layout. (No APDivs used, no animals were harmed)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Also read this tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Good luck with your project!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS problems in Dreamweaver CC?

I am having problems getting the CSS to update properly when I make changes to the code in the CSS document in the left panel. I have to go into CSS Designer to make the changes in addition to writing code in the css document, but it is often easier to update the code in the document and not use CSS Designer.
At one point, a bizarre thick border appeared on an element that I had NOT styled in either CSS Designer or in the CSS document. When I tried to change the border, the border did not show up in settings in CSS Designer or in the CSS document panel. The only place that affected the border was by using the Properties in the panel at the bottom of the app window. Once I accessed the "CSS Designer" from the Properties panel, I could see the settings and get rid of them.
Wondering if this is some kind of bug? Or if anyone else is experiencing problems making changes to css in the css document window?

I'll look for a DW forum. FYI, I'm on a Mac OS10.8.5, with most recent update for DW CC. I attached an external css to the file and it is shown correctly under Sources in CSS Designer (no extra styles are in the head of the document); that part works just fine. Formatting borders is pretty straight-forward—specify style, width, color for each side.
The question is why changes to the css don't always take effect if I write the css as code in the css panel (on the left side using split view)—even when I do a save. When I ALSO change settings in CSS Designer the changes DO appear in the CSS code panel, even duplicating the code I just entered there. One time I had to use the "Edit Rule" in the Properties box at the bottom of the app window to get the css to update.
The lack of consistency interferes with workflow.
I wish I could write the css in the code panel and have a refresh button like the one for Source Code changes.
Often it is much faster to write the css in the code panel. Scrolling through all the settings of the CSS Designer can be tedious and it's easy to make mistakes.
An example of this css is a sidebar div with a bottom border. When I was setting this up, it ended up with a thick solid black bottom border and I had trouble making a change. Eventually I succeeded via the Properties panel, but it should have updated via the css code panel OR CSS Designer.
#sidebar {
border-bottom: thin dotted #055900;
So, maybe this is a Creative Cloud issue, or maybe a DW issue.

Css problem in media for ipod and mobile

I have a problem applying code for a menu on a webpage.
I have posted the site example on www.tdrd.karoo.net
and the complete zip at www.tdrd.karoo.net/index.zip
I have applied the effect fine for the Full screen model media section of responsive.css but when I try to tailor the menu for the smaller resolutions it is only adjusting it for the full screen version.
I have applied the middle resolution in the example uploaded but for some reason it is not applying it to the model.
Please can anyone shed light as why this could be - the clue has to be somewhere in the nav section of the css....
Thank you
Terry

Cut/paste in new Dreaweaver document, view in browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Naeci Payroll</title>
<script src="http://www.tdrd.karoo.net/js/jquery1-7-2.min.js"></script>
<script src="http://www.tdrd.karoo.net/js/respond.min.js"></script>
<script>
$(function() {
var pull         = $('#pull');
menu         = $('nav ul');
menuHeight    = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
</script>
<script>
window.onload=
window.onresize=function(){
var width = document.getElementById('header').offsetWidth;
document.getElementById('header').style.height = width*22/100 + 'px'
</script>
<style>
    @charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    10;
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 98.1818%;
    padding-left: 0.909%;
    padding-right: 0.909%;
#header {
position:relative;
background: url(http://www.tdrd.karoo.net/img/refinery.jpg);
background-size: 100% 100%;
nav {
display: block;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
nav ul {
padding: 0;
margin: 0;
width: 100%;
nav li {
padding: 0;
margin: 0;
list-style: none;
nav a {
color: #fff;
display: block;
padding: 0 0 0 15px;
border-bottom: 1px dotted #fff;
width: 100%;
text-decoration: none;
line-height: 40px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
nav li:last-child a {
    border-bottom: none;
nav a:hover {
    color: #FFF;
    background-color: #8c99a4;
nav ul {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
/* nav styles */
nav {
clear: both;
overflow: hidden;
nav li {
display: inline;
float: left;
width: 20%;
nav a {
color: #fff;
display: block;
border-bottom: 0;
text-align: center;
border-right: 1px solid #576979;
nav li:last-child a {
border-right: none;
nav ul {
display: block;
nav a#pull {
    display: none;
</style>
</head>
<body>
<div class="gridContainer clearfix">
<div id="header">
<div class="content"> </div>
</div>

<nav>
<a href="#" id="pull">Menu</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contract History</a></li>
<li><a href="#">Curriculum Vitae</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</div>

</body>
</html>

CSS Problem - Background repeat & Max/Min Width

I have the problem at lower resolutions that the content div sticks out of the main document.
Or in fact, the content isnt sticking out, its the background repeat that is in the right of the screen thats pushed into the doc.
And also the background repeat isnt always repeating till bottom. It doesnt matter how big a negative margin is.
How can i let the background repeat right stick to the end of the document instead of the width of screen?
How can i let the repeat continue so it goeas all the way down?
Here's the CSS:
@charset "utf-8";
/* CSS Document */
/* Main Floats */
html,body {
     height:auto;
     min-width:800px;
     width:auto;
     background: #FFFFFF url(../Art/Background.png) no-repeat center;
     background-attachment:fixed;
     color:#000;
     margin:auto;
#BackGrRepeat1{
     float:right;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_right.png) repeat-y right top;
     background-attachment:fixed;
     margin-right:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#BackGrRepeat2{
     float:left;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_left.png) repeat-y left top;
     background-attachment:fixed;
     margin-left:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#WContainer{
     margin: 10px auto;
     width:80%;
     background:none;
     min-height:50%;
     line-height: 130%;
#WHeader{
     padding: .5em;
.TabbedPanelsContentGroup{
     min-width:600px;
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 172px;
     background: none;
     margin: 0;
     margin-left:-3em;;
.VTabbedPanels .TabbedPanelsContentGroup {
     margin-left: 172px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;
#WFooter{
     clear: both;
     margin: 0;
     padding: .5em;
/* Text Styles */
h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#05692E;
font-weight: bold;
font-style:italic;
font-size: 3em;
line-height:105%;
h2{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#078330;
font-weight: bold;
font-size: 2em;
line-height:105%;
p{
font-family: "Verdana", verdana, arial, helvetica, sans-serif;
font-size: 1em;
margin-top: 0;
.small{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: .7em;
text-align:center;
/* Menu Buttons */
.TabbedPanelsTabGroup ul{
list-style-type: none;
padding: 0px;
margin: 0px;
.TabbedPanelsTabGroup li{
list-style-type: none;
padding: 0px;
margin: 0px;
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
/* Text Images */
.floatright
float: right;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatright img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
.floatleft
float: left;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatleft img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
/* Message Screens */
#message{
     margin: 50px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;

I think you're going about this the wrong way. When you float content, it is removed from the normal flow. That's why your floated right background doesn't reach page bottom.
Look at this DEMO of a centered liquid layout page.View source in browser.
http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
Using my demo as an example, you could place a repeating, solid light-green image in the body to give the page its borders. Add another repeating background to the #wrapper division.
Add a 3rd background image or light color to the #content division.
Use floats for sidebar content only.
Hope this helps.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

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.

Css problem with image

Hello,
I am just starting working with dreamweaver cc for 3 months and try to create a website.
I try to learn step by step CSS uses but since some weeks I have some problems in displaying figure and caption into this page.
It seems very easy when I look for other websites
http://analytics-consulting-v501.businesscatalyst.com/laboratoire_test_2.html
I try to have two images and their captions on the same line. and so on , line after line.
and then isotope to filter them using the criteria in the first line.
Of course, I have test many ways but without success... probably due to a lack of work with CSS.
Thank you very much for any help !!!
Jean-François

I have removed all of your CSS to show images and associated caption being placed in a document.
<!DOCTYPE html>
<html>
<head>
<title>Analytics Consulting</title>
<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    width: 1000px;
    margin: auto;
.thumb {
    width: 50%;
    float: left;
    padding: 15px 25px;
div.thumb:odd {
    clear: both;
.thumb img{
    width: 70%;
    display: block;
    margin: auto;
</style>
</head>
<body>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
</body>
</html>

Firefox CSS problem

For some reason Firefox does not display my web page
correctly and IE7 does.
The problem is that the page border (given the id of
'wrapper') does not enclose the page's divs (indicated by white
box), as seen on
http://users.bigpond.net.au/csteed/mercury/new%20index.htm
- in Firefox.
The CSS is available at
http://users.bigpond.net.au/csteed/mercury/layout.css

csteed wrote:
> For some reason Firefox does not display my web page
correctly and IE7 does.
>
> The problem is that the page border (given the id of
'wrapper') does not
> enclose the page's divs (indicated by white box), as
seen on
>
http://users.bigpond.net.au/csteed/mercury/new%20index.htm
- in Firefox.
>
> The CSS is available at
http://users.bigpond.net.au/csteed/mercury/layout.css
>
You appear to be missing the closing </div> tag for
your 'wrapper <div>.
Try adding it just before the closing </body> (see
below) and also add
the <br style-"clear: both;"> as shown.
<p>Copyright 'The Mercury Centre'
2007</p></div>
</div>
<br style="clear: both;">
</div>
</body>

Div/css problem

Similar Messages

Maybe you are looking for