Overlapping div problem
I added a small div with a border just above the footer of a perfectly functioning page, and the border wants to surround practically the whole page. What happened?
http://www.aptcoweb.com/dev/vip/index2.htm
Here's what it was: http://www.aptcoweb.com/dev/vip/index.htm
That's what happens you neglect to clear your floats from above.
#join {
clear: both;
Nancy O.
Similar Messages
-
Need help with overlapping divs!
Hey everyone,
I'm working on another website and I have come up against a common problem for newbie designers from what I hear, the dreaded overlapping div problem! I have a 2 column fixed layout with a floating left div. My left div has my nav bar and various images. When my main content div has more content than the left floating div, the left div border does not reach the footer! Until now, I have gotten by with just hitting return in my left column div until it reaches the footer. I am sure it is not the right way to do it but it has worked so far. The problem is, now one of the pages has the left column div overlapping onto the footer! I did some reading and I am guessing it involves either the box properties or clear float which I am not too familiar with.
Any advice would be stellar! I know this is just another stumbling block to get over but I would feel so much better if I was doing it the right way.
Here are screens of my issue,
And here is my code for the page in question.
<!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" />
<link rel="shortcut icon" href="http://www.xldesignsonline.com/fchi/favicon.ico">
<title>Full Circle Home Inspections</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-color: #FFF;
.paragraphLead {
font-size: 110%;
font-weight: bold;
a:link {
text-decoration: none;
color: #CF0;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
#apDiv1 {
position:absolute;
width:236px;
height:157px;
z-index:1;
left: 692px;
top: 372px;
#apDiv2 {
position:absolute;
width:200px;
height:192px;
z-index:2;
left: 697px;
top: 1443px;
#apDiv3 {
position:absolute;
width:158px;
height:204px;
z-index:2;
left: 643px;
top: 1502px;
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<h1><!-- end #header -->
</h1></div>
<div id="sidebar1">
<h3 align="center">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="620">
<param name="movie" value="_assets/menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h3>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.nachi.org/"><img src="_images/interNACHI.png" alt="InterNACHI" width="190" height="164" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.nachi.org/education.htm"><img src="_images/education-seal-small.gif" alt="education seal" width="150" height="150" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.iac2.org/"><img src="_images/iac2-all.gif" width="174" height="126" alt="IAC" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.inspectopia.com/profile.b.507.r.16181.u.03bcfb.html"><img src="_images/logo_top.png" alt="Inspectopedia" width="190" height="45" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.energystar.gov/"><img src="_images/img_energy_star_partner.jpg" width="160" height="191" alt="Energy Star Partner" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://cjenterprises.myshaklee.com/us/en/welcome.html#"><img src="_images/Shaklee.gif" alt="Shaklee" width="119" height="160" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://activerain.com/"><img src="_images/ARLogoSmall.gif" alt="Active Rain" width="135" height="36" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.insiderpages.com/b/15246780294"><img src="_images/insider_pages.gif" alt="Insider Pages" width="89" height="37" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="mainContent">
<h2>Radon Gas Inspection</h2>
<div id="paragraphFloat">
<h5>What Is Radon?</h5>
<p> Radon is a cancer causing radioactive gas. You cannot see, smell or taste radon, but it may be a problem in your home. The Surgeon General has warned that radon is the second leading cause of lung cancer in the United States today. </p>
<div id="apDiv1">
<div align="center"><a href="http://www.epa.gov/radon/video/epa-epu.wmv"><img src="_images/psa_revised.jpg" alt="What Is Radon?" width="200" height="172" border="0" /></a></div></div></div>
<p>If you smoke and your home has high radon levels, you're at high risk for developing lung cancer. Some scientific studies of radon exposure indicate that children may be more sensitive to radon. This may be due to their higher respiration rate and their rapidly dividing cells, which may be more vulnerable to radiation damage. </p>
<p> </p>
<h5>Why Is It Dangerous?</h5>
<p> The U.S. Environmental Protection Agency (US EPA) and the Surgeon General's Office have estimated that as many as 20,000 lung cancer deaths are caused each year by radon. Radon is the second leading cause of lung cancer. Radon-induced lung cancer costs the United States over $2 billion dollars per year in both direct and indirect health care costs.</p>
<p>According to the US EPA, nearly 1 in 3 homes checked in seven states and on three Indian lands had screening levels over 4 pCi/L, the EPA's recommended action level for radon exposure.</p>
<p>The alpha radiation emitted by radon is the same alpha radiation emitted by other alpha generating radiation sources such as plutonium.</p>
<p>A family whose home has radon levels of 4 pCi/l is exposed to approximately 35 times as much radiation as the Nuclear Regulatory Commission would allow if that family was standing next to the fence of a radioactive waste site. (25 mrem limit, 800 mrem exposure)</p>
<p> At the 4 pCi/l EPA action guideline level, radon carries approximately 1000 times the risk of death as any other EPA carcinogen. It is important to note that the action level is not a safe level, as there are no "safe" levels of radon gas.</p>
<p> </p>
<h5>How Does It Get Into My Home?</h5>
<p> Radon is a radioactive gas. It comes from the natural decay of uranium that is found in nearly all soils. It typically moves up through the ground to the air above and into your home through cracks and other holes in the foundation. Your home traps radon inside, where it can build up. Any home may have a radon problem. This means new and old homes, well-sealed and drafty homes, and homes with or without basements.</p>
<p> Radon from soil gas is the main cause of radon problems. Sometimes radon enters the home through well water. In a small number of homes, the building materials can give off radon, too. However, building materials rarely cause radon problems by themselves.</p>
<p><strong>Radon gets in through:</strong></p>
<ul>
<li>Cracks in solid floors
<div id="apDiv3">
<div align="center"><a href="http://www.fullcirclehomeinspections.com/_assets/CitizensGuideRadon.pdf"><img src="_images/citguidecoverradon.jpg" alt="Guide To Radon" width="154" height="200" border="0" /></a></div>
</div>
</li>
<li>Construction joints</li>
<li>Cracks in walls</li>
<li>Gaps in suspended floors</li>
<li>Gaps around service pipes</li>
<li>Cavities inside walls</li>
<li>Surrounding water supply</li>
</ul>
<p> </p>
<h5>What Can I Do?</h5>
<p> Radon is a national environmental health problem. Elevated radon levels have been discovered in every state. The US EPA estimates that as many as 8 million homes throughout the country have elevated levels of radon. Current state surveys show that 1 home in 5 has elevated radon levels.</p>
<p> Testing is the only way to know your home's radon levels. There are no immediate symptoms that will alert you to the presence of radon. It typically takes years of exposure before any problems surface. </p>
<p>Let <strong>Full Circle Home Inspections</strong> ensure your family and your home are protected and safe from radon exposure!</p>
<p> </p>
<h5>Radon Myths</h5>
<p><strong><em>MYTH:</em> Scientists are not sure that radon really is a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although some scientists dispute the precise number of deaths due to radon, all the major health organizations (like the Centers for Disease Control and Prevention, the American Lung Association and the American Medical Association) agree with estimates that radon causes thousands of preventable lung cancer deaths every year. This is especially true among smokers, since the risk to smokers is much greater than to non-smokers.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon testing is difficult, time-consuming and expensive.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Radon testing is easy. You can test your home yourself or hire a qualified radon test company. Either approach takes only a small amount of time and effort.</p>
</blockquote>
<p><strong><em>MYTH:</em> Homes with radon problems can't be fixed.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> There are simple solutions to radon problems in homes. Hundreds of thousands of homeowners have already fixed radon problems in their homes. Most homes can be fixed for about the same cost as other common home repairs; check with one or more qualified mitigators. Call your <a href="http://www.epa.gov/radon/whereyoulive.html">state radon office</a> for help in identifying qualified mitigation contractors.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon affects only certain kinds of homes.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>House construction can affect radon levels. However, radon can be a problem in homes of all types: old homes, new homes, drafty homes, insulated homes, homes with basements, and homes without basements. Local geology, construction materials, and how the home was built are among the factors that can affect radon levels in homes.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon is only a problem in certain parts of the country.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> High radon levels have been found in every state. Radon problems do vary from area to area, but the only way to know your radon level is to test.</p>
</blockquote>
<p><strong><em>MYTH:</em> A neighbor's test result is a good indication of whether your home has a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> It's not. Radon levels can vary greatly from home to home. The only way to know if your home has a radon problem is to test it.</p>
</blockquote>
<p><strong><em>MYTH:</em> Everyone should test their water for radon.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although radon gets into some homes through water, it is important to first test the air in the home for radon. If your water comes from a public water supply that uses ground water, call your water supplier. If high radon levels are found and the home has a private well, call the Safe Drinking Water Hotline at 1-800-426-4791 for information on testing your water.</p>
</blockquote>
<p><strong><em>MYTH:</em> It's difficult to sell homes where radon problems have been discovered.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Where radon problems have been fixed, home sales have not been blocked or frustrated. The added protection is some times a good selling point.</p>
</blockquote>
<p><strong><em>MYTH:</em> I've lived in my home for so long, it doesn't make sense to take action now.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>You will reduce your risk of lung cancer when you reduce radon levels, even if you've lived with a radon problem for a long time.</p>
</blockquote>
<p><strong><em>MYTH:</em> Short-term tests can't be used for making a decision about whether to fix your home.</strong></p>
<blockquote>
<p><strong><em>FACT:</em> </strong>A short-term test, followed by a second short-term test* can be used to decide whether to fix your home. However, the closer the average of your two short-term tests is to 4 pCi/L, the less certain you can be about whether your year-round average is above or below that level. Keep in mind that radon levels below 4 pCi/L still pose some risk. Radon levels can be reduced in most homes to 2 pCi/L or below.</p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><img src="_images/CA-3.jpg" width="520" height="207" /></p>
</blockquote>
</div>
<div id="footer">
<p align="center"><strong>© 2009 XL Designs Online - All Rights Reserved </strong></p>
</div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
And here is my CSS if needed,
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
.twoColFixLtHdr #container {
width: 950px; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #557050;
.twoColFixLtHdr #header {
border-bottom: 1px solid #000000;
height: 250px;
background-color: #DDDDDD;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
background-image: url(../_images/homebanner1.png);
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 20px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
text-align: center;
font-size: 48px;
font-family: Tahoma, Geneva, sans-serif;
color: #000;
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px;
border-right: 1px solid #000000;
background-color: #557050;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
.twoColFixLtHdr #mainContent {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 250px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
text-align: left;
.twoColFixLtHdr #mainContent h1 {
font-size: 48px;
font-family: "Arial Rounded MT Bold";
font-weight: bold;
.twoColFixLtHdr #mainContent h2 {
font-family: "Arial Rounded MT Bold";
font-size: 32px;
.twoColFixLtHdr #mainContent h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #CF0;
font-size: 125%;
.twoColFixLtHdr #mainContent h5 {
font-size: 120%;
.twoColFixLtHdr #footer {
padding: 20px 10px 20px 20px;
border-top: 1px solid #000000;
background-color: #A3A3A3;
font-family: Arial, Helvetica, sans-serif;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#paragraphFloat {
width: 350px;
#paragraphFloat2 {
width: 350px;
Please if anyone knows what I'm doing wrong please please let me know! Since I am learning, I really want to get main concepts like this down so I am not constantly doing things the hard way! Thank you!
Jayson1) Regarding validation, what does it do?
It validates by telling you where your code isn't er... valid. Sometimes the results are a bit jumbled but if you work through them one at a time and revalidate, it's a good way to learn. If you fix all of the errors shown up through the validator you should end up with standards compliant code. Not necessarily the best, most efficient code you can write but at least it will be valid and it helps you spot errors that hours of code-staring never seems to find.
I don't use the DW validation tool because I find the W3c one easier.
The W3c validator has a check box of HTML Tidy which can tidy up your code but it's not always as easy to see what changes.
2) I know the <p> tag for spacing is wrong, I could just feel it in my bones. I just didn't know what else to do. If I <br> all the way down won't the code be just as cluttered?
You're obviously a born web coder!
<br> will bloat your page if you use them to position elements.
Here you need to get used to a) the Block Model and b) CSS positioning. Once you crack these, CSS opens up for you and becomes a little more intuitive.
if you have two elements on top of each other rather than push them apart with other elements you do it with padding and/or margin. There are things to watch out for here namely, collapsing margins but if you start to read up on the above, you'll get it.
I just thought of something. If I add a div in main content, align it to the bottom center with CSS, use a line break between it and the text above, and add the image in question in the new div, will the spacing between the text and image work itself out? I just really want to get out of the <p> bad habit.
Keep thinking! Web design is not like desktop publishing or print. Elements on a HTML page don't behave like paragraphs on a page. Once you begin to figure out why not it all gets a little easier.
If you want an image at the bottom an element you put that at the end of the content in that element. Then you need to ensure there is no margin, padding or border between the img element and the next element (your footer). HTML elements come with some styling that is applied by default in the browser. Many web developers include a rule like this:
body {
margin: 0;
padding:0;
This sets the margin and padding to zero of course and it's purpose is to override the defaults. Some people advocate applying similar rules to all elements and if your interested try googling Eric Meyer who has written about it online.
One of the key purposes of CSS is to take styling out of the page. It's leaner, more efficient for the viewer and the coder and helps with site management.
3) AP divs are weird, and I did only use as a last resort.
See? You're a natural!
The reason is I am confused by the float and clear float classes. My left column is floated left and that element is what I was having problems understanding. I tried to make new divs and float right but I screwed it all up. I am sure I am just not applying the clear float in the right places.
Getting the hang of floating is key to CSS positioning. You use a float if you want two elements to sit side by side on the page. It disrupts the "document flow." Ordinarily HTML elements are rendered one after the other, on top of each other. Floating an element takes it out of the document flow and allows other elements to occupy its space. When you float an element it should always have a width. If the element below it also has a width, that width has to be sufficiently narrow to allow it to occupy the space. In short, floated elements can't be wider than their containing element.
The clear property is used after a float to stop an element occupying the space left by a floated element. It works but confuses the heck out of me!
So that leads me to my final point. I am a novice too! I might have fluffed a few of the technical points above but it's pretty much there.
Regards
Martin -
Multiple compositions as overlapping divs
Hello,
My first question on this forum and I could really use some help with this. Have been stuck on finding a solution, for well over a week.
I am trying to overlap multiple compositions in an Adobe Edge Animate project (I am using Edge Animate CC 2014.1.1).
Basically I am trying to achieve the effect shown in the image below (where the blue stage is my main stage - first composition being loaded, the red is the second and the green is the third):
I added a link to my Edge Animate project files below (I modified the main.html file to accomodate three compositions).
In raw HTML, this can be very easily achieved by using a <div> that is has "position:relative" (it would be the blue area) and nesting two divs with "position:absolute" inside it (the red and the green). My problem is getting the same effect in Edge and loading a composition in each of the two overlapping divs.
In my Edge project, main file, I have three stage divs:
<div id="StageA" class="EDGE-222475028"></div>
<div id="StageB" class="EDGE-222542206"></div>
<div id="StageC" class="EDGE-222622471"></div>
StageA would be the main container div (blue), StageB the first nested one (red) and StageC the third (green) positioned at the right margin of the main container.
I was not able to apply the same overlapping concept to Edge stage divs, as in my raw HTML example.
How can I achieve this?
Edge project files: https://www.dropbox.com/s/qj8jbrrrnbleozp/overlapping_multiple_compositions.zip?dl=0
Thank you,
ChrisCan you share the actual project files, so that we can help you out?
You may PM me the uploaded zipped file link, if you don't wish to share your project publicly here. -
Hello
I am having a problem with a clear div problem with IE7 and the top menu - in FF this site : http://frenzycardgames.com/ looks fine - the menu in IE is gone not too mention the two lines on either side of the the sidebars - if I take teh clear div out the menu goes way up in the upper right coner bu tis fine in IE - but the clear div back .. and the menu is gone in IE but fine in FF
uuuggggg
thanks
RStart by fixing the code validation errors. The likely culprit is an imbalance in <div> and </div> tags. Once you fix that problem, the clearing division should work as expected in all browsers.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffrenzycardgames.com%2F
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
I have a guy who wants a hideous design brought to life, this
invloves overlapping some divs for an image display. As always it
works really well in Safari (god bless the Mac) but goes all mental
in IE. The page is here:
www.pslshopfitting.co.uk/typical.htm
The images and text are within a parent div called container
and the css for them all is as follows:
#container {position:relative; top:0; left:0; width:520px;
height:400px;}
#first {position:absolute; top:0; left:0; width: 290px;
height:220px; z-index:1;
background-image:url(../images/jpg/typical_1.jpg);}
#second {position:absolute; top:131px; left:215px; width:
290px; height:220px; z-index:10;
background-image:url(../images/jpg/typical_2.jpg);}
#third {position:absolute; top:282px; left:0px; width: 290px;
height:220px; z-index:20;
background-image:url(../images/jpg/typical_3.jpg);}
#fourth {position:absolute; top:433px; left:215px; width:
290px; height:220px; z-index:15;
background-image:url(../images/jpg/typical_4.jpg);}
#fifth {position:absolute; top:584px; left:0px; width: 290px;
height:220px; z-index:5;
background-image:url(../images/jpg/typical_5.jpg);}
#first_desc {position:absolute; top:30px; left:300; width:
200px; height:200px; z-index:100; font-size:18px; font-weight:bold;
color:#006699; vertical-align:middle; float:left;}
#second_desc {position:absolute; top:230px; left:10px; width:
200px; height:200px; z-index:150; font-size:18px; font-weight:bold;
color:#006699;text-align:right; float:right;}
#third_desc {position:absolute; top:368px; left:299px; width:
200px; height:200px; z-index:200; font-size:18px; font-weight:bold;
color:#006699;text-align:left; float:left;}
#fourth_desc {position:absolute; top:524px; left:10px; width:
200px; height:200px; z-index:200; font-size:18px; font-weight:bold;
color:#006699;text-align:right; float:right;}
#fifth_desc {position:absolute; top:668px; left:295px; width:
200px; height:200px; z-index:200; font-size:18px; font-weight:bold;
color:#006699;text-align:left; float:left;}
The top lot are the images and the bottom lot are the tag
lines.
Could someone please tell me how to get this to display in
IE?? I want shot of this hideous project
Thanks in advanceHere is the problem you are struggling with:
All of your images/captions are in absolutely postioned
elements. Since
they are absolutely positioned, they are removed from the
normal flow. When
they are removed from the normal flow, they cannot affect any
other elements
on the page, including the relatively positioned container,
which is what
you *REALLY* need to have happen with this layout. What you
might try is to
give that container a height of about 900px or so and keep
your fingers
crossed.
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
==================
"Jansolo" <[email protected]> wrote in
message
news:[email protected]...
>I have a guy who wants a hideous design brought to life,
this invloves
> overlapping some divs for an image display. As always it
works really well
> in
> Safari (god bless the Mac) but goes all mental in IE.
The page is here:
>
>
http://www.pslshopfitting.co.uk/typical.htm
>
> The images and text are within a parent div called
container and the css
> for
> them all is as follows:
>
> #container {position:relative; top:0; left:0;
width:520px; height:400px;}
> #first {position:absolute; top:0; left:0; width: 290px;
height:220px;
> z-index:1;
background-image:url(../images/jpg/typical_1.jpg);}
> #second {position:absolute; top:131px; left:215px;
width: 290px;
> height:220px;
> z-index:10;
background-image:url(../images/jpg/typical_2.jpg);}
> #third {position:absolute; top:282px; left:0px; width:
290px;
> height:220px;
> z-index:20;
background-image:url(../images/jpg/typical_3.jpg);}
> #fourth {position:absolute; top:433px; left:215px;
width: 290px;
> height:220px;
> z-index:15;
background-image:url(../images/jpg/typical_4.jpg);}
> #fifth {position:absolute; top:584px; left:0px; width:
290px;
> height:220px;
> z-index:5;
background-image:url(../images/jpg/typical_5.jpg);}
>
> #first_desc {position:absolute; top:30px; left:300;
width: 200px;
> height:200px; z-index:100; font-size:18px;
font-weight:bold;
> color:#006699;
> vertical-align:middle; float:left;}
> #second_desc {position:absolute; top:230px; left:10px;
width: 200px;
> height:200px; z-index:150; font-size:18px;
font-weight:bold;
> color:#006699;text-align:right; float:right;}
> #third_desc {position:absolute; top:368px; left:299px;
width: 200px;
> height:200px; z-index:200; font-size:18px;
font-weight:bold;
> color:#006699;text-align:left; float:left;}
> #fourth_desc {position:absolute; top:524px; left:10px;
width: 200px;
> height:200px; z-index:200; font-size:18px;
font-weight:bold;
> color:#006699;text-align:right; float:right;}
> #fifth_desc {position:absolute; top:668px; left:295px;
width: 200px;
> height:200px; z-index:200; font-size:18px;
font-weight:bold;
> color:#006699;text-align:left; float:left;}
>
> The top lot are the images and the bottom lot are the
tag lines.
>
> Could someone please tell me how to get this to display
in IE?? I want
> shot of
> this hideous project
>
> Thanks in advance
> -
Preventing overlapping divs (using spry collapsible panel)?
I'm using a collapsible panel. below that is another div.
When user clicks on collapsible panel it revelas it content. The following div with content(i.e. <div class=""> </div>
<div class="clean-graypop">
<input type="radio" value="a" name="question1" />...) moves down. At least when viewed in a browser.
However, when viewed in print preview, and when printed. the contents of the collapsible panels now overlaps the content of the following div contents
<p><strong>Part 1: Statistical inference</strong></p>
<p> Questions revealed and hidden using buttons.</p>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><a href="#" target="_self" class="button"><span>Question 1</span></a><br />
<br />
</div>
<div class="CollapsiblePanelContent">
<p>Read the following statements (1-5) about measures of effect in epidemiological studies. </p>
<ol>
<li>A measure of effect is a quantity that measures the effect of a factor on the frequency or risk of an outcome.</li>
<li>The incidence of a disease cannot be calculated in a case-control study because the controls represent an unknown fraction of the whole population.</li>
<li>Rate ratios, risk ratios, odds ratios, differences between means and differences between medians can all be used as effect measures in both cohort and intervention studies.</li>
<li>The only measures of effect that can be calculated in a cross-sectional study are prevalence ratios and odds ratios. </li>
<li>A prevalence ratio can be calculated in an ecological study.</li>
</ol>
<p>Which one of the following options (a-e) is correct?</p>
</div>
</div>
<br />
<div class=""> </div>
<div class="clean-graypop">
<input type="radio" value="a" name="question1" />
a) Statements 1 and 2 are correct<br />
<input type="radio" value="b" name="question1" />
b) Statements 1, 3 and 5 are correct<br />
<input type="radio" value="c" name="question1" />
c) Statements 1, 2, 3 and 4 are correct<br />
<input type="radio" value="d" name="question1" />
d) Statements 2, 3, 4 and 5 are correct<br />
<input type="radio" value="e" name="question1" />
e) All of the statements are correct<br />
</div>
<br />Define a media type CSS for print that compensates. Read here: http://www.w3.org/TR/CSS2/media.html
Mylenium -
Hello, and thanks for taking a look at this.
I have inherited a web site which isn't performing very well in IE6, more details later. The setup is as follows:
The website delivers training content. The design is such that there are no scrollbars, all Lesson content is laid out carefully within a 'page' area and the user clicks a Next or Previous button to page through the content.
Each Lesson is a single HTML file which is designed and edited in Dreamweaver CS5. All the Lesson pages are based upon a single Template file which defines the common functionality. The Lesson content is basically a series of Divs, a Div for each 'page' of content and each have a unique id (for example 'page2'). Each Div has a CSS Class which defines the 'display' property. The CSS Classes are as follows:
.hideDiv{
display:none;
.showDiv{
display: inline;
Initially the first Div in the Lesson is set to .showDiv and all of the following Divs are set to .hideDiv.
The navigation is designed in Flash and the Next and Previous buttons are situated below the content area. When clicked a Javascript function is called, from a Javascript file referenced by the Lesson HTML page. The javascript function is as follows:
function hideShow(hideDiv, showDiv){
if(document.getElementById(hideDiv)!=null){
document.getElementById(hideDiv).className = "hideDiv clear";
if(document.getElementById(showDiv)!=null){
document.getElementById(showDiv).className = "showDiv clear";
It has to be said that everything works. There is further code which accounts for reaching the last page or trying to click previous on the first page etc, but this is the core principal.
Our problem is that our users have to use IE6 and when viewing the website in IE6 it is much slower than in say IE8 or Safari etc. We have noticed that as the number of pages (Divs) in a Lesson increases so the performance decreases. Crucially we notice that as you click Next, or previous, the browser Status Bar indicates that all of the images in the Lesson are being downloaded. Every time you click Next or Previous!
If anyone can either assist in preventing all of the images constantly downloading, or suggest an alternative approach to paging through the content I would be extremely grateful.
Regards
ChrisHello Murray
Thanks for going to the trouble of creating the little test site.
Other browsers appear to load the pages much quicker. This may be because they are able to more inteligently handle our code, I don't know. Safari on our Macs zooms through it.
In IE6 if I open a large Lesson and click next I see, at the bottom of the screen in the Status Bar, "(21 items remaining)" and then "(20 items remaining)" etc. which counts down and then disappears. Interestingly if the next screen happens to display the same image this does not happen, just the message "Done". If the next screen has a different image then the count down from "(21 items remaining)" again as all the linked resources (I presume) are downloaded.
I have opened your site in IE6 (Windows XP Pro) and I don't see the message. However the image is so small that I may not because it is so fast to load.
It may be related to how IE6 handles Temporary Internet Files, I'm not sure. -
Help with this div - can I overlap divs?
Hello there, I used the search function to find an answer to this, but got nothing concrete so thought I should make this thread
My problem is shown in the screenshots below. I created a div id for the banner, a div id for the button "home". There is a Div ID for the stuff below, and that stuff is put into div classes
My problem is, I want to put that home button over the gre banner (and other buttons). When I try shifting the button over the banner, instead of shifting over the banner, it shifts the banner away and just pushes it. The screen shot is below showing the before and after, as well as the css:
[img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1designview.jpg?t=1292783483[/img]
[img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1csscode.jpg?t=1292783852[/img]
^^ the css for that. The name of the button is "home" and it is a DIV ID
This is what happens when I changes the margin left to 80pixes instead of 50 pixels (i.e. when i tried moving it to the right)
[img]http://i1006.photobucket.com/albums/af186/RC20087765/fig2designview.jpg?t=1292783939[/img]
All I want to do is place that home button on the grey banner! And later on, I will put some other buttons up there, but for now thats what I want to do
If someone can just tell me how to put a div over another div, I would be so grateful! Thanks guys.Yes you can place one div over another div by using z-indexing (giving the <div> a stacking order). BUT, z-indexing only works with <div>s that have a declared position, like position:absolute (or relative). z-indexing and declared position have to be used together.
From and old post:
One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So
Code:
#flash {
z-index:5;
will not work without ALSO giving it a declare position.
But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.
That is, if it'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>.
Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code or copy it and practice by changing z-index and positions.
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
More info here:
http://www.w3schools.com/css/pr_pos_z-index.asp
Best of luck to ya!
Adninjastrator -
I am building a 'planner' in a table and it looks okay in
Firefox but not in IE. It's a work in progress but IE doesn't allow
the table to align properly and help would be appreciated.
Also, the table and left menu reside in a div (container2)
which I set at 1900px width. Is there another way to determine its
size or do I just add the components (menu plus centrebody).
The page is located at
http://members.optuszoo.com.au/csteed/4R%20Conference/3day-program.html
Thanks, Chris
Disregard - fixed the problem.csteed posted in macromedia.dreamweaver:
> I am building a 'planner' in a table and it looks okay
in Firefox but
> not in IE. It's a work in progress but IE doesn't allow
the table to
> align properly and help would be appreciated.
I'm not seeing the problem in IE7. Perhaps if you add the
missing closing
</div> tags and fix the other errors, it will help.
Enter your URL into this page to see the errors:
http://validator.w3.org/
> Also, the table and left menu reside in a div
(container2) which I set
> at 1900px width. Is there another way to determine its
size or do I
> just add the components (menu plus centrebody).
With the page as it is now, I don't think you need to specify
the width at
all. I didn't see any difference in FF when I deleted that
line in your CSS,
anyway.
> The page is located at
>
http://members.optuszoo.com.au/csteed/4R%20Conference/3day-program.html
Mark A. Boyd
Keep-On-Learnin' :) -
Overlapping DIV not displaying correctly
HALP! I have overlapped a DIV on purpose, the correct DIV is displayed on top on some computers but not on others and does not display correctly in Internet Explorer at all.
My link is below. I would like to display the DIV with the flash underneath the Bat DIV.
http://batengineering.bdaonline.co.nz/
Can anyone out there help me!I see in IE6 that transparency is not handled well at all. .pngs are dicey with IE6.
If you want to make your Flash movie lie down behind the bat image, you need to give it a wmode="opaque". Otherwise, the Flash will always come to the front.
In IE6, IE7, and IE8, your top menubar is breaking, the right hand end cap is falling to the second line. You might want to put a little ease into it somehow.
On all IE and on Firefox on the Mac, there seems to be a nasty white vertical stripe on the right side...maybe a gap in width of the background image. Check to make sure you have a default background-color to make that go away.
On Safari on the Mac and Firefox on the PC, the Flash does not seem to show up at all in BrowserLab, although I see it on my XP; could be an artefact of BrowserLab's process.
W3c finds a few errors in the markup: http://validator.w3.org/check?uri=http://batengineering.bdaonline.co.nz/&charset=(detect+a utomatically)&doctype=Inline&group=0
And the CSS throws a few warnings: http://jigsaw.w3.org/css-validator/validator?uri=http://batengineering.bdaonline.co.nz/&pr ofile=css21&usermedium=all&warning=1〈=en
On the whole, though, the page is looking good.
Beth -
Hey again. This time, I've encountered an issue where I have
placed four divs into a main div container. The four inner divs are
all behaving well and responding to my margin call-outs, and
offetting from each other, or the top, as they should. However, I
added a fifth div container (Main Content 5, highlighted in lime
green) and it will not offset from the bottom of the "Graphic 3"
container, even though I specified a 10px top margin. In DW design
view I can see the 10px top margin overlapping the Graphic 3 div. I
tried several fixes, but as I'm still learning, it is apparent I'm
not hitting upon the correct solution. Here is the file online:
http://www.vairhead.net/csstest/csstest.html
And as long as I'm asking, perhaps someone knows why DW won't
let me click in certain places when I want to add a div tag. Here's
a graphic explaining that issue:
http://www.vairhead.net/csstest/images/screenshot.gif
Thanks once again-
MarkDepending on the way that particular page element is located
on the page,
there may be no sensible pace to the "right".
You are thinking about your layout with a Design view
mentality. That's
holding you back....
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
==================
"Mark Buchler" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
>
> Click on the div image - use right cursor key on
keyboard
> That will move cursor in the code to the right of the
image - but
> inside the existing div.
>
> Is that what you mean ?
> --
>
> ~Malcolm~*...
> ~*
>
>
> Ideally what I wanted to do was this. Let's say I wanted
to add a new div
> container just to the right of the lime green container
(main content 5).
> Because DW's "Insert Div Tag" tool is available for use
in "design" view,
> I
> might assume that all I had to do was to (1) click (to
place) my cursor
> just to
> the right (and outside) of the lime green box, (2) click
the Insert Div
> Tag
> toolbar icon, then (3) set my parameters for my new div
in the popup pane
> that
> follows. But I can't seem to perform this operation.
Whenever I try to
> click
> the cursor to the right of any of my existing divs, the
cursor jumps to
> another
> seemingly random location in the layout. Now the reason
I thought I could
> do
> things this way in the first place is because the
"Insert Div Tag" popoup
> pane
> has a field INSERT->AT INSERTION POINT (a pulldown
option). Following the
> logic
> of this, I assumed that I could choose my specific
insertion point with
> the
> cursor, even if it meant clicking to the right of an
existing div
> container.
> About the only time the cursor will click in and stay
where I want it is
> if I'm
> clicking into a block of text.
>
> Flow of logic: I want a new div container to the right
of the existing
> green
> one. --> Click to the right of the green container to
set the insertion
> point
> of the new container.--> Set parameters in popup
pane, then click OK.-->
> New
> div container appears to the right of the green one.
>
> But I guess this was not the plan of the DW software
programmers, as it
> doesn't seem to work this way!
>
> Thanks again-
>
>
> -
Can anyone help me figure out why my div named "#indexThmbs" is not sitting flush to the div above it named "#indexHeader1"
The purple body background color is coming through and I dont know why. There are no top/bottom margins on either divs so there should be no gap between the divs...I have no clue why this is happening.
I have posted the links to how the page SHOULD look (my JPG mock up)....
http://vojodesign.com/proofs/ARM/home.html
...and also my HTML file with the problem I'm talking about....
http://vojodesign.com/proofs/ARM
Thanks in advance.
KitHi Kit,
I made a quick look and it's quite messy or at least seems that your css needs to be optimized. Anyway a fast solution would be in #indexThmbsInner with your margin-top:65px change it to 0 like:
#indexThmbsInner {
height:130px;
margin-left:auto;
margin-right:auto;
margin-top:0;
width:900px;
Also you declare many classes that do the same thing, so you can do this:
.indexThmb1, .indexThmb2, .indexThmb3, .indexThmb4 {
float:left;
margin-left:12px;
margin-top:65px; /* Notice I added the margin-top:65px; here */
text-align:center;
width:195px;
.indexThmb1 {
margin-left:12px;
.indexThmb2 {
margin-left:32px;
.indexThmb3 {
margin-left:33px;
.indexThmb4 {
margin-left:31px;
Probably there would be better ways to do it but as I mention it was just a quick look, also I haven't checked in IE just in FF but hope it helps
Cheers -
Pagecontent tag adding footer clear div - problem
I am trying to figure out how to remove the div that the pagecontent tag adds to my website. As you can see here the dark gray box under the product is added by a div labeled footer clear. When I remove that div, the layout problem goes away. Problem is I cannot find where to remove that code inside business catalyst. I am using a .dwt and this is how that area looks in my code inspector,
{tag_pagecontent}
Any ideas? ThanksHi duke_shibby,
I'm not sure if I 100% understand what you're saying but did you try editing the Online Shop module template - Overall Layout? I know there is a div footer clear in there by default. You can get to this layout in the back-end by going to
- Site Manager > Module Template > Online Shop > Overall Layout
Carol | BCGurus.com | http://bcgurus.com/Business-Catalyst-Templates for only $7 -
Help: An overlapping report problem
I am working on a report. The records can be categorized into more than 1 types. If it is say to two types, A and B, with the set A and B are overlapping. I need to create a report that
1. shows the records belong to A or B (can be done with repeating frames)
2. some kind of subtotals for each category
3. grand total
If there is no overlapping, it is a simple repeating frame problem. How do I deal with this kind of the problem?
Thank you in advance.
Jimmyensure both of yours HDD's are detected by OS.(check it from device manager(sysdm.cpl))
type in "run" type there "diskmgmt.msc" and hit enter, check partition status from there, ensure each one has corespond assigned drive letter.
about layout, click on view and choice prefered way.(etc: details). also made right click and select "arrange icons by", and tick "shown in groups" to restore style from 2nd picture. -
After extensive reading and experimenting - I have finally completed my website - and it has been published!
I needed to place images exactly where I required them - not the standard Left/right/absolute etc! I then discovered AP DIV's and what a pleasure. My pages previewed perfectly on my computer using Internet Explorer as my browser. I showcased my new website to my wife on her laptop - and was hoorified to find that all of the images which were placed in AP Div's had moved and were now placed over text!
I have ascertained that this results from our different display settings (1024x768 vs 1280x768). Please save my sanity by advising how I can get around this problem. My site uses the 2 Column, Header & Footer, Liquid layout (one of the standard layouts) - can this possibly have something to do with the problem?
ThanksRoy Marnewick wrote:
Hi Osgood
Many thanks for your rapid response.
I am part of the way there in understanding your proposed solution.
However - I understand basics only at this stage, and get by by
experimentation to achieve what I need. You have mentioned a "container" -
which I have seen mentioned in various documentation but do not understand
exactly what it is - or how I place one in my document!
I would be most grateful if you could :
1. tell me what it is?
2. how do I place a container in the document?
3. how do I set the relative position?
As a side issue - if these AP divs float around - how are they used usefully
if not placed in a container - or are they always meant to be in a
container?
Regards
Roy
1) A container is just a box on your page, could be a <div> or something else, a table cell, a paragraph etc.
2) You will already have many containers in your document.
3) To set the containers position to relative use css:
position: relative;
Example:
<div id="content">Some content here</div>
Set its position to relative with css:
#content {
width: 750px
margin: 0 auto;
position: relative;
Now if you want to use an AP <div> and have that AP <div> move along with the content when the browser window is widened or narrowed you have to insert the AP <div> inside the relatively positioned container,
<div id="content">
<div id="fixed">This AP <div> takes its co-ordinantes from the top left of the content box</div>
Some content here
</div>
The css:
#fixed {
position: absolute;
left: 50px;
top: 150px;
AP <divs> are really quite useless apart from the odd ocassions (like the above example) and maybe the most simplest of site constructions
Maybe you are looking for
-
Which is better ex drive for lion iMac seagate or lacie?
which is better fit for my imac 10.7.2 lion seagate ex hd or laCie ex hdrive?
-
WANTED: Acrobat Plug-in Developer
We need a developer on contract basis to develop a plug-in for Acrobat (Reader prefered, but we understand it requires a special key). The plug-in needs to work on both Windows and Mac. Requirements are: 1. Add a "Save to" and "Open From" menu so use
-
Which computer is the master account in a sync?
I have worked all day to clean up the bookmarks on my laptop and now want them reflected/synced to my other firefox computers. How to I do this?
-
Need more hard drive space. Help with install WD My Book Studio 1TB EHD.
My MacBook Pro has no more disk space. I'm not tech savy so I'm hesitant to install Western Digital My Book Studio 1TB purchased. I read somewhere not to install the smartware that comes with this external drive because it might cause problems when
-
How to add an icon in the title bar,next to the maximize and minimize icons
I need to add an icon ( help icon; ?) in the JInternalFrame� title bar. Anyone could help me???? Thanks