Adobe Community: Divs Overlapping

Currently Being Moderated

1. MurraySummers,

Jul 31, 2012 1:02 PM in reply to NoizyCr1cket

Report

Rule #1 - don't use absolute positioning for containers that will have text content in them. Let the normal flow of the page's code place these containers on the page without any positioning at all.

What DW are you using?

Try using this for the #middleContentWrap rule -

#middleContentWrap {

width: 988px;

margin-top: 659px;

margin-left: 28px;

margin-right: 28px;

overflow: hidden;

}

|

Mark as:

Currently Being Moderated

2. John Waller,

Jul 31, 2012 1:04 PM in reply to NoizyCr1cket

Report

PS you realize that the text you've redacted in the screenshots is clearly readable in the HTML code you've posted?

|

Mark as:

Currently Being Moderated

3. NoizyCr1cket,

Jul 31, 2012 1:49 PM in reply to John Waller

Report

Yeah, it doesn't matter anymore anyway. The guy I'm doing this for doesn't care.

|

Mark as:

Currently Being Moderated

4. NoizyCr1cket,

Jul 31, 2012 2:15 PM in reply to MurraySummers

Report

Murray,

1. I have to use absolute positioning or else that element will appear above the container's (wrapper's) background image by pushing it down. That was a problem I ran into when I started this project, so I set the wrapper to relative position, z-index:1, and for every element inside it, I used position:absolute, z-index: (1 + most recent element's z-index).

2. I'm using Dreamweaver CS5.5

3. With this CSS rule, it still appears the same in both Design and Live View except for the fact that the width change fixed the problem with the image overflowing to the right.

|

Mark as:

Currently Being Moderated

5. John Waller,

Jul 31, 2012 2:19 PM in reply to NoizyCr1cket

Report

Got a link so we can view the whole page in our browsers?

|

Mark as:

Currently Being Moderated

6. NoizyCr1cket,

Jul 31, 2012 2:51 PM in reply to John Waller

Report

John,

I just uploaded it to my web server. But don't visit my actual website because it's crap. I'm working on it.

And by the way, just a reminder, it looks correct in browser view, but in Dreamweaver Design View (non-live) view, it doesn't.

Here's the link: http://gchiller.com/services.html

|

Mark as:

Currently Being Moderated

7. Rik Ramsay,

Aug 3, 2012 1:06 PM in reply to NoizyCr1cket

Report

NoizyCr1cket wrote:
1. I have to use absolute positioning...

Ever heard the saying "there is more than one way to skin a cat?"

You could/should use floats and the use of clear/overflow to get your layout working properly. As a side note, your menu system could do with being more structured and instead of graphics use text.

I have pasted below a sample code (where I have also cleaned up a lot of your "extra" tags) to show you how it could be done without absolute positioning. This is by no means perfect but should help.

I also spotted that you had set the menu active state in such a way that would involve a different set of styles for each page. Try using a persistent page indicator instead.

<!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>Arrow Heating and Air Conditioning Service | Hours and Rates</title>
<style>
/* CSS Document */
* {margin:0;padding:0;border:0;}
html {height:100%}
body {
          background:#FFF url(http://gchiller.com/Images/Sideburns.png) repeat-y center;
          font-family:Arial, Helvetica, sans-serif;
          font-size:28px;
          text-align:left;
          color:#000000;
}
#wrapper {
          width:1024px;
          height:auto;
          padding-bottom:50px;
          margin:0 auto;
          background:url(http://gchiller.com/Images/Main%20Banner.png) no-repeat 0px 45px;
          overflow:auto;
}
#header {
          width:100%;
          height:49px;
          margin-top:25px;
          text-indent:-9999px;
          background:url(http://gchiller.com/Images/Title.png) no-repeat 60px 0;
          float:left;
}
#motto {
          width:454px;
          height:32px;
          margin:15px 20px 0 0;
          background-image:url(http://gchiller.com/Images/Motto.png);
          text-indent:-9999px;
          float:right; 
}


/* navigation and use corresponding navbutton for page here */
#navigation {
          width:522px;
          height:260px;
          margin-top:100px;
          margin-left:69px;
          float:left; 
}
#navigation h3 {text-indent:-9999px;}
a#homeNavLink {
          display:block;
          width:157px;
          height:90px;
          margin-left:21px;
          float:left;
          background-image:url(http://gchiller.com/Images/homeNav1.png); 
}
a#homeNavLink:hover {background-image:url(http://gchiller.com/Images/homeNav2.png);
}
a#productsNavLink{
          display:block;
          width:206px;
          height:91px;
          float:left;
          margin-left:116px;
          background-image:url(http://gchiller.com/Images/productsNav1.png);
}
a#productsNavLink:hover {background-image:url(http://gchiller.com/Images/productsNav2.png); 
}
a#servicesNavLink {
          display:block;
          float:left;
          margin-top:52px;
          width:200px;
          height:90px;
          background-image:url(http://gchiller.com/Images/servicesNav2.png); 
}
a#servicesNavLink:hover {background-image:url(http://gchiller.com/Images/servicesNav2.png); 
}
a#homeownertipsNavLink {
          display:block;
          width:261px;
          height:140px;
          float:left;
          margin-top:29px;
          margin-left:61px;
          background-image:url(http://gchiller.com/Images/homeownertipsNav1.png); 
}
a#homeownertipsNavLink:hover {background-image:url(http://gchiller.com/Images/homeownertipsNav2.png); 
}
/* end navigation */


#contactBar {
          width:100%;
          height:77px;
          background-color:#004683;
          margin:80px 0;
          float:left;
          clear:both;
}
#contactBar h2 {
          color:#FFF;
          font:38px/77px Arial, Helvetica, sans-serif normal;
          text-align:center; 
}
#middleContentWrap {
           width:984px;
           padding:0 20px;
           clear:both;
}
#ratesP {width:598px;float:left;}
#ratesP h2 {
          font-size:40px;
          font-weight:normal;
          text-align:center;
          padding-bottom:10px; 
}
img#ratesPic {
          width:382px;
          height:322px;
          float:left;
          display:block; 
}
#ratesWrap {width:100%;float:left;}
.subHeader {color:#004783;}
#ratesDay, #ratesTime, #ratesPrice {
          font-size:26px;
          text-align:center;
          float:left;
          margin-top:40px;
}
#ratesDay {width:192px;}
#ratesTime {width:201px;margin-left:22px;}
#ratesPrice {width:131px;margin-left:27px;}
#ratesSidenote {
          width:362px;
          float:left;
          text-align:center;
          margin-top:5px;
          margin-left:32px;
}
</style>
</head>


<body>
<!--Wrapper-->
<div id="wrapper">


  <div id="header">
    <h1><a href="index.html">Arrow Heating &amp; Air Conditioning Service</a></h1>
  </div>

  <div id="motto">
    <h2>Precision service you can count on.</h2>
  </div>

  <div id="navigation">
      <a href="index.html" id="homeNavLink"><h3>Home</h3></a>
      <a href="products.html" id="productsNavLink"><h3>Products</h3></a>
      <a href="services.html" id="servicesNavLink"><h3>Services</h3></a>
      <a href="homeownertips.html" id="homeownertipsNavLink"><h3>Homeowner Tips</h3></a>
  </div>

  <div id="contactBar">
      <h2>Contact us today at 417-522-4467</h2>
  </div>

  <div id="middleContentWrap">
    <div id="ratesP">
      <h2>Services</h2>
      <p>We here at Arrow Heating &amp; Air Conditioning Service believe that quality and competent service should not have to cost an arm and a leg. You will find that our rates are remarkably low while maintaining a level of service that is second to no one. You won’t be surprised with those extra “gotcha” charges that seem to be the norm such as – truck charge, trip charge, fuel charge, etc. Our rates are as follows:</p>
    </div>
    <img id="ratesPic" src="http://gchiller.com/Images/ratesPic.png" />
    <div id="ratesWrap">
    <div id="ratesDay">
      <p><span class="subHeader">Day</span>
      <br />
      Monday - Friday
      <br />
      Monday - Friday
      <br />
      Saturday
      <br />
      Sunday
      </p>
    </div>

    <div id="ratesTime">
      <p><span class="subHeader">Time</span>
      <br />
      7:00am - 6:00pm
      <br />
      After 6:00 pm
      <br />
      All Day
      <br />
      All Day
      </p>
    </div>

    <div id="ratesPrice">
      <p><span class="subHeader">Price</span>
      <br />
      $40.00/HR
      <br />
      $60.00/HR
      <br />
      $60.00/HR
      <br />
      $65.00/HR
      </p>
    </div>

    <div id="ratesSidenote">
      <p>Hourly rates are billable in half hour increments with one hour minimum being charged per service call.
      <br />
      Equipment replacement quotes are free to the customer.
      </p>
    </div>
    </div>
  </div>

</div>
</body>
</html>

|

Mark as:

Currently Being Moderated

8. MurraySummers,

Aug 3, 2012 1:17 PM in reply to Rik Ramsay

Report

@Noizy Just so you'll know, Design view is NOT a browser. Many things will not look correct in Design view. Do not rely on it for evaluating your layout's integrity. Always preview in the browser, or at the least, use Live view.

|

Mark as:

Currently Being Moderated

9. NoizyCr1cket,

Aug 3, 2012 5:53 PM in reply to Rik Ramsay

Report

@Rik: Wow, thanks. That really helps clean up my code. But I have two questions: 1. What does the use of the a's in front of the navbutton id selectors in the css benefit? 2. How come before, new elements would push the wrapper's background image down and appear above it?

And I did visit the link to the tutorial on persistent page indicators so I'm thinking that the "a" thing in front of those id selectors is part of that, but you never included a body class selector like in the tutorial, so I'm not sure.

EDIT: One more thing: What's the point of floating an element that has 100% width?

|

Mark as:

Currently Being Moderated

10. NoizyCr1cket,

Aug 3, 2012 9:52 PM in reply to MurraySummers

Report

@Murray: Ok, so I should only use Live View when constructing a website? Then what is Design view for?

|

Mark as:

Currently Being Moderated

11. MurraySummers,

Aug 4, 2012 5:19 AM in reply to NoizyCr1cket

Report

I didn't say that. Design view is quite useful as an operating view of the layout but it is not necessarily completely accurate in its rendering. Live view is not so useful if you are not a coder since you cannot edit the layout in Live view (you can, however, edit the code in Live view). The utility of Design view will depend entirely on the complexity of your code and the method you have used for page building. The more advanced CSS methods you use, the less accurate Design view will become - but for those using advanced CSS methods, this is usually not a problem. But when it comes down to a decision based on the way your page is rendered, either use Live view (which will only show you how the page would render in Safari or a WebKit-based browser), or an actual browser preview.

To answer your other questions:

1. What does the use of the a's in front of the navbutton id selectors in the css benefit?

** There is no benefit in that case. You can safely remove them, since a given ID value can only be present once on the page, qualifying that ID in the selector with the tag is redundant and unnecessary.

2. How come before, new elements would push the wrapper's background image down and appear above it?

** Your page layout was such that the element containing the background image was what was being pushed down. The background image itself was not being affected, its container was.

3. One more thing: What's the point of floating an element that has 100% width?

** Good catch. There's no benefit to this.

You should also change this -

html { height:100%; }

to this -

html { overflow-y:scroll; }

The former will have no impact on your layout, while the latter will force all pages to have a vertical scrollbar, avoiding the issue that short pages (with no vertical scrollbar) seem to shift right by about 10px when viewed after long pages (having a vertical scrollbar).

Finally - I'm not a great fan of CSS resets like this -

* {margin:0;padding:0;border:0;}

A wildcard reset forces the browser to scan through the page DOM looking for and then styling every tag with zero margins/padding/borders - that could take a perceptible amount of time on a busy page. In addition, no element that I can think of has a default border, so resetting the border to zero (which is a weird usage anyhow - to remove a border, one would normally use "border:none;") seems like a wasted effort. And last, I depend on those default margins for my layouts, so resetting them often means I have to put them back which I don't like doing. But that's just me.

|

Mark as:

Dreamweaver

Divs Overlapping

Jul 31, 2012 12:50 PM

More Like This

Bookmarked By (0)

Answers + Points = Status