Ap Div help

hi
i have made my website with divs and images inside them and
they are centered i am now inserting the navigation and flash
display i made in flash i need these positioned over the images and
centered in the browser. i need it centered compatible for all
browsers. i have drawn an apdiv and put it on top but i cannot get
that to center according to browser and whenever i just insert a
div it goes above or below the image header i have.
please help me
thanks

miccadoin wrote:
> hi
> i have made my website with divs and images inside them
and they are centered
> i am now inserting the navigation and flash display i
made in flash i need
> these positioned over the images and centered in the
browser. i need it
> centered compatible for all browsers. i have drawn an
apdiv and put it on top
> but i cannot get that to center according to browser and
whenever i just insert
> a div it goes above or below the image header i have.
> please help me
> thanks
>
Do you have an url for this page/site?
chin chin
Sinclair

Similar Messages

Progress Bar using HTP.DIV -Help please

Hi,
Below is my Code to get a progress bar on the screen writen as a package
PROCEDURE lp_progress_bar IS
BEGIN
htp.htmlOpen;
htp.headOpen;
-- Create Link to Style Sheet
htp.linkrel(crel => 'stylesheet',
curl => pk_constant.PATH_STATIC||'internal_body.css',
ctitle => 'text/css');
--Include the Javascript to Call the Progress Bar
lp_js_copy();
htp.headClose;
htp.bodyOpen;
--Define Attributes for the DIV tags to print the Progress bar
htp.div(cattributes => 'id="bar"');
htp.div(cattributes => 'id="progress"');
htp.bodyClose;
htp.htmlClose();
END lp_progress_bar;
and the JS for the progress bar
NL CONSTANT VARCHAR2(2) := CHR(13) || CHR(10);
PROCEDURE lp_js_copy
IS
vBodyCode VARCHAR2(500);
BEGIN
pk_js.js
'var time = 10000;'
|| NL ||'var aCopy = 5;'
|| NL ||'var aCopyDone = 1;'
|| NL ||'function progress() {'
|| NL ||'parent.fr_buttons.btnCancel.disabled= true;'
|| NL ||'var bar = document.getElementById("bar");'
|| NL || 'alert(bar);'
|| NL ||'var aStep = (bar.offsetWidth -2) /aCopy;'
|| NL ||'var x = Math.round( aStep *aCopyDone); '
|| NL ||'var progress = document.getElementById("progress");'
|| NL ||'progress.style.width = x +"px";'
|| NL ||'aCopyDone++;'
|| NL ||'if( aCopyDone > aCopy) redir();'
|| NL ||'else setTimeout( "progress();", time /aCopy);'
|| NL ||'}'
|| NL
|| NL ||'function redir() {'
|| NL ||'alert("Copy Successfully Completed");'
|| NL ||'parent.fr_buttons.btnCancel.disabled= false;'
|| NL ||'parent.fr_buttons.btnSave.disabled=true;'
|| NL ||'}'
END lp_js_copy;
The stlye for bar and progress aere defined in the stylesheet internal_body.css as
#bar
MARGIN: 0 auto;
WIDTH: 250px;
TEXT-ALIGN: left;
BORDER: 1px solid black;
#progress {
WIDTH: 0;
BACKGROUND: darkblue;
but I am not getting anything on the screen. What should I do to get it pop up on the existing screen.
I had posted it on a the database thread too. But I guess it was th wrong category.Hence posting it new here.
Please Help.
Message was edited by:
ora newbie

Hi Dwijesh,
U can use a OCX control. Make a OCX control and insert microsoft progress bar object into it. Then you can write codes into it accordingly to incerease the bar.

Newbie AP DIV help

First time creating a website and I am having an issue with my ap divs. When I preview them in dreamweaver browser preview everything looks great but when I uploaded the site all my ap divs moved to the left. What did I do??? I have been searching for answers to what I did wrong and have not found exactly how to fix this. I am sure my code is off, considering I have never done this before. Any help that you can give I would greatly appreciate it.

In DW, you'll find some pre-built CSS Layouts you can use to jump start your projects.
File > New > Blank page > HTML > Layouts. Select one, hit Create.
APDivs (absolutely positioned) are removed from normal content flow & seldom work well in primary layouts. Here's why: http://www.apptools.com/examples/pagelayout101.php
For best results, learn to use CSS Floats & Margins to align elements on screen.
http://css.maxdesign.com.au/floatutorial/introduction.htm
Nancy O.

Centering a DIV, (help) Tried several solutions, none helped.

Hi,
I am trying to center my webpage, fortunatly i tried to center it before i did to much work on it.
Heres my Css. (it already includes the proposed solution that i saw on this forum, being the wrapper the last solution, it wraps the other 2 divs (topo and menu))
@charset "UTF-8";
/* CSS Document */
body {
    text-align:center;
    right: auto;
    height: auto;
    width: 800px;
    position: relative;
    left: auto;
#topo {
    background-color: #000;
    left: auto;
    right: auto;
    width: 800px;
    clip: rect(auto,auto,auto,auto);
    position: relative;
    overflow: auto;
    height: auto;
#menu {
    width: 800px;
    left: auto;
    right: auto;
    position: relative;
    height: auto;
#Wraper {
    text-align: center;
    position: relative;
    left: auto;
    right: auto;
    width: 800px;
Heres my html. In case it matter
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>ManoZe</title>



<link href="../css/styles.css" rel="stylesheet" type="text/css">
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<div id="Wraper">
<div>
    <div id="topo">
      <div>
        <div align="center"><img src="../images/banner.jpg" width="800" height="300">    </div>
      </div>
    </div>
    <div id="menu">
      <div align="center">
        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="65">
          <param name="movie" value="../images/menu.swf">
          <param name="quality" value="high">
          <param name="wmode" value="transparent">
          <param name="swfversion" value="6.0.65.0">
          
          <param name="expressinstall" value="../Scripts/expressInstall.swf">
          
          
          <object type="application/x-shockwave-flash" data="../images/menu.swf" width="800" height="65">
            
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <param name="swfversion" value="6.0.65.0">
            <param name="expressinstall" value="../Scripts/expressInstall.swf">
            
            <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>
            
          </object>
          
        </object>
      </div>
    </div>
    <div align="center"> </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
Thks allot for you help!.

I redid the file, and it worked, i made an efford to minimize the code to a bare minimum, maybe less is more(?)
Here goes the new files code. (to help understand what went wrong)
New CSS:
@charset "UTF-8";
#topo {
    width: 800px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
#menu {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
New HTML;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>ManoZe</title>



<link href="../css/styles.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="topo"><img src="../images/banner.jpg" width="800" height="300"></div>
<div id="menu"> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="65">
    <param name="movie" value="../images/menu.swf">
    <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">
    
    
    <object type="application/x-shockwave-flash" data="../images/menu.swf" width="800" height="65">
      
      <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">
      
      <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>
      
    </object>
    
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Aligning social media icons on a page (Was:Need Div help, please.)

Hello,
I'm trying to figure out the best way to get the social media icons on the right side in a row, side by side, no space between.
Can I use a div?
Problem is now is that depending on monitor/screen size, the spacing changes.
Again, I want to have them all together with no spacing, centered on the right at all times.
http://www.saintleo.edu/SocialMediaSliders/Kathryn-JK.html
Any help would be greatly appreciated.
Kind regards,
JK

Yes, I took a look at the website. I saw that they were sliders.
It's hard for me to answer if putting an unordered list will hurt your code. The code that you have is not indented so it's extremely hard to read.
I would try putting the image in the <li> first. Make a backup of the page if you're nervous, and work on the backup. So your current content is live, and your backup can be toyed with until you have it right.
Also:
If using an unordered list scares you, there is an alternative which may work. I will use #twitter_right img as an example.
You are using absolute positioning. There is no reason to do this and I'm under the impression that absolute positioning should be avoided.
Your current CSS Rules for this are as follows:
#twitter_right img {
     left: -52px;
     position:absolute;
     top: 45px;
Instead, it should be:
#twitter_right img {
     float:right;
     margin-top:45px;
Now, if you wanted to get fancy you could do this: (The CSS Identifiers are not accurate... just showing you an exmple)
#twitter_right img, #facebook_right img, #youtube_right img {
     float:right;
     margin-bottom:45px; -- this is could also be padding. Set this value to the height of the image if you don't want spacing.
That way, when the slider moves out, the icon will move with it. Additionally, the spacing would be equal across the board.

Nested Divs HELP, I'm stupid!!!

O.k. I've been talked into redoing my works website ... &
last time a designed a site I used tables... many moons ago. Anyway
thought I'd attempt css. I've read forums etc. saying make the
container 100% height etc. etc. Can someone have a look for me and
save my weekend pls.. Thanks in advace.

> I've read forums etc. saying make the container 100%
height etc. etc.
Surely you haven't read them carefully enough if this is what
you remember
from them.
But - is there a question in your post? What is it that is
going wrong for
you?
Could it be that this is what you want? (I removed the
unnecessary and
redundant CSS, added a few float clearing elements and some
paragraphs to
the text).
<!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>Untitled Document</title>
<link href="template.css" rel="stylesheet" type="text/css"
/>
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header_wrapper">
<div id="nav"><a href="#"
class="navtxt">home</a><a href="#"
class="navtxt">flipping book</a><a href="#"
class="navtxt">testimonials</a><a href="#"
class="navtxt">contact us</a><a
href="#" class="navtxt">beautyware</a></div>
<div id="info"></div>
<div id="header"></div>
</div>
<div id="content">
<div id="content_left">
<p>The greatest challenge facing salons today is how
to
manage all the time-consuming accounting and managerial
tasks and
still have
enough energy left to perform at their absolute
best.</p>
<p>That is why Hairware has been so well received by
salons throughout
Australia and Asia throughout the last twenty years.
Hairware
continues to
evolve based on industry needs, advances in technology and
government
and
accounting regulations and approximately every four years
the Hairware
program is completely redeveloped.</p>
<p>While Hairware helps salons with the management and
accounting side
of
the business, it also has some outstanding features that
allow salons
to
develop the service side of their operations. This means
that salon
operators
have more time to focus on delivering exceptional client
service.</p>
<p>Such service may include anything from a client
tailored VIP Loyalty
Program and comprehensive client information file to what
type of
beverage a
client likes and whether they want to have their appointment
confirmed
by
SMS. All these special features are designed to help salons
stay on
top of
each client?s individual needs. Leaving clients with a
favourable
impression
means repeat business and more word-of-mouth
referrals.</p>
<p>Each new version of Hairware promises to break new
ground and the
Version
7 software was released to celebrate Hairware?s 20th
Anniversary.
Hairware
Version 7 presents a myriad of opportunities to enhance your
salon
operations
and leave you time to perform your best styling work for
your
clients.</p>
</div>
<div id="content_right"><img
src="images/hw_ad_image.jpg"
alt="hairware_girl" width="300" height="200" />
<p class="style3">The system that allows you to spend
more time doing
the
things that you want to do...</p>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">Content for id "footer" Goes
Here</div>
</div>
</body>
</html>
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
==================
"jhb" <[email protected]> wrote in message
news:[email protected]...
> O.k. I've been talked into redoing my works website ...
& last time a
> designed
> a site I used tables... many moons ago. Anyway thought
I'd attempt css.
> I've
> read forums etc. saying make the container 100% height
etc. etc. Can
> someone
> have a look for me and save my weekend pls.. Thanks in
advace.
>

Pan & Zoom plug-in experience

Anyone have any experience or review of the Pan & Zoom plug-in from stagetools.com (moving pictures) versus lyric.com (pan zoom pro? There is a significant difference in price.

I did the "search thingy" and it wasn't helpful. That's why I axed the question. < </div>
"Helpful" or just too much information for you to bother with?
My search for your term "pan and zoom" returned about 2,000 posts. I qucily cruised through about fifty within two minutes that referred directly to specific products or that mentioned "I like this one" or "This one stinks."
Most of the posts, truthfully, were similar to yours, someone asking for advice on what plugin they should consider buying for what should be a simple and elegantly fun task within FCP.
Here's my advice: "Buy After Effects. You'll never need another plugin for FCP."
bogiesan

I need help writing a dive scoring program in C#, Help Please?

The state diving commission wants to computerize the scoring at its diving competitions. I have to write a program to automate the scoring of dives. Requirements:
After each dive, the user will be prompted to enter the:
diver's name;
diver's city;
degree of difficulty (ranges from 1.00 to 1.67); and
scores from five judges (scores can range from 0 to 10).
If an invalid score is entered, an error message will be displayed. The user will be prompted for the score repeatedly until a valid score is entered.
The program will then display the following information:
Diver's name
Diver's city
Dive final score: This is calculated by dropping the highest and lowest of the five judges' scores. The remaining three scores are added together, and the result is divided by 3 and then multiplied by the degree of difficulty.
The program will then prompt the user if she/he wants to process another dive. The user can type "Y" or "y" to continue, and "N" or "n" to quit.

Hi,
The forum supports VS setup and installation. I think your issue is not about the forum.
Please clarify your project type. Is it webform or winform?
If it is webform, please post your issue to ASP.NET forum.
If it is winform, please post it to
winform forum.
Regards.
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Can someone help me understand how ePub CSS @fontface Unicode characters are supported in td , but not in div or other elements?

Hi,
I'm working on a project to convert several hundred thousand life sciences articles into epub format, and we have run in to a problem with character entities.
Being that these are scientific articles, the characters are from a wide range of Unicode charts, and are essential to transmitting the meaning of the data.
The problem is that in my epub, the character entity inside a table data cell is rendering the @font-face correctly, but inside any other HTML element, the character renders as an empty box on our ipad2s.
I've placed pre tags in hopes that the unicode will not be rendered in your browser here. The code point in this example is x1d542 just in case.
So inside div, we see boxes, inside td, we see the character rendered properly.
<pre>
      <div class="stix">Let 𝕂 be a field, which will be either the complex numbers ℂ or the finite field 𝔽</div>
      <table id="t31" rules="all">
        <tr>
          <td>𝕂</td>
          <td class="stix">𝕂</td>
          <td>U+1D542 MATHEMATICAL DOUBLE-STRUCK CAPITAL K </td>
        </tr>
</pre>
My CSS looks like this:
<pre>
@font-face {
    font-family: 'STIX';
    src: url('STIX-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+02B0-02FF, U+07C0-07FF, U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
@font-face {
    font-family: 'STIX-Math';
    src: url('STIXMath-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+02B0-02FF, U+07C0-07FF, U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
.stix   {
        font-family: "STIX", "STIX-Math", sans-serif;
</pre>
Is it possible that this is a rendering bug, because the character is rendering in the table cell, but not in other elements?
Have I missed something obvious?
Thanks,
Abe

I assume you are including the STIX font as part of your epub files?
Perhaps the folks who do this blog might be able to help -- they have done some work with font embedding:
http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-an d.html

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" />
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
    <h1>
</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" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
          
          <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" />
          
          <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>
          
        </object>
        
      </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>
</div>
<script type="text/javascript">

</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!
Jayson

1) 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

Help with floating divs

Hi All,
I have given up on the liquid template and now started from scratch with fixed divs.
My problem now is the floating elements.
I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
If I am not making sense please let me know
Any help would be appreciated.
Thanks in advance
This is my code and css.
<!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>Untitled Document</title>

<style type="text/css">
</style>
<script src="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />


<link href="../faarcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    font-family: "Myriad Pro";
h1,h2,h3,h4,h5,h6 {
    font-family: "Myriad Pro";
    font-weight: bold;
h1 {
    font-size: 110%;
h2 {
    font-size: 105%;
h3 {
    font-size: 100%;
h4 {
    font-size: 90%;
h5 {
    font-size: 90%;
h6 {
    font-size: 90%;
p {font-size: 90%;
</style>
</head>
<body onload="KW_doClock()">
<div id="wrapper">
<div id="topNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More than Just a Mortgage</a></li>
          <li><a href="#">Line Of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">The Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
        <ul>
          <li><a href="#">Creating your financial security</a></li>
          <li><a href="#">Superannuation</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Budgeting</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
        <ul>
          <li><a href="#">Accounting</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Taxation</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Property</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Property Archives</a></li>
          <li><a href="#">Property F.A.Q.</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
        <ul>
          <li><a href="#">Estate Planning</a></li>
          <li><a href="#">Solicitors</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Information</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Seminars</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Media</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
        <ul>
          <li><a href="#">Our Point of Difference</a></li>
          <li><a href="#">Our Undertaking</a></li>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Site map</a></li>
          <li><a href="#">Contact FAAR</a></li>
</ul>
      </li>
    </ul>
</div>
<div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
<div id="name">
<img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
<param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
    
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
    
    <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>
    
</object>

</object></div>
<div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
<div id="clock">
    <script language='JavaScript'>
// Kaosweaver Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
    this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
    this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
// If the clock's size needs adjusting, change the 287 above.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
    d=document;t=new Date();p="";dClock="";    if (d.layers) d.wrapClock.visibility="show";
    tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
    h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
     {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
     {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
    if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
        lc.document.write(dClock);lc.document.close();
    } else if (d.all) {    activeClock.innerHTML = dClock;
    } else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
    if (!a) setTimeout("KW_doClock()",1000);
function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
case "M":if ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
// Kaosweaver Live Clock End
    </script>
    
</div>

<div id="mainContent">
    <p><strong>Template for Financial & Accounting</strong></p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>

<div id="sidebar">
    <ul id="MenuBar2" class="MenuBarVertical">
      <li class="navMenu"><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More Thank Just a Mortgage</a></li>
          <li><a href="#">Line of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
<ul>
    <li><a href="#">Creating your financial security</a></li>
    <li><a href="#">Superannuation</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Budgeting</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
<ul>
    <li><a href="#">Accounting</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Property</a>
<ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Property Archives</a></li>
    <li><a href="#">Property F.A.Q.</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Legal</a>
<ul>
    <li><a href="#">Solicitors</a></li>
    <li><a href="#">Estate Planning</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
    <li><a href="#">Seminars</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
<ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">Site Map</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
<ul>
    <li><a href="#">Our Point of Difference</a></li>
    <li><a href="#">Our Undertaking</a></li>
    <li><a href="#">Site map</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">CONTACT FAAR</a></li>
</ul>
</li>
<li><a href="#">Feedback</a></li>
<li><a href="#">CONTACT FAAR</a></li>
    </ul>
</div>
<div id="footer">
<p class="copyright">Copyright © Financial And Accounting Resources 2011
<p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and   changing every effort has been made to ensure the accuracy of the   information contained within ths website. Financial and Accounting   Resources accepts no responsibility or liability for any loss or damage   whatsoever (either directly or indirectly) to any person arising from   the use or reliance on the information contained in this website.
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
CSS.
@charset "utf-8";
/* CSS Document */
body {
    background-color: #FFF;
    padding: 0px;
    margin-top: 25px;
    text-align: center;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
html, body {
    margin: 0px;
    padding: 0px;
#wrapper {
    background-color: #FFF;
    width: 1000px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
#topNav {
    background-color: #00A0C4;
    width: 1000px;
    padding-top: -25px;
    clear: left;
    float: left;
    padding-bottom: 5px;
#logo {
    background-color: #FFF;
    height: 230px;
    width: 230px;
    float: left;
    padding-top: 10px;
#name {
    background-color: #FFF;
    height: 230px;
    width: 300px;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
#header {
    background-color: #FFF;
    height: 230px;
    width: 450px;
    float: right;
    clear: right;
    padding-top: 10px;
#motto {
    background-color: #FFF;
    height: 25px;
    width: 1000px;
    float: left;
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 110%;
    font-style: italic;
    padding-top: 15px;
#clock {
    background-color: #FFF;
    height: 30px;
    width: 1000px;
    clear: both;
    float: left;
    font-size: 100%;
    text-align: right;
    font-weight: normal;
    color: #000;
    vertical-align: middle;
    padding-top: 10px;
#mainContent {
    background-color: #FFF;
    height: auto;
    width: 720px;
    float: right;
    margin-bottom: 10px;
    padding-right: 25px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    text-align: justify;
#sidebar {
    background-color: #00A0C4;
    width: 225px;
    clear: left;
    float: left;
    height: auto;
    padding: 10px;
ul nav {
    background-color: #00A0C4;
    width: 250px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    list-style-position: inside;
    list-style-type: none;
#footer {
    background-color: #00A0C4;
    height: 100px;
    width: 940px;
    float: left;
    clear: left;
    padding: 10px;
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
sidebar.menu {
    font-size: 100%;
    font-weight: bold;
    color: #FFF;
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
    border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background: #ADB96E;
    color: #FFF;
    float: left;
.navMenu {
    font-size: 100%;
    text-align: left;
    padding-right: -10px;
    color: #FFF;
    font-weight: bold;
.sideNav {
    font-size: 80%;
    text-align: left;
    padding: 10px;
.copyright {
    font-family: "Myriad Pro";
    font-size: 110%;
    font-weight: bold;
    color: #FFF;
    text-align: center;
.disclaimer {
    font-size: 75%;
    color: #FFF;
    text-align: left;
Thank you
muznik

The table is still above the text, not on the side like in the image you sent.
I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
The code i have now is below... Not sure what I'm doing wrong :/
<!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=iso-8859-1" />
<title>Untitled Document</title>
<head>
<title>style.css</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
    <div id="logo">
    </div>
    <div id="header">
    </div>
</div>
<div id="container">
    <div id="left_col">
      <table width="188" border="1">
      <tr>
        <td>Test 1 </td>
      </tr>
      <tr>
        <td>Test 2 </td>
      </tr>
      <tr>
        <td>Test 3 </td>
      </tr>
      <tr>
        <td>Test 4 </td>
      </tr>
    </table>
    </div>
<div id="page_content" style="overflow: auto;">
      <p>The Department of the Navy desires a tool for analyzing the affects of budgetary changes upon Fire and Emergency Services provided upon Naval Installations throughout the world.   The diversity of these installations suggests that across the board funding changes may affect each location differently. This project presents a Fire Loss Model to support the continued development of the analysis tool.</p>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

Inserting pictures into a div in a certain formation. help. thanks!

I'm new to forums and Dreamweaver cs4 and code... I really could use some help. I want to put pics where the black boxes are but i cant seem to get them stacked as they look. I also want to be able to have words/paragraphs to the left of the four pictures. I tried; insert picts with padding/floating, tables, seperate divs, create web photo album, i just cant get them lined up like that. I'm using dreamweaver cs4 and i have my layout seperated with divs, so the white body part is a indidual loating div. Please help. Thanks.
ps. The "right body" div (white box) is set at like 600w x 400h. I dont want that dimenstion to change.
thanks again everyone who can help.

You want something like this??
http://alt-web.com/TEMPLATES/2-col-fixed-with-floats.shtml
View source in browser to see the code.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need help centering DIV in CSS

Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.
I did a sketch up of what I want in layout terms.
Any suggestions on how to center a 980px div?
Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
Any help is appreciated.

This is a very common question, so an article has been published in the Dreamweaver FAQ
Centering a page:
http://forums.adobe.com/thread/454036
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

PLEASE HELP! How do I make BC not render a div if there is no content?

I have a problem that I suspect I need JQuery for, unless someone can suggest a nifty workaround:
On my ecommerce online shop layout template, I have it set up so that there's a category description first, that floats to the left, and then floating to the right of that, is my cataloguelist div class and my productlist div class below that.
As shown here:
on a page that has no subcategories: http://bevisco.businesscatalyst.com/products/storage/caddies
on a page that has subcategories, but no other products: http://bevisco.businesscatalyst.com/products/seating
This is how I've got the html on my shop layout template:
<div class="shop-main clear">
<div class="cat_description">{tag_cataloguebreadcrumbs}{tag_description}</div>
<div class="catalogue_list">{tag_cataloguelist,4,,24,,true,}</div>
<div class="prod_list">{tag_productlist,4,,24,,true,}</div>
<div class="footer clear">{tag_previouspage,<img alt="" src="/CatalystImages/module_previous.png" />}{tag_pagination}{tag_nextpage,<img alt="" src="/CatalystImages/module_next.png" />}</div>
</div>
What I want is for {tag_cataloguelist} and {tag_productlist} and their containing divs to not show at all if there is no content for them...
Is it possible? Is there anyoneone able and kind enough to please help me? I don't know javascript, but am happy to use it if someone can show me what I need.
Thank you.

Hi Carol,
I've read the rule of the commas for modules, but not for tags ... so thought maybe this is why is not working ... but again, I'm just trying to figure it out.
I'm still confusing about when and how use modules and tags properly.
I've found this short guide for TAGS that says literaly:
"Note: Tags are not transferrable and cannot be shared across all modules. Use the specific tags listed with each module as shown below: "
http://kb.worldsecuresystems.com/134/bc_1342.html?bc-partner
You may access through your BC aacount ... search by "Tags - Quick Reference" ... this is a little different that the one from ADOBE site.
You'll see that the tags can be customizable by modules and not the way you are doing.
HOWEVER, take a look at another short guide that might give you another options ... I'm gonna try this too.
This is at http://forums.adobe.com/docs/DOC-2721 .... scroll down until STEP 4 and see some customizations for Product Tags
I have a similar case like yours .... I want to show discounts and previous prices only on Sale items ... like I do at http://tesonline02.businesscatalyst.com/outerwear/avatar ... and hide all these for regular items.
Haven't found a clear tutorial, neither the responses are completly satisfactory... someone told me use the tag_sale and the rest through CSS ... but ... how??? ... this is so frustrating
.. have you found a good tutorial?
I'm trying to find a response for that ... keep you posted so you may apply it in your case.
Regards!!
Eva

Images made into links (in divs) not working in Internet Explorer but works in Firefox. help!

Hey guys,
The text links are fine, but the image links don't work in internet explorer. Anyone know why this is happening?
Sample code:
<a href="facebook"><div class="fb"><img src="Facebook.png" /></div></a>
The link links to another HTML in my site

If you anticipate having more questions, a great self help is to validate your code, that is, test your code against the rules set for the particular DOCTYPE you are using.
http://validator.w3.org/
"you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
In this case it would have pointed out that you can't put a <div> inside an <a>.
Best wishes,
Adninjastrator

Ap Div help

Similar Messages

Maybe you are looking for