Div overlapping footer
Instead of pushing the footer and bottomlinks divs down the info div is overlapping them. It doesn't do it if I take out some of the text but I don't think the client would appreciate that. I've tried clearing loats but nothing is working for me. What have I done wrong?
http://www.russellagency.com/t2/patrick.html
Thanks for any insight!
You've still got height in your CSS applied to your <div id="white">
Follow Nancy's suggestion and change it to min-height
#white {
background: #FFF;
min-height: 700px;
Similar Messages
-
Hi,
I have been facing this issue where the Topic Content Pane (<div>) overlaps the SideBar pane every time I try to open the Browser-Based AirHelp after it has been published on a server.
Although, if I view the same locally on my machine, it appears fine.
I'm using RoboHelp 10 to create the help and have the context sensitivity enabled for integrating the help with my software application.
I have also created the custom window for viewing help.
Now, considering the fact, that we are only using and testing our helpfile on the latest versions of Firefox and Chrome browsers with Flash enabled, this problem however, is not consistent. After getting published, on some machines it appears fine on both browsers and on some it only appears fine on any one of the browsers. Also, there are some machines, where the problem is seen on both browsers.
For Example:
When I try to view the helpfile after it has been published on a server, the following issues are observed:
On My Machine: Topic Content pane overlaps Sidebar pane on Chrome browser and on Firefox it appears fine.
Firefox version: 35.0.1, Chrome Version: 40.0.2214.115 m, Adobe Flash Player 11 Plugin Version: 11.7.700.202
On Another Machine: It appears fine on both browsers.
Firefox version: 35.0.1, Chrome Version: 40.0.2214.115 m, Adobe Flash Player 11 Plugin Version:11.6.6.2.171
Now take a look at these images:
(On Chrome) When Opened Locally:
(On Firefox) After Getting Published:
(On Chrome) After Getting Published:
Machine 1: Topic content overlaps TOC pane
Machine 2: Empty white space appears at the bottom (below footer)
After going through all the relevant information that could be found on your AirHelp forums, I couldn't find a solution.
This issue is very critical to me right now due to the upcoming documentation releases, and i need a resolution to this ASAP. Please Help.Hi Jeff,
I wrongly addressed it to Adobe. Any help through this forum would be appreciated. -
Hello all,
I've got a page laid out with div tags. The footer div
overlaps the wrapper div when I'm looking at it in design view in
dreamweaver. I can get the divs to not overlap in dreamweaver's
design view if I add 3 - <br /> in between the two divs, but
then the footer is not displayed on the page on any of the browsers
(it's a footer that is always on the bottom of the page, that gets
pushed down if the body is large). How do I get dreamweaver's
design view to not overlap these divs? Any ideas? Thanks for your
help.Let's see the page, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"9thReg" <[email protected]> wrote in
message
news:g03ud8$iib$[email protected]..
> Hello all,
>
> I've got a page laid out with div tags. The footer div
overlaps the
> wrapper
> div when I'm looking at it in design view in
dreamweaver. I can get the
> divs
> to not overlap in dreamweaver's design view if I add 3 -
<br /> in between
> the
> two divs, but then the footer is not displayed on the
page on any of the
> browsers (it's a footer that is always on the bottom of
the page, that
> gets
> pushed down if the body is large). How do I get
dreamweaver's design view
> to
> not overlap these divs? Any ideas? Thanks for your help.
> -
Why is image over flowing content div into footer div?
My content div is set at 975px wide padding 20px. I insert a image that is 700x525. Content div expands to fit image. As soon as I set the alignment on the image to left Content div shrinks, image overflowing into footer and text in footer is wrapped around image. If I set a height for the Content div larger than height of image all is well. My problem is images on different pages will all be different sizes.
Code:
<div id="content">
<h1><img src="Oral/OralCavity_Labeled.jpg" alt="Oral Cavity" width="700" height="525" align="left" />Content for id "content" Goes Here</h1>
</div>
<div id="footer">
<h5>Property of College of the Canyons Biology Department. All rights reserved. <a href="mailto:[email protected]">Contact Us</a>.</h5>
</div>
<h5> </h5>
</div>
</body>
Please help, can't proceed with website until this problem is solved.Try this:
#content {
width: 975px;
background: #FFF;
padding: 20px;
overflow:hidden;
The magic of overflow hidden:
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
PS. I'm glad I'm not squeamish.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Learning as I go, need help with div overlapping
PLEASE HELP, PEOPLE ARE LOOKING BUT YOU ARE NOT RESPONDING. At least give me something, please!! If you need more info I can give it to you, I just don't know what you need
I am learning Dreamweaver through the tutorials provided here on the Adobe site. I have basic html/css knowledge and am trying to learn how to use it!!
I have tried inserting div inside one big div, like in the getting started tutorial, but the tags seem to be overlapping when I click on the Live View option. The look fine in the design view, but overlap in the Live View. I need them not to overlap.
If this is not enough info for someone to help, please ask what you need to know.
Thank you
Robbie1. Have you previously posted a question here? You seem to be alluding to one but I see no posts under the moniker of RobJes
-No John, I haven't. I think I was just getting impatient. I had been working on this for a while and couldn't figure it out. I edited the original post after I had seen that several people had looked at the question but had not even responded. I was being impatient.
2. Can you provide a link to what you've done so far?
Here is a link to what I have so far, I think I fixed the problem, but if you see anything I could do please let me know
http://www.spin4life.net/main.html
Most of the links don't work yet, was just trying to get the layout fixed first.
3. What is your question in a nutshell?
The text below the pictures on the top was overlapping with the other text below it. But like I said, I think I have it fixed now.
Either way, thank you for your reply. I really appreciate it and if you have any suggestions I would be all ears!! Thank you -
http://www.jordankrose.com/jkr_shortStories2.html
EVA PRIM WRITES—
CHOICES. ANARCHY. HYPOCRISY.
this section (shorts3) has been a nightmare. The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text. my client will not like that as it is not consistent with other parts of the page.
Thanks for your help.richardswife wrote:
http://www.jordankrose.com/jkr_shortStories2.html
EVA PRIM WRITES—
CHOICES. ANARCHY. HYPOCRISY.
this section (shorts3) has been a nightmare. The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text. my client will not like that as it is not consistent with other parts of the page.
Thanks for your help.
You're making it a nightmare because you're trying to layout a web page in the same way as you would approach a desk top publishing page.
You're trying to fit text in the spaces allocated on one big background image, this is never going to work successfully because everyone has their browsers set up differently.
You would be far better 'isolating' each book and eack books details in their own container. Yes you dont get the 'integrated runaround' look but what you do get is a webapage that is far better suited to more devices and far easier to manage in terms of producing.
At the moment you can come up with a number of 'hacky' fixes but you will never know how it really performs on a wider range of different set ups people use to view the page. -
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 -
Footer not clearing DIV correctly in I.E7
Hi
I am having an issue with my footer DIV- set to clear both in the CSS. Not clearing the main DIV but only in IE7.
The main DIV doesn't have a height specified in the CSS , as I want it to expand with the content.
Any ideas?
feel free to look at the page , please note background image-not my idea!
http://www.sopasbeauty.co.uk/nails.html
many thanksUm checking the code in IE7, it seems that the footer is displaying properly because your #container is set to height: 700px. But your content is longer then 700px and there fore breaking in IE7.
I would remove the height on the container, and then add a clear/seperator outside the container.
<body>
<div id="container">
<div id="header"></div>
<div id="leftnav">
<ul>
</ul>
</div>
<div id="main">
<div id="mainimage"></div>
</div>
<div id="rightcol">
<div id="rightcolhead">
<h2>Special offers </h2>
</div>
<div id="rightcoltext">
</div>
</div>
</div>
<div style="clear: both"></div>
<div id="footer"><a href="contactus.html">Contact us</a> | <a href="sitemap.html">site map</a> | <a href="http://www.epproductions.co.uk/" target="_blank">webdesign</a> | <a href="links.html">links</a></div>
</body>
</html> -
How to put type in a footer div that already has an image
Very beginner question - but I can't seem to get the copy to go into the div.
Here's my code:
<div id="footer" class="footer">
<img src="images/final images/inquiries-footer02.jpg" alt="Inquiries, Inc. footer" width="950" height="50" border="0" />
Copyright © 2011 Inquiries, Inc. • <a href="mailto:[email protected]">[email protected]</a>
</div>
Here's what it looks like:
Thanks for taking a look!Thanks, here's what I have... Finally got it loaded to a test site: http://inquiriesinc.alisonquarles.com/
#footer {
width:950px;
height:50px;
border-top-color: #666;
border-top-style: solid;
border-top-width: thin;
clear: both;
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #C03;
text-decoration: none;
text-align: center;
I want the type to be centered in the div on top of the image.
The top nav is set up in Photoshop for the moment but I'll need to rework it sooner or later. -
Keep footer div at the bottom of the page
ok, really simple im sure, il i want to do is keep a div at the bottom of the page.. not the browser window so it can always be seen, but at the bottom of all the content, what information would i apply to this div? ive tried top;100% minus the height of the div, no luck, any help would be great thanks.
Try something like this:
First define your html code like this:
<div id="container">
<div id="content">
<h1>Content</h1>
<p>Please resize the browser window to see how your 100% CSS footer behaves. </p>
<p>Some more text here</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
Next create your CSS like this:
<style type="text/css">
<!--
html, body {
height: 100%;
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
html>body #container {
height: auto;
#content {
padding: 10px;
background-color: #a6c;
padding-bottom: 48px;
#footer {
position: absolute;
bottom: 0;
padding: 10px;
background-color: #609;
width: 75%;
#footer h1 {
color: #fff;
padding-bottom: 0;
h1, p {
margin: 0;
padding-bottom: 1em;
h1 {
font-size: 12px;
line-height: 1.5em;
-->
</style>
This is all there is to it in a nutshell. It can be modified to work in old browsers but that is another question. -
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 needed with Template Footer displacing with addition of a float..
I have a template for a web page and I am a little stuck now with an issue related to floating an image (left) to get the text to wrap around. As I do so, the footer at the bottom displaces and I cannot work out why?
Any help greatly appeciated. I cannot seem to attach a file so you can see it. the domain is http://www.nataliemariemakeup.co.uk. This will be the 'Bridal' page.
This is how the problem appears when I float the image left...
The Facebook and Twitter images are where they should be, but the footer has shifted right! Any help appreciated.
The code is as follows....
<!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"><!-- InstanceBegin template="/Templates/IndexTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" title="Disabled for Preview-in-Browser: oneColFixCtrHdr.css" type="text/css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #989898;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
text-decoration: none;
a:visited {
color: #6E6C64;
text-decoration: none;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
background-color: #FFF;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-color: #FFF;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
/* ~~ The footer ~~ */
.footer {
color: #666;
background-color: #666;
padding-top: 0px;
padding-right: 0;
padding-left: 0;
margin: 0px;
padding-bottom: 0px;
height: 110px;
position: relative;
FaceBookTwitter {
background-color: #999;
/* ~~ miscellaneous float/clear classes ~~ */
.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. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
</style>
<style type="text/css">
.container .content table tr th {
background-color: #999;
top: 0px;
padding: 0px;
margin: 0px;
clear: 0;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: SpryAssets/SpryMenuBarHorizontal.css" type="text/css" />
<style type="text/css">
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 7.5em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 6em;
position: absolute;
left: -1000em;
text-align: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
text-align: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
text-align: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #CCC;
padding: 0.5em 0.75em;
color: #666;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
border-top-style: none;
text-align: center;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #666;
border-bottom-color: #999;
border-left-color: #666;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #666;
color: #FFF;
text-align: center;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #666;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
text-align: left;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
text-align: left;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
.container .content p img {
padding-top: 5px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
float: left;
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --><img src="New-Header.jpg" width="960" height="180" alt="Natalie Marie Logo" longdesc="file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/New-Header.jpg" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="MenuBarHorizontal">HOME</a> </li>
<li><a href="About Me.html">ABOUT ME</a></li>
<li><a href="Bridal.html">BRIDAL</a></li>
<li><a href="Occasion.html" class="MenuBarItemSubmenu">OCCASION</a>
<ul>
<li><a href="#">NIGHT OUT</a></li>
<li><a href="#">PARTY MAKEUP</a></li>
<li><a href="#">HEN NIGHTS</a></li>
</ul>
</li>
<li><a href="Fashion.html">FASHION</a></li>
<li><a href="Lessons.html">LESSONS</a></li>
<li><a href="Reviews.html">REVIEWS</a></li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</div>
<div class="content">
<p>
<Marquee>
Examples of my work: TAKE THAT • ID MAGAZINE • BATMAN LIVE WORLD TOUR • THE BAFTAS • LONDON FASHION WEEK • THE CORRS • THE TELEGRAPH MAGAZINE • HARPERS • MUSIC VIDEOS • VOGUE MAGAZINE • BRITISH FEATURE FILMS • Plus extensive Bridal and Photoshoot work •
</Marquee>
</p>
<!-- InstanceBeginEditable name="Main Body" -->
<p><img src="Bridal-Kit-Pic.jpg" width="283" height="426" alt="Bridal Kit Picture" />On your wedding day it is important that you look and feel your best and having the perfect make-up will give you the confidence for this. Having perfect wedding makeup is also key for perfect photographs, which are so important as those will be your treasured memories of your day. As a recent bride myself I totally understand how you will be feeling at this point and I strongly advise you to make lots of cut outs from all of those expensive bridal magazines to give a visual of your ideas. We will create a look which is long lasting and enhances your natural beauty. During your trial we will work together in depth to create the perfect look for you.<br />
</p>
<p>What expect on the day:<br />
- Skin care analysis and tips on skin care routine.<br />
- Talking through the wedding and theme of the day.<br />
- Discussing ideas for your wedding makeup, your likes and dislikes.<br />
- Spending time creating a look perfect for you.<br />
- Digital photographs of the makeup for referencing.<br />
</p>
<p>After your trial I create a face chart and write detailed notes about the products we have used to in order to recreate the look perfectly on the day. On your wedding day itself I stay until the very end making sure you look perfect for your ceremony. You will also receive your chosen lip brush free, for use throughout the rest of the day.<br />
</p>
<p>Bridal Make Up (On the day including trial) £150.00<br />
Bridal Trial £60.00<br />
Make up on the day for Bridesmaids/Mother of the Bride/Groom £40.00<br />
Additional Trials £35.00<br />
</p>
<p>Package prices can be arranged for large bridal parties.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- InstanceEndEditable -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src="facebook_LOGO.jpg" width="50" height="50" alt="Facebook logo" /> <img src="Twitter Logo_GREY.jpg" width="50" height="50" alt="Twitter Logo" /> </p>
</div>
<div class="footer">
<table border="0" align="center" cellpadding="5">
<tr>
<td height="101"><img src="Chanel-Logo-Grey.jpg" width="81" height="62" alt="Chanel Logo" longdesc="Chanel-Logo-Grey.jpg" /></td>
<td><img src="Bobby-Brown-Logo.jpg" width="174" height="37" alt="Bobbi Brown Logo" longdesc="Bobby-Brown-Logo.jpg" /></td>
<td><img src="MAC-Logo.jpg" width="105" height="61" alt="MAC Logo" longdesc="MAC-Logo.jpg" /></td>
<td><img src="Dior-Logo.jpg" width="105" height="82" alt="Dior Logo" longdesc="Dior-Logo.jpg" /></td>
<td><img src="NARS-Logo.jpg" width="118" height="47" alt="NARS Logo" longdesc="NARS-Logo.jpg" /></td>
<td><img src="MakeUpForeverLogo.jpg" width="151" height="49" alt="Makeup Forever Logo" longdesc="MakeUpForeverLogo.jpg" /></td>
</tr>
</table>
<p align="center"><!-- end .footer --></p>
<p align="center">© Copyright Natalie Marie Makeup 2011</p>
<p align="center"> </p>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>Unfortunately it didn't sort out the problem. The footer has been displaced to the right and I don't see why it should, when I added a 'float' property to the picture to enable the text to wrap around.
Can someone please advise?
It seems if I change the padding px numbers it moves the images within the footer around. How do I ensure that these are fixed in place? I have created a template, which may have the problem in.
Am I missing something?
The code from the footer section of the template:
</div>
<div class="footer">
<table border="0" align="center" cellpadding="5">
<tr>
<td height="101"><img src="../Chanel-Logo-Grey.jpg" width="81" height="62" alt="Chanel Logo" longdesc="Chanel-Logo-Grey.jpg" /></td>
<td><img src="../Bobby-Brown-Logo.jpg" width="174" height="37" alt="Bobbi Brown Logo" longdesc="Bobby-Brown-Logo.jpg" /></td>
<td><img src="../MAC-Logo.jpg" width="105" height="61" alt="MAC Logo" longdesc="MAC-Logo.jpg" /></td>
<td><img src="../Dior-Logo.jpg" width="105" height="82" alt="Dior Logo" longdesc="Dior-Logo.jpg" /></td>
<td><img src="../NARS-Logo.jpg" width="118" height="47" alt="NARS Logo" longdesc="NARS-Logo.jpg" /></td>
<td><img src="../MakeUpForeverLogo.jpg" width="151" height="49" alt="Makeup Forever Logo" longdesc="MakeUpForeverLogo.jpg" /></td>
</tr>
</table>
<p align="center"><!-- end .footer --></p>
<p align="center">© Copyright Natalie Marie Makeup 2011</p>
<p align="center"> </p>
</div> -
Why isn't my layout connecting divs tightly?
I am building a website, and I am having trouble with the coding. I have a Spry Menu that needs my Nivo (jquery) Slider to fit tightly underneath it, and then have the second Spry Menu (#2) fit tightly underneath the slider.
Why am I not able to push these tightly together? (my site html and spry menu html is below - CSS built into header of page)
Thanks for any insight anyone could provide!!!
SOURCE 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>Cache Valley ENT</title>
<meta name="keywords" content="Cache Valley ENT, ent, ear, nose, throat, allergy, allergies, symptom, congestion, treatment, clinic"/>
<meta name="description" content="Cache Valley ENT is Northern Utah's most experienced ear, nose, and throat clinic, offering treatments for your worst symptoms, including allergies." />
<meta name="identifier-url" content="http://" />
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
body {
background-color: #F1D2A6;
background-image: url(pictures/backgroundslice.jpg);
background-repeat: repeat-x;
#header {
width: 900px;
#body {
vertical-align: baseline;
width: 725px;
text-align: justify;
height: 900px;
background-attachment: scroll;
background-repeat: no-repeat;
background-image: url(pictures/textbox/home_text.png);
padding-top: 10px;
padding-right: 60px;
padding-bottom: 40px;
padding-left: 30px;
margin: auto;
#navbar {
height: 40px;
width: 696px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000000;
border-left-color: #000;
margin-left: 12px;
#MenuBar2 li {
width: 174px;
font-family: "Arial", Arial, serif;
color: #FFFFFF;
font-size: 20px;
letter-spacing:;
height: auto;
background-image: url(pictures/images/images/spry_menu_background2.png);
background-hover: url (pictures/images/images/hover_spry_menu_background2.png)
padding-top: 20px;
#footer {
font-size: 13px;
width:800px;
left: 50px;
margin-top: 10px;
padding-top: 10px;
a:link {
color: #000;
text-decoration: none;
a:visited {
text-decoration: none;
color: #000;
a:hover {
text-decoration: underline;
color: #666;
a:active {
text-decoration: none;
.headerphone {
font-size: 24px;
text-align: center;
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="ajximagerotator.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
directionNav: true,
controlNav: true,
directionNavHide: false,
captionOpacity: 1,
prevText: '<',
nextText: '>',
effect: 'fade',
pauseTime: 9000,
</script>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<!--favicon-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<!--Google Analytics Tracking Code-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32226035-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
<table width="720" border="0">
<tr>
<td width="557"><img src="pictures/CVENT Logo Edit.jpg" width="300" height="147" vspace="0" align="top" /></td>
<td width="153" nowrap="nowrap"><div class="headerphone">
<p><strong>Cache Valley ENT</strong></p>
<p>435.753.7880</p>
</div></td>
</tr>
</table>
<hr />
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="home.html">Home</a></li>
<li><a href="our_providers.html">Our Providers</a></li>
<li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
<ul>
<li><a href="services_entservices.html">General ENT</a></li>
<li><a href="services_allergy.html">Allergy</a></li>
<li><a href="services_hearing.html">Hearing</a></li>
<li><a href="services_pediatric.html">Pediatric Services</a></li>
<li><a href="services_asthma.html">Asthma</a></li>
<li><a href="services_headache.html">Headache</a></li>
<li><a href="services_facialplasticsurgery.html">Facial Plastic Surgery</a></li>
</ul>
</li>
<li><a href="new_patient.html" class="MenuBarItemSubmenu">New Patient</a>
<ul>
<li><a href="#">Forms</a></li>
<li><a href="#">Insurance</a></li>
</ul>
</li>
<li><a href="patient_resources.html" class="MenuBarItemSubmenu">Patient Resources</a>
<ul>
<li><a href="patient_resources_ears.html">Ears</a></li>
<li><a href="patient_resources_throat.html">Throat</a></li>
<li><a href="patient_resources_noseandmouth.html">Nose and Mouth</a></li>
<li><a href="patient_resources_headandneck.html">Head and Neck</a></li>
<li><a href="patient_resources_cancer.html">Cancer</a></li>
<li><a href="patient_resources_pediatric.html">Pediatric</a></li>
<li><a href="patient_resources_featuredhealthinformation.html">Featured Health Information</a></li>
<li><a href="patient_resources_enespanol.html">en Español</a></li>
<li><a href="patient_resources_aboutotolaryngology.html">About Otolaryngology</a></li>
<li><a href="patient_resources_enthistory.html">ENT History</a></li>
</ul>
</li>
</ul>
<p> </p>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<p><img src="nivo_images/walle.jpg" alt="" /> <a href="http://dev7studios.com"><img src="nivo_images/toystory.jpg" alt="" /><img src="nivo_images/nemo.jpg" alt="" /></a></p>
</div>
</div>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="services_entservices.html">General ENT</a></li>
<li><a href="services_facialplasticsurgery.html">Surgery</a></li>
<li><a href="http://www.CacheAllergy.com" target="_blank">Allergies</a></li>
<li><a href="http://www.wherecvhears.com">Hearing</a></li>
</ul>
</div>
<div id="img">
<h1> </h1>
<h1> </h1>
<h1>Welcome!</h1>
<p> <strong>Cache Valley ENT is located in North Logan, Utah, </strong>and provides ear, nose and throat (ENT) servies to relieve the the most stubborn allergy symptoms. Cache Valley ENT serves all Cache Valley residents, Box Elder County, and even Franklin County Idaho. Our doctors, Doctor Gordon Wood, Doctor Jeffrey Bennion, Doctor James Blotter, and Lindsay Humes (PA.C.), are all trained and experienced in allergy testing and treatments to provide you a favorable experience, and to help you live the live you deserve! They have more than 75 years' combined experience in providing successful ENT treatments! Cache Valley ENT is affiliated with the MidWest ENT Associates, PLLC. <br />
<br />
We have a convenient location in North Logan, UT at 2380 North 400 East, inside the Cache Valley Specialty Hospital. This location houses the ENT Clinic and the Gulf South Outpatient Surgery Clinic. Hours of operation are Monday through Thursday, 8am to 5pm, and Friday from 8am to 12noon. Call <strong>801-753-7880</strong> to schedule an appointment. </p>
<p><img src="pictures/our_practice.png" width="500" height="333" hspace="110" align="middle" /></p>
</div>
<p> </p>
<div id="footer">
<p> </p>
<p>Copyright 2012 | Cache Valley ENT | 2380 N 400 E, Suite D | North Logan, Utah 84341 | 435.753.7880 | <strong> <a href="contact.html">CONTACT US</a> </strong></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
SPRYMENUBARHORIZONTAL.CSS
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; -moz-background-inline-policy: bounding-box;}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ul.MenuBarActive{ z-index: 1000;}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; float: left; background-image: url(../pictures/images/images/spry_menu_background.png); width: 139px; z-index: 1001;} /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 9.5em; position: absolute; left: -1000em;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{ left: auto;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{ width: 10em;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{ position: absolute; margin: -5% 0 0 95%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{ left: auto; top: 0;} /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ul.MenuBarHorizontal ul{ } /* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{ display: block; cursor: pointer; padding: 0.5em 0.75em; text-decoration: none; text-align: center; border: 0.75px solid; border-bottom-color: #000000; border-left: none; border-right: none; border-top: none;} ul.MenuBarHorizontal ul a { text-align: left; } /* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ text-align: center; background-image: url(../pictures/images/images/hover_spry_menu_background2.png);}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ text-align: center; color: #000;} /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-repeat: no-repeat; background-position: 95% 50%;}/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; }/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-repeat: no-repeat; background-position: 95% 50%; text-align: center;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%;} /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ul.MenuBarHorizontal iframe{ position: absolute; z-index: 1010; filter:alpha(opacity:0.1);}/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */@media screen, projection{ ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; }}That which you have shared with us is OK. All fits neatly as per your requirement.
Perhaps it is that which you have not shared with us that could be the problem.
Gramps
PS The following may help you
Announcement: How Important is Code? A plea for new posters to help us!
Hide Details
Please don't ask a layout question (or really almost any other question) here without also giving us a look at the code on your page.
The best way to do this is to upload the page and its dependent files, and to post a link to this uploaded page. A poor second alternative would be to paste your code into your post using the double chevron icon on the toolbar, and selecting Syntax Highlighting > Plain Text.
Without knowing what you have in your code, we cannot possibly answer anything other than a very simple question. Save us the trouble of engaging in twenty questions to find out what you have done and just show us the code. After all, it's what determines what happens on the page, not your screenshot or your description.
Please?
Also, if your question is one that involves database use or server-scripting, please tell us what server model (PHP, CF, etc.) and database you are using (MySQL, SQL Server, etc.), as well as the operating system and platform. All of those details are necessary for complete troubleshooting and will help us help you through the process!
by Murray *ACP* (04-Aug-2010) -
Hi there,
i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.
thanks.
<body>
<div id="header">Heading</div>
<div id = "nav">
<ul id="Fyp">
<li><a href="html/Index.html">Home</a> </li>
<li><a href="html/Conventional.html">Conventional Encryption</a></li>
<li><a href="#">Public Key Encryption</a>
<ul>
<li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
<li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
<li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
</ul>
</li>
<li><a href="#">MAC Encryption</a>
<ul>
<li><a href="#">MAC - Message Authentication</a></li>
<li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
<li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
</ul>
</li>
<li><a href="#">HASH Encryption</a>
<ul>
<li><a href="#">Encryption after Concatenation</a></li>
<li><a href="#">Encryption before Concatenation</a></li>
<li><a href="#">Authentication</a></li>
<li><a href="#">Authentication and Confidentiality</a></li>
<li><a href="#">Secret Value</a></li>
<li><a href="#">Secret Value and Encryption</a></li>
</ul>
</li>
<li><a href="#">Self Test</a></li>
</ul>
</div>
<div id="main_content">
<p> </p>
<p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
<p> </p>
<p><strong>Authentication</strong>:</p>
<p><a name="#Authtentication"></a>
The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
<p> </p>
<p><strong>Confidentiality</strong>:</p>
<p><a name = "Confidenitiality"></a>
Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient .
</p>
<p> </p>
<p><strong>Public Key:</strong></p>
<p><a name = "Public Key"></a>
</p>
<p><strong>Digital Signature:</strong>
<p><a name = "Digital Signature"></a></p>
</p>
<p><strong>Integrity:</strong>
<p><a name = "Integrity"></a> </p>
<p><strong>MAC Function:</strong></p>
<p><a name = "MAC"></a> </p>
<p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
</p>
</div>
<div id="footer">
<p>
Footer - all about the designer and contact links go here
</p>
</div>
</body>
</html>Here ya go.
body {
margin:0px;
padding:0px;
text-align:center;
font-size:1.0em;
font-family:trebuchet ms, tahoma, arial, sans-serif;
#container {
text-align:left;
margin:0px;
width:1270px;
border:1px black solid;
padding: 0px;
#header {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:2.0em;
background-color:white;
color:white;
padding-top:0px;
padding-right:0px;
border-bottom:1px black solid;
#nav {
width:1270px;
#width:1270px;
height:24px;
font-size:0.8em;
background-color:#20548E;
color:black;
border-bottom:1px black solid;
#main_content {
width:1270px;
#width:1022px;
font-size:0.9em;
background-color:white;
color:black;
border-bottom:1px black solid;
#footer {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:1.0em;
background-color:#20548E;
color:white;
border-bottom:1px black solid;
#Fyp
{ margin: 0;
padding: 0;
#Fyp li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;
#Fyp li a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 140px;
color: #EAFFED;
white-space: nowrap;
#Fyp li a:hover
{ background: #1A4473;
#Fyp li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
#Fyp li ul li
{ float: none;
display: inline;
#Fyp li ul li a
{ width: auto;
background: #9F1B1B;
#Fyp li ul li a:hover
{ background: #7F1616; -
Stacking a Div ontop of another Div inside of a div?
ok so i am not a programmer, just a designer doing a family a favor building him a website. In using divs i am trying to get a div to overlap another div, while inside another div. confused? ok in simple: i have a div "wrapper" that holds the website center since the design is off center, inside this div i have another div which holds my body of the website "main", also inside the wrapper div i have a second div called "element" which is to sit top left and overlap the main div. The idea is to have an image cutting into the top left of the website, while keeping the rest of the site centered. I have attached a sample picture, and will post the code. if anyone can help please let me know thank you.
CODE:
<body>
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
<div id="header">
<h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
<h3>text</h3>
<h3> </h3>
<h3>phone </h3>
<h3>email</h3>
<h3> </h3>
<h3>address</h3>
<h3>city</h3>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet,</h2>
<p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
</div>
<div id="footer">
<table width="432" align="center" cellspacing="15">
<tr>
<td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
<td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
<td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
</tr>
</table>
<p> </p>
</div>
</div>
</div>
</body><head>
<style>
#page{
width:100%;
height:100%;
text-align:center;
#wrapper {
width: 860px;
position: relative;
float: none;
margin: 0px;
height: auto;
padding: 0px;
margin:0 auto;
#element {
top:0px;
left:0px;
padding: 0px;
height: 310px;
width: 305px;
position: absolute;
z-index: 100;
#main {
background-color: #333;
height: auto;
width: 550px;
border: 1px solid 333333;
position: absolute;
float: right;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
left: 155px;
top: 125px;
#header {
padding: 0px;
height: 180px;
width: 360px;
float: none;
position: relative;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 170px;
#content {
color: 555555;
background-color: #FFF;
padding: 20px;
height: auto;
width: 470px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
#footer {
background-color: #FFF;
padding: 0px;
height: 180px;
width: 510px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
body {
background-color: #CCC;
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 25px;
color: #FFF;
margin: 0px;
padding: 0px;
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCC;
margin: 0px;
padding: 0px;
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #000;
padding: 0px;
margin: 0px;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333;
margin: 0px;
padding: 0px;
.eng {
font-size: 12px;
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333;
</style>
</head>
<body>
<div id = "page">
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
<div id="header">
<h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
<h3>text</h3>
<h3> </h3>
<h3>phone </h3>
<h3>email</h3>
<h3> </h3>
<h3>address</h3>
<h3>city</h3>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet,</h2>
<p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
</div>
<div id="footer">
<table width="432" align="center" cellspacing="15">
<tr>
<td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
<td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
<td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
</tr>
</table>
<p> </p>
</div>
</div>
</div>
</div>
</body>
SORTED?
Maybe you are looking for
-
Deploying Adobe Reader 11.0.4 via SCCM 2012
Hello members, I am looking to deploy the latest version of Reader to our workstations both during OS build and also on existing machines. I have successfully created a custom install using the Adobe Customization Wizard I'm leaning towards the use o
-
Trouble converting PDF to Excel
I'm trying to convert this delimited PDF to an excel (or some other delimited format). Using Adobe Acrobat 9, I attempt to save it and copy it as Excel but it gives the error message "BAD PDF; error in processing fonts. [348]". How can I save as an
-
One thing I have noticed in my testing of Ratpoison is that it supports echoing messages to the screen via its statusbar. Does anyone know if it would be possible to have this work with MPD and Conky, so that track changes are announced via Ratpoison
-
McAfee security(BT Netprotect plusa) excluding cer...
I am using be provided antivirus, which came with my BT broadband. BTNet protect plus which is essentially McAfee I am using Dragon naturally speaking, which is a piece of speech software There is obviously a conflict between this program and the Mc
-
I have a site with multiple videos on one page; I'd like to have each video pop out in its own player when clicked, rather than just embed them on the page in a small size (they'll probably be hosted on Vimeo). In the past I've used Shadowbox on a si