Negative margins

We have had a new website produced and being tested at
http://opie.monkeyshrine.com/
Firstly any comments of any kind warmly welcomed.
More importantly there is a bug with the coding, as suggested
in the title, due to the negative margins used in the css.
Basically the layout shifts the main content over 200 px and so
part of the main content appears to be locked by the template when
you hover over, and can not be clicked into.
The web guy explained it as follows ...
>>
In the CSS file there's a section titled LAYOUT, you can find
it quickly by putting that into the Find tool.
The main part where the negative margins are used is to
position div#main-content (all content) and div#sub-nav (quick
links etc).
I used negative margins for two main reasons
1. so that the most important content on the page would load
first / come first in the code
2. so that when the page is resized the different parts of
the page would move to the right spots ie the Recent New / Also in
this section would drop down underneath
I think it could be got around with the design time
stylesheet I've heard about, you'd lose the layout of the page a
little but there's always the preview in browser option when that
server is set up right.
>>
Can you please let me know if there is another way around
this?
Tanks in advance

any thoughts?

Similar Messages

  • DW CS3 crashing due to negative margin CSS?

    I have a simply CSS layout with an element I'm positioning with a negative top margin.
    Every time I input the margin attribute when in either Design view or Split view Dreamweaver throws the spinning beachball of death and I have to force quit.
    I inched my way up to -100px just fine. As soon as I hit -200 pix I'm toast. I have replicated this over and over. I've tossed preferences, I've rebooted. I've opened other pages. I successfully input the proper value in Code view. But as soon as I toggle to Design or Split, same thing.
    I'm using DW CS3, on a Mac G5 tower with loads of RAM, hard drive space. I'm running the current OS X update for my G5.
    Insanely, the file will also crash DW CS3 on my MacBook Pro.
    What could be so bad about one CSS entry that DW cannot display the page?
    I don't recall ever seeing a CSS rule limiting negative margin...

    8k exactly? As in 8192 bytes? If so, then you've been lucky to not see it crash. Try adding a comment line to the file just to bump it out of that 8K figure. Although I seem to recall that the 8k bug would crash DW without even getting the chance to open the file. There might be a chance that embedded CSS in an HTML file equals that number of bytes, too. If so, add a comment line there, too.
    FWIW, the following causes no troubles on my CS3 Vista box.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
          #neg {
            margin-top: -212px; /* or any large number. Tried it up to 1024*/
        </style>
      </head>
      <body>
        <div id="neg">This is my negative margin content</div>
        <p>Here is my body content.</p>
      </body>
    </html>
    Mark A. Boyd
    Keep-On-Learnin' :-)

  • Appropriate use of Negative Margin

    I have a straight forward layout.
    <div id="main">
    <div id="header"> </div>
    <div id="leftbox> </div>
    <div id="rightbox"> </div>
    </div>
    The two inner < div>s are floated so they sit side by
    side and most of the content is in rightbox.
    Here's my question. If on a couple of pages the header
    content is less is it acceptable to put a negative top margin to
    pull the rightbox div up into the empty header space? If I tinker
    with the header height I can see that it will have implications for
    other components (e.g. change position of nav panel on that page).
    Should I work at fixing those implications or is the negative top
    margin acceptable practice?
    Thanks
    Martin
    Whooooaa! I just tested that and in IE 6 the header obscures
    the content of rightbox as if it was sitting under it but FF shows
    it!

    I wouldn't. Negative margins always bite me in the long run.
    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
    ==================
    "martcol" <[email protected]> wrote in
    message
    news:ggri0h$lk7$[email protected]..
    >I have a straight forward layout.
    >
    > <div id="main">
    > <div id="header"> </div>
    > <div id="leftbox> </div>
    > <div id="rightbox"> </div>
    > </div>
    >
    > The two inner < div>s are floated so they sit side
    by side and most of the
    > content is in rightbox.
    >
    > Here's my question. If on a couple of pages the header
    content is less is
    > it
    > acceptable to put a negative top margin to pull the
    rightbox div up into
    > the
    > empty header space? If I tinker with the header height I
    can see that it
    > will
    > have implications for other components (e.g. change
    position of nav panel
    > on
    > that page). Should I work at fixing those implications
    or is the negative
    > top
    > margin acceptable practice?
    >
    > Thanks
    >
    > Martin
    >
    >

  • Negative margins in IE

    I'm using a negative margin to shove my text and bullet
    points left but good old IE 7 is cropping them.
    Any experience of the problem before I rebuild my page of
    just bin the style.
    MY TEST
    PAGE
    Thanks,
    Rich

    Don't use negative margins. Why do you feel you need them?
    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
    ==================
    "RICH POW" <[email protected]> wrote in
    message
    news:fu57dj$kui$[email protected]..
    > I'm using a negative margin to shove my text and bullet
    points left but
    > good
    > old IE 7 is cropping them.
    >
    > Any experience of the problem before I rebuild my page
    of just bin the
    > style.
    >
    >
    http://www.adelantedesign.co.uk/websites/adelante/
    >
    > Thanks,
    > Rich
    >
    >

  • Negative Margin Alternative??

    Hello, I know negative magins are not good practice and you want to avoid using them.
    I was wondering if you can help me with this situation.
    I am using a DW premade layout fixed, 1 column, header and footer.
    I have a footer image that fades up into the content area. I want the content area to overlap the footer image a little. Now I am able to do it with a negative margin and it looks good. But what would be an alternative so I did not have to use negative margins? any ideas?
    Thanks

    Have a look at the following document which validates as HTML5
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    body {width: 980px; margin: auto;}
    #content {width:100%; float:left; margin-right:-200px;}
    #sidebar {width:200px; float:left;}
    ul {list-style:none;}
    li {line-height:1.3em;}
    .col2 {margin-left:100px;}
    .col3 {margin-left:200px;}
    .top {margin-top:-2.6em;} /* the clincher */
    </style>
    </head>
    <body>
    <div id="content">
        <h1>Main content in here</h1>
      <ul>
        <li class="col1">Eggs</li>
        <li class="col1">Ham<li>
        <li class="col2 top">Bread<li>
        <li class="col2">Butter<li>
        <li class="col3 top">Flour<li>
        <li class="col3">Cream</li>
      </ul>
    </div>
    <div id="sidebar"> <p>I’m the Sidebar! </p> </div>
    </body>
    </html>
    Gramps

  • Margin-top a negative

    Have a page with copy on the left and a pic on the right in two different divs.In the dive on the left there is a policy statement that has one word and then an address to the right of that word. The way it is configured presently is in two seperate divs one floats left and the other floats right. However, the right div has a negative to margin, which may cause problems with some browsers. Here is a link: http://kellymaglia.com/test/contact.html
    I would like to not use the negative top margin or use another method. thanks.

    Using negative margins is almost always the poorest solution to a problem.
    In the case of your page, I am not sure why you are using such a complex layout!  Why not just use two adjacent divs, one containing all the content to the left of the (extremely large - 484K - image), and the other containing the image?  Why do you need that 'returns_address' div at all?  If you made all of that content inline, you would have no need for negative margins.

  • Introduce left/top margin: Change Page Size ignored

    I have a vector drawing of a technical schematic in PDF.  The drawing is an extract of a much larger schematic, so it is very small: 2.2" by 1.648".  However, when I print it out, it is resized to fill up a Letter size paper (8.5" by 11") and the size is then perfect for viewing.  Also, the PDF has no white space around the edges, so the same PDF is perfect for importing into documentation packages.
    However, for hard copy printing, depending on the exact aspect ratio of the drawing, I will sometimes want to introduce white space along one edge for hole-punching purposes.  I am opening the PDF and printing it from Acrobat 8 Professional.  I cannot use Document->Cropping because I am trying to introduce a margin rather reduce an existing margin.  I tried using the Change Page Size controls in the cropping dialog panel.  Originally, it was set to Fixed Sizes and Page Sizes was set to None.  I selected Custom instead of Fixed Sizes, then I entered in the Width and Height in inches, with the Height being about 0.5" more than the original 1.648" (it's landscape, so the holes will be at the top).  However, the illustrative diagram does not change, and neither do the dimensions shown on it.  I click OK and the PDF as viewed did not change -- no white space.  When I go back into the Change Paper Size dialog, all the size data that I entered is gone and the control have reverted back to Fixed Size with a Page Size of None.  I explored the dropdown list for Page Sizes, and none of them are appropriate for such a small diagram.
    What I'm trying to achieve is a pretty simple effect, and I thought it would be straightforward.  It has to be *very* simple as I expect to do this regularly.  Is there actually a way?  Ideally, it doesn't involve calculating all sorts of bounding boxes and offsets.  Who knows what the assumed reference points for those are.  In fact, the most direct way would be to enter a negative Margin Controls in the Crop Margins region of the dialog.  That is not possible, of course.

    Actually, I found a way.  The reason why the page size was being ignored is because the numbers were too small.  If I enter a big enough number, it sticks.  It would be nice to get a message to that effect though.......sigh.
    I can then adjust the cropping margins to get the gutter.
    Thanks.

  • Mysterious margin

    Hi all,
    I'm relatively new to Dreamweaver (I am using CS5). But I have accomplished all I need to for the company I work for. I am now in the process of checking errors on our website. This is my problem that I can not fix.
    I created a template; we'll call this template 'template2'. Template2 is a three column liquid page, which I have created five html pages from. One of these pages displays correctly in chrome IE and other web browsers (this page will be called "Services"), while the other four pages do not. When displayed "services" is spread across the entire web browser which is how I want it to look. However when I click the link on the correctly displayed page to one of the other four pages there is now a margin between the left edge of the website and the left edge of the web browser.
    All the code looks the same between the five web pages and the template. I'm not quite sure how to fix this.
    If anyone has any ideas, it would be great t hear from you.

    Here is the code for a correctly displayed page
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>TrueSouth Template1</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    margin: 0;
    padding: 0;
    color: #000;
    /* ~~ 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; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    text-align: center;
    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:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    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. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 100%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ 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: #FFF;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs 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.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    background: #FFF;
    padding-bottom: 10px;
    .content {
    padding: 10px 0;
    width: 60%;
    float: left;
    .sidebar2 {
    float: left;
    width: 20%;
    background: #FFF;
    padding: 10px 0;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    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 */
    padding: 5px 5px 5px 15px;
    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. */
    text-decoration: none;
    background: #;
    color: #000;
    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: #6F7D94;
    color: #FFF;
    /* ~~The footer ~~ */
    .footer {
    padding: 10px 0;
    background: #FFF;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~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;
    Copyright {
    font-size: 10%;
    .Copyright {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000;
    text-decoration: none;
    background-color: #FFF;
    -->
    </style><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div class="container">
      <div class="header">
        <div align="center"><a href="../Home.html"><img src="../TrueSouth - Banner.jpg" alt="Banner" width="800" height="100" align="middle" /><a href="#"></a><!-- end .header --></div>
      </div>
      <div class="sidebar1">
        <p> </p>
        <div align="justify">
          <ul id="Menu1" class="MenuBarHorizontal">
            <li><a href="../Home.html">Home</a> </li>
            <li><a href="../Services.html">Services</a></li>
            <li><a href="../Staff.html">Staff</a> </li>
            <li><a href="../Experience &amp; Safety.html">Experience &amp; Safety</a></li>
            <li><a href="../Projects.html">Projects</a></li>
            <li><a href="../Links &amp; News.html">Links &amp; News</a></li>
            <li><a href="../Contact Us.html">Contact Us</a></li>
          </ul>
        </div>
      <!-- end .sidebar1 --></div>
      <div class="content">
        <h1 align="center"><!-- TemplateBeginEditable name="pagetitle" -->Welcome to TrueSouth Survey Services Ltd<!-- TemplateEndEditable --></h1>
        <h2><!-- TemplateBeginEditable name="pageheading1" -->About the Company<!-- TemplateEndEditable --></h2>
        <!-- TemplateBeginEditable name="pagebody1" -->
        <p>Quisque faucibus augue ut sapien facilisis consequat. In interdum consectetur feugiat. Mauris tincidunt augue ac augue rhoncus lacinia vitae at nisi. Nunc dui urna, vestibulum vitae laoreet eu, fermentum id dolor. Etiam dignissim orci a erat tincidunt dictum et ut lorem.</p>
        <p>Quisque faucibus augue ut sapien facilisis consequat. In interdum consectetur feugiat. Mauris tincidunt augue ac augue rhoncus lacinia vitae at nisi. Nunc dui urna, vestibulum vitae laoreet eu, fermentum id dolor. Etiam dignissim orci a erat tincidunt dictum et ut lorem.</p>
        <!-- TemplateEndEditable -->
        <h2><!-- TemplateBeginEditable name="pageheading2" -->Our Product<!-- TemplateEndEditable --></h2>
        <!-- TemplateBeginEditable name="pagebody2" -->
        <p>Quisque faucibus augue ut sapien facilisis consequat. In interdum consectetur feugiat. Mauris tincidunt augue ac augue rhoncus lacinia vitae at nisi. Nunc dui urna, vestibulum vitae laoreet eu, fermentum id dolor. Etiam dignissim orci a erat tincidunt dictum et ut lorem. </p>
        <!-- TemplateEndEditable -->
        <h3><!-- TemplateBeginEditable name="pageimage2" --><img src="../ManSurveying.gif" width="205" height="214" alt="mansurveying" /><!-- TemplateEndEditable --></h3>
      <!-- end .content --></div>
      <div class="sidebar2">
        <h4><!-- TemplateBeginEditable name="pageimage1" --><img src="../Construction-Surveying.jpg" alt="surveyman" width="179" height="198" align="absmiddle" /><!-- TemplateEndEditable --></h4>
        <p align="left"><!-- end .sidebar2 --></p>
      </div>
      <div class="footer">
        <div align="right">
          <p>Thank you for visiting TrueSouth Survey Services Ltd<br />
            <span class="Copyright">Copyright © TrueSouth Survey Services Ltd 2011<br />
            Website design by TrueSouth Survey Services Ltd</span></p>
        </div>
      </div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("Menu1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    and here is the code for problem page;
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>TrueSouth Template2</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    margin: 0;
    padding: 0;
    color: #000;
    /* ~~ 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; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    text-align: center;
    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:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    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. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 100%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ 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: #FFF;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs 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.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    background: #FFF;
    padding-bottom: 10px;
    .content {
    padding: 10px 0;
    width: 60%;
    float: left;
    .sidebar2 {
    float: left;
    width: 20%;
    background: #FFF;
    padding: 10px 0;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    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 */
    padding: 5px 5px 5px 15px;
    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. */
    text-decoration: none;
    background: #;
    color: #000;
    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: #6F7D94;
    color: #FFF;
    /* ~~The footer ~~ */
    .footer {
    padding: 10px 0;
    background: #FFF;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~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;
    Copyright {
    font-size: 10%;
    .Copyright {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000;
    text-decoration: none;
    background-color: #FFF;
    -->
    </style><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div class="container">
      <div class="header">
        <div align="center"><a href="../Home.html"><img src="../TrueSouth - Banner.jpg" alt="Banner" width="800" height="100" align="middle" /><a href="#"></a><!-- end .header --></div>
      </div>
      <div class="sidebar1">
        <p align="justify"> </p>
        <div align="justify">
          <ul id="Menu1" class="MenuBarHorizontal">
            <li><a href="../Home.html">Home</a> </li>
            <li><a href="../Services.html">Services</a></li>
            <li><a href="../Staff.html">Staff</a> </li>
            <li><a href="../Experience &amp; Safety.html">Experience &amp; Safety</a></li>
            <li><a href="../Projects.html">Projects</a></li>
            <li><a href="../Links &amp; News.html">Links &amp; News</a></li>
            <li><a href="../Contact Us.html">Contact Us</a></li>
          </ul>
          <!-- end .sidebar1 --> </div>
      </div>
      <div class="content">
        <h2 align="center"><!-- TemplateBeginEditable name="pageheading1" -->About the Company<!-- TemplateEndEditable --></h2>
        <!-- TemplateBeginEditable name="pagebody1" -->
        <p>Quisque faucibus augue ut sapien facilisis consequat. In interdum consectetur feugiat. Mauris tincidunt augue ac augue rhoncus lacinia vitae at nisi. Nunc dui urna, vestibulum vitae laoreet eu, fermentum id dolor. Etiam dignissim orci a erat tincidunt dictum et ut lorem.</p>
        <p>v</p>
        <!-- TemplateEndEditable -->
        <h2><!-- TemplateBeginEditable name="pageheading2" -->Our Product<!-- TemplateEndEditable --></h2>
        <!-- TemplateBeginEditable name="pagebody2" -->
        <p>Quisque faucibus augue ut sapien facilisis consequat. In interdum consectetur feugiat. Mauris tincidunt augue ac augue rhoncus lacinia vitae at nisi. Nunc dui urna, vestibulum vitae laoreet eu, fermentum id dolor. Etiam dignissim orci a erat tincidunt dictum et ut lorem. </p>
        <!-- TemplateEndEditable -->
        <h3><!-- TemplateBeginEditable name="pageimage2" --><img src="../ManSurveying.gif" width="205" height="214" alt="mansurveying" /><!-- TemplateEndEditable --></h3>
      <!-- end .content --></div>
      <div class="sidebar2">
        <h4><!-- TemplateBeginEditable name="pageimage1" --><img src="../Construction-Surveying.jpg" alt="surveyman" width="179" height="198" align="absmiddle" /><!-- TemplateEndEditable --></h4>
        <p align="left"><!-- end .sidebar2 --></p>
      </div>
      <div class="footer">
        <div align="right">
          <p>Thank you for visiting TrueSouth Survey Services Ltd<br />
            <span class="Copyright">Copyright © TrueSouth Survey Services Ltd 2011<br />
            Website design by TrueSouth Survey Services Ltd</span></p>
        </div>
      </div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("Menu1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • How do I fix my unbalanced body error?

    Hi, I am new to dreamweaver cs6 and I DESPERATELY need help! Every I go to save a template or create a new page from the template, I get an error message saying.... There is an error at line 149 "***": unbalanced body tag.
    I've been through several forum posts and have reviewed my code multiple times but I cant seem to make it work. HELP!
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              margin: 0;
              padding: 0;
              color: #000;
              background-attachment: fixed;
              background-repeat: no-repeat;
              background-position: center top;
              background-image: url(WoodGrain2.jpg);
    /* ~~ 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; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              color: #FFF;
    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:#414958;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #4E5869;
              text-decoration: underline;
    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. */
              text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
              width: 1000px;
              max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
              min-width: 780px;
              margin: 0 auto;
    /* ~~ 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 {
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs 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.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
              float: left;
              width: 20%;
              background-color: #990000;
              padding-bottom: 200px;
              text-align: center;
    .content {
              padding: 0;
              width: 80%;
              float: left;
              font-family: Arial, Helvetica, sans-serif;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    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 */
              padding: 5px 5px 5px 15px;
              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. */
              text-decoration: none;
              background-color: #8090AB;
              color: #000;
    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-color: #6F7D94;
              color: #FFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background-color: #996633;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ 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>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header --><img src="WebsiteHeader.jpg" width="1000" height="250" alt="a'Tavola market and cafe" /></div>
      <div class="sidebar1">
        <h1> </h1>
        <h1> </h1>
        <h1>Hours</h1>
        <p>Mon-Thu<br />
          11 am - 10 pm</p>
        <p>Fri-Sat<br />
          11 am - 11 pm</p>
        <p>Sun<br />
          11:30 am - 9 pm</p>
        <p> </p>
        <p> </p>
        <h1>Connect With Us!</h1>
        <h1><a href="http://www.facebook.com/pages/aTavola-Market-Cafe/142683937624?fref=ts"><img src="images/facebook-icon.png" alt="facebook" width="100" height="100" /></a></h1>
        <p class="sidebar1"> </p>
      </div>
    <div class="content">
      <ul id="Nav" class="MenuBarHorizontal">
        <li><a href="Home.html">Home</a></li>
        <li><a href="LunchMenu.html">Lunch Menu</a></li>
        <li><a href="MainMenu.html">Main Menu</a></li>
        <li><a href="Beverages.html">Beverages</a></li>
      </ul>
      <!-- TemplateBeginEditable name="Content" -->
      <h1> </h1>
      <div align="center"></div>
      <h1> </h1>
      <h1>Welcome</h1>
      <p>Welcome to Greenville&rsquo;s Marketplace of diverse menu selections, casual lunches, and family meals ready to go. We specialize in the creative use of fresh ingredients, seasonal menu selections, and fun culinary creations from the kitchen!</p>
      <p>Please explore this site and we hope you will discover our fusion of casual dining and the freshness and variety of your neighborhood market.</p>
      <p> </p>
      <h1>Weekly Specials</h1>
      <h2>Crispy Asian Duck Wings</h2>
      <p>Tender tasty duck wing drummettes fried till crispy and tossed with an Asian sesame sauce.  $8.95</p>
      <h2>Smoked Gouda Chicken Quesadilla</h2>
      <p>Roasted chicken, sweet caramelized onions and smoked Gouda cheese baked in a flour tortilla. Served with a side of warm marinara for dipping.  $7.95</p>
      <h2>Tuscan Chicken Sandwich</h2>
      <p>Sliced chicken breast, fresh mozzarella, roasted red peppers, spinach, and sun dried tomato-artichoke aioli. Served on grilled ciabatta bread with two sides. $8.50</p>
      <h2>Blackened Shrimp Salad</h2>
      <p>Two skewers of blackened shrimp atop our fresh garden salad with mixed greens, roma tomatoes, cucumbers, red onions and mozzarella cheese. Served with your choice of dressing  $8.95</p>
      <!-- TemplateEndEditable --><!-- end .content --></div>
    <div class="footer">
      <p>a'Tavola! Market and Cafe. 620 Red Banks Rd Greenville, NC 27858. (252) 321-5533</p>
      <!-- end .footer --></div>
      <!-- end .container --></div>

    Is that all your HTML code contains?
    Where are the closing </body> and </html> tags in the end?
    Try adding this to the last lines of the file:
    </body>
    </html>
    -ST

  • Layout changed when I added spacing around images.

    @charset "utf-8";
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #363;
    margin: 0;
    padding: 0;
    color: #000;
    /* ~~ 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; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    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:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #F00;
    text-decoration: underline;
    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. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ 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: #363;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs 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.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    background: #CF0;
    padding-bottom: 10px;
    .content {
    padding: 15px 15px 15px 15px;
    width: 80%;
    float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    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 */
    padding: 5px 5px 5px 15px;
    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. */
    text-decoration: none;
    background: #390;
    color: #000;
    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: #6F7D94;
    color: #FFF;
    /* ~~ The footer ~~ */
    .footer {
    padding: 10px 0;
    background: #CF6;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ 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;
    <!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>Yellowstone Biologist</title>
    <link href="NationalParks.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script type="text/javascript">
    </script>
    </head>
    <body onload="MM_preloadImages('habitat def.PNG')">
    <div class="container">
      <div class="header"><a href= /><img src="animals.gif" width="878" height="193" alt="bison" /></a>
        <!-- end .header --></div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="NationalParks.html"><strong>Home</strong></a></li>
          <li><a href="Park Ranger.html"><strong>Park Ranger</strong></a></li>
          <li><a href="Biologist.html"><strong>Biologist</strong></a></li>
          <li><a href="Geologist.html"><strong>Geologist</strong></a></li>
          <li><a href="Historian.html"><strong>Historian</strong></a></li>
          <li><a href="Games.html"><strong>Games</strong></a></li>
        </ul>
        <p><strong>Definitions (italicized words):</strong> </p>
        <p><em>Habitat</em>:   the natural conditions and environment  in which a plant or animal lives</p>
        <p><br />
          <em>Extermination</em>:  completely destroy or kill</p>
        <p><em>USFWS</em>: United States Fish and Wildlife Service</p>
    <!-- end .sidebar1 --></div>
      <div class="content">
        <h1>Yellowstone Biologist    </h1>
        <h2>Mammals</h2>
       <p> Yellowstone is home to the largest concentration of mammals in the lower 48 states. Sixty-seven different mammals live here, including grizzly bears, black bears, gray wolves, wolverine, lynx, elk, bison, moose, and numerous small mammals.</p>
        <p>Visitors must view all wildlife safely. You must stay at least 100 yards away from bears and wolves and at least 25 yards  away from all other animals—including bison, elk, bighorn sheep, deer, moose, and coyotes.</p>
        <h4>Bears</h4><img src="grizzly.gif" alt="grizzly bear family" width="150" height="115" hspace="15" vspace="15" align="left" />
        <p>Bears may be seen in Yellowstone March through November of each year. Yellowstone is one of the only areas south of Canada that still has large grizzly bears. Grizzly bears are usually seen in the open areas. </p>
        <p> </p>
        <h4>Wolves</h4><img src="wolves.gif" alt="wolves" width="150" height="115" hspace="15" vspace="15" align="left" />
        <p>
    Loss of <em>habitat</em> and <em>extermination</em> programs led to the elimination of wolves throughout most of the United States by early in the 20th century. In 1973, the U.S. Fish and Wildlife Service listed the northern Rocky Mountain wolf  as an endangered species and designated Greater Yellowstone as one of three recovery areas. From 1995 to 1997, 41 wild wolves from Canada and northwest Montana were released in Yellowstone National Park. As expected, wolves from the growing population dispersed to establish territories outside the park. More than 1,600 wolves now reside in Idaho, Montana, and Wyoming. In August 2010, a U.S. district judge ruled against a <em>USFWS</em> 2009 decision to remove the wolf from the endangered species list, so wolves are protected as an endangered species in all three states again.<br />
        </p>
    <h4>Bighorn Sheep<img src="BigHornSheep.gif" alt="bighorn sheep" width="150" height="115" hspace="15" vspace="15" align="left" /></h4>
        <p> Bighorn sheep once numbered in the millions in western United States and were an important food source for humans. They are named for the large, curved horns on the males, or rams. Females, or ewes, also have horns, but they are short with only a slight curve. In the winter of 1981-82, an outbreak of pinkeye occurred among bighorns in the Mt. Everts area. Many sheep were blinded and/or killed on the adjacent park road or by falling from cliffs. Some are now found comfortable around summer road traffic.</p>
        <h4>Bison<img src="bison.gif" alt="bison" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
        Bison are the largest mammals in Yellowstone National Park. They are strictly vegetarian, and they graze on grasslands in the meadows, the foothills, and even the high-elevation areas of Yellowstone. Despite their slow walk, bison are surprisingly fast for animals that weigh more than half a ton.</p>
    <p>Yellowstone is the only place in the lower 48 states where a population of wild bison has survived since prehistoric times, although fewer than 50 native bison remained here in 1902. Fearing extinction, the park imported 21 bison from two privately-owned herds.</p>
        <h4>Bobcats<img src="yellowstone-bobcat.gif" alt="bobcat" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
        Bobcats  are small wild cats with reddish-brown or yellowish-brown coats, streaked with black or dark brown. They have prominent, pointed ears with a tuft of black hair at the tip. </p>
    <p>Unlike lynx, which they resemble, bobcats elsewhere have been highly adaptable to human-caused changes in environmental conditions; some biologists believe that there are more bobcats in the United States today than in colonial times. Yellowstone has many rock outcrops, canyons bordered by rock ledges, conifer forests, and semi-open areas that seem to offer conditions favorable for bobcats--adequate shelter, a variety of rodents, rabbits, hares, birds, and other small animals as well as seasonal carrion, for food.</p>
    <p>Bobcats are known to hole-up and wait out severe winter storms elsewhere. These elusive cats are most active at night, so even those who study them seldom have an opportunity to see one.</p>
        <h4>Coyotes</h4>
        <p>
          Yellowstone's coyotes  are among the largest coyotes in the United States. Adults are about 30 pounds, are less than two feet tall and vary in color from gray to tan with sometimes a reddish tint to its coat.</p>
        <p>Small mammals are an important component of coyotes' diets. In Yellowstone, such prey include microtines or voles, mice , pocket gophers, small birds, and in spring and summer, ground squirrels. They also feed on larger mammal's (elk, deer, bison, moose, pronghorn, and bighorn sheep) calves and fawns shortly after birth and young animals.</p>
        <h4>Elk<img src="elk.gif" alt="elk" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
          Elk  are the most abundant large mammal found in Yellowstone and historical evidence confirms their continuous presence for at least 1,000 years. More than 30,000 elk from 7-8 different herds summer in Yellowstone and approximately 15,000 to 22,000 winter in the park. </p>
    <p>Bulls grow antlers annually from the time they are nearly one year old. When mature, a bull's &quot;rack&quot; may have 6 to 8 points, or tines, on each side and weigh more than 30 pounds.</p>
        <h4>Lynx</h4>
    <p>Adult lynx are about the size of a large domestic cat. Males can weigh up to 30 pounds, while females are smaller. The similarity between lynx and bobcats makes it difficult to determine their status in Yellowstone. A large adult bobcat may be larger than a small adult lynx, so size is not a good characteristic for positive identification.</p>
        <h4>Moose<img src="moose.gif" alt="moose" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
        Moose, the largest member of the deer family, were reportedly very rare in northwest Wyoming when Yellowstone National Park was established in 1872. Moose breed from early September to November and one to three calves are born in May or June. Calves weigh 25 to 35 pounds at birth but grow rapidly; adult females (cows) weigh up to 800 pounds and males (bulls) up to 1300 pounds. </p>
    <h4>Mountain Lion</h4><p>
        The mountain lion, also called the cougar, is the largest member of the cat family living in Yellowstone. Mountain lions can weigh up to 200 pounds, although lions in Yellowstone are thought to range between 140 and 160 pounds for males and around 100 pounds for females.</p>
    <p>Mountain lions are rather secretive, so most visitors are unaware of their existence in Yellowstone. Lions probably live throughout the park in summer. </p>
        <h4>      Amphibians</h4>
        <p>
        Cool, dry conditions limit Yellowstone's amphibians to four species: boreal toad; chorus frog; spotted frog; and the tiger salamander. Population numbers for these  are not known.</p>
        <!-- end .content --></div>
      <div class="footer">
        <p>Sources: <a href="http://www.nps.gov/yell/naturescience/mammals.htm">http://www.nps.gov/yell/naturescience/m ammals.htm</a></p>
        <p><a href="http://www.nps.gov/yell/naturescience/amphibians.htm">http://www.nps.gov/yell/naturescienc e/amphibians.htm</a></p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>
    This has happened before, where everything in my content area has dropped down below the sidebar.It's happended on several pages. I don't know why or how to fix it. It's for a class, so where I've posted it is private, but here's the page and css code.
    HTML

    Murray is right. Padding (and margins) is added to the width. However, when using percentages, you should never use figures that add up to exactly 100%.
    Browsers need to convert the percentages to pixels. Because pixels must be whole numbers, some percentages are rounded up, which results in the final element dropping down below its neighbours. With percentages, it's much safer to use values that add up to 98% (99% often works, but 98% is safer).

  • Lightbox and datepicker don't work togethor

    Hi, I have,or had, datepicker working on my website.  Once I added lightbox2 to my site my datepicker stopped working. If I comment out the links to lightbox2 then my date picker workes.  Thanks in advance for any help.
    Here is some 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>
    <!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <!--set variable and echo value in the title tags-->
    <title class= "header2">Keynote Speakers, Sports Celebrities and Emcee's | EMJ Marketing <?php $title="The Right Keynote Speakers, Emcee's  and Sports Celebrities   for your event" ?> </title>
    <!--<title class="header2">"Welcome"</title>-->
    <!-- TemplateEndEditable -->
    <link href="../NewEMJ.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    <script src="../jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
    <link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    <!-- DatePicker -->
    <link href="../jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
    <link href="../jquery-ui-1.7.2/css/base/ui.datepicker.css" rel="stylesheet" type="text/css" />
    <link href="../jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
    <link href="../jquery-ui-1.7.2/css/base/ui.datepicker.images.css" rel="stylesheet" type="text/css" />
    <!--lightbox2 -->
    <script type="text/javascript" src="../lightbox2/prototype.js"></script>
    <script type="text/javascript" src="../lightbox2/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="../lightbox2/lightbox.js"></script>
    <link rel="stylesheet" href="../lightbox2/lightbox.css" type="text/css" media="screen" />
    <style type="text/css">
    table {
    width: 896px;
    color: #D6BD38;
    background-repeat: no-repeat;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    body {
    background-color: #000;
    a:visited {
    color: #D6BD38;
    a:link {
    color: #D6BD38;
    </style>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-24112472-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>
    <style type="text/css">
    /* BeginOAWidget_Instance_2137022: #datepicker */
      #datepicker .ui-widget {
       font-family: inherit;
      #datepicker .ui-datepicker {
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      #datepicker .ui-datepicker-title {
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
       font-size: .8em;
       color: #000000;
       font-weight: normal;
       line-height: 1.8em;
      #datepicker .ui-state-default, .ui-widget-content .ui-state-default {
    border-color: #d6bd38;
    background-color: #d6bd38;
    color: #F7DA3D;
      #datepicker .ui-state-default, .ui-state-default a {
    color: #F7DA3D;
      #datepicker .ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border-color:transparent;
    background-color:transparent;
    color:#F7DA3D;
      #datepicker .ui-state-active, .ui-widget-content .ui-state-active {
    border-color: #cccccc;
    background-color: #cccccc;
    color: #F7DA3D;
      #datepicker .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus 
    border-color: #666666;
    background-color: #666666;
    color: #000;
      #datepicker .ui-widget-header 
       border-color: #d6bd38;
       background-color: #000000;
       border-width: 1px;
      /* Text attributes for the Days of Week Text */
      #datepicker .ui-datepicker table th
       font-size: .8em;
       color: #d6bd38;
       font-weight: bold;
    /* EndOAWidget_Instance_2137022 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2137022" binding="#datepicker" />
    </oa:widgets>
    -->
    </script>
    </head>
    =================================
    Thanks winrol

    Check this link should work for you
    http://api.jquery.com/jQuery.noConflict/

  • Problem with display of DW html template

    Hello,
    I need some help on a problem I cannot see...
    I re-did a client's site with one of the templates that DW
    came with.
    On my PCs and on all PCs I have access to, in all Browsers
    and OS that
    es I have access to, Firefox, Seamonkey, IE, Windows Vista,
    XP
    everything looks perfect.
    But on my client's computer, the menu is on the left and the
    content
    appears on the bottom of the page, vertically after the menu.
    I cannot
    see it, so I am in the dark with my adjustments.
    I used this template before for another client and he
    reported the same
    problem. It seems to happen when the content is wider than
    the defined
    width of the content, but this time, there is mostly simple
    text.
    Could my style sheet cause this? Please help me solve this,
    because I am
    blind, so to speak.
    The site in question is here:
    http://www.hohmann-partner.com/new_site/spezialgebiete.html
    Thanks a lot!
    Marion

    And, negative margins will almost always cause unexpected
    problems for you.
    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
    ==================
    "Malcolm _" <[email protected]> wrote in message
    news:[email protected]..
    > On Mon, 09 Jun 2008 19:55:51 +0200, marion
    > <[email protected]> wrote:
    >
    >>Hello,
    >>
    >>I need some help on a problem I cannot see...
    >>
    >>I re-did a client's site with one of the templates
    that DW came with.
    >>
    >>On my PCs and on all PCs I have access to, in all
    Browsers and OS that
    >>es I have access to, Firefox, Seamonkey, IE, Windows
    Vista, XP
    >>everything looks perfect.
    >>
    >>But on my client's computer, the menu is on the left
    and the content
    >>appears on the bottom of the page, vertically after
    the menu. I cannot
    >>see it, so I am in the dark with my adjustments.
    >>
    >>I used this template before for another client and he
    reported the same
    >>problem. It seems to happen when the content is wider
    than the defined
    >>width of the content, but this time, there is mostly
    simple text.
    >>
    >>Could my style sheet cause this? Please help me solve
    this, because I am
    >>blind, so to speak.
    >>
    >>The site in question is here:
    >>
    http://www.hohmann-partner.com/new_site/spezialgebiete.html
    >>
    >>Thanks a lot!
    >>Marion
    >>
    >
    > this part of your css file may be the issue - you've
    added extra width
    > to this element by adding the additional 30px - which
    means the box
    > can't float into the space to the right of the menu.
    >
    >
    > .img {
    > margin-top: -5px;
    > margin-right: 15px;
    > margin-left: 15px;
    > float: right;
    > }
    >
    >
    > remember the box model is interpreted differently in
    IE5.5 & IE6
    >
    > --
    >
    > ~Malcolm~*...
    > ~*

  • Spry Menu Bar disappears absolute position

    Hello all this is my first time posting on this site so bear with me. I have a semi-transperant spry menu bar that i inserted into the header div, over an image. I moved the menu bar -38px, when the position is set to relative the menu bar is visible, however the old position of the menu bar has a blank white space there. I think this is due to the relative position property. When i change it to absolute the whole menu bar disappears? http://www.brightlikethesun.com/index2.html (the position is back to relative to show the menu bar and also background for header is blue to show the space) 
    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
    width: 100%;
    margin: auto;
    position: relative;
    top: -38px;
    font-family: "Lucida Console", Monaco, monospace;
    opacity: 0.7;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    margin-right: auto;
    margin-left: 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: 20%;
    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-family:Arial, Helvetica, sans-serif;
    font-size: 70%;
    z-index: 1020;
    cursor: default;
    width: 50em;
    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: 50em;
    /* 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
    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: #EEE;
    padding: 0.5em 0.75em;
    color: #C0C0C0;
    text-decoration: none;
    background: rgba(98, 135, 167, .4)
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%,#000000 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%,#000000 50%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%,#000000 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    /* 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: #33C;
    color: #FFF;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    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;
    html 
    <!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>Bright Like The Sun -- San Antonio, TX</title>
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(background.jpg);
    /* ~~ 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: 5px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-family: Tahoma, Geneva, sans-serif;
    color: #000;
    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:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    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. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background-color: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ 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:#06C
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs 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.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    padding-bottom: 0px;
    background: #f1da36; /* Old browsers */
    background: -moz-linear-gradient(left, #f1da36 0%, #fefcea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1da36), color-stop(100%,#fefcea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* IE10+ */
    background: linear-gradient(to right, #f1da36 0%,#fefcea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=1 ); /* IE6-9 */
    .content {
    padding: 0px 0;
    width: 80%;
    float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The footer ~~ */
    .footer {
    padding: 10px 0;
    background-color: #000000;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    font-family: "Comic Sans MS", cursive;
    /* ~~ 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;
    #menurules {
    margin: 0px;
    padding: 0px;
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="BLTS1.jpg" alt="BLTS" name="BLTS" width="100%" height="100%" id="BLTS" style="display: block;" /></a>
       <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#"><center>Home</center></a></li>
         <li><a href="#"><center>Shows</center></a>
    <ul>
             <li><a href="#"><u>Upcoming shows</u><br />
    <br />
    May 4th 2013 @<img src="502.jpg" width="5%" height="5%"><br />
    Bright Like The Sun along with Little Science<br />
    8pm 21+
    </a></li>
                   </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#"><center>Merch</center></a>
           <ul>
             <li><a class="MenuBarItemSubmenu" href="#"><u>Album</u><br /><img src="coda fin cover.jpg" width="15%" height="15%"><font size="4">Coda Fin</font><br />
    Purchase Here or Itunes</a>
                        </li>
             <li><a href="#">Shirts--Coming Soon!</a></li>
             <li><a href="#">Various--Coming Soon!</a></li>
           </ul>
         </li>
         <li><a href="#"><center>Bio</center></a></li>
    <li><a href="#"><center>Contact</center></a></li>
    </ul><!-- end .header --></div>
    <div class="sidebar1">
      <p></p>
        <br />
        <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> </p>
        <p> </p>
        <p> </p>
      </div> 
      <div class="content"><p align="right"><a href="https://www.facebook.com/brightlikethesun"><img src="FB.jpg" width="30" height="31" alt="Facebook" /></a><img src="twitter-icon.png" width="30" height="31" /></p>
        <p align="left"><img src="weare.jpg" width="185" height="72" /></p><p align="right"><iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=adznldvg&t=1366488970" width="340" height="54" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe></p>
        <p><img src="BLTS2.jpg" alt="BLTS" width="411" height="297" align="left" /><img src="BLTS font.jpg" width="340" /> is a Post-Rock band from San Antonio. They were born in early 2012 from the collective desire to make beautiful, thought provoking, and at times, chaotic music. Much like fellow Texan bands like Explosions in the Sky and This Will Destroy You, they are entirely instrumental, and known for creating progressively intricate waves of ambiance that grow with intensity and an unabashed wash of emotion. Attuned to their affinity for dynamics, seeing them live takes the listener from deafening walls of orchestrated sound, to melodies so subtle that one finds themselves acutely aware of their own breathing. <br />
          Bright Like The Sun&rsquo;s debut album, Coda Fin, was engineered/mixed by Alex Bhore (of This Will Destroy You), and mastered by TW Walsh (of Pedro The Lion). The record, which was self released, was made available on April 12, 2013.<br /><br /><img src="BLTS3.jpg" width="330" height="245" align="right" /></p>
    <br />
    <br />
        <h4>Bright Like The Sun Consists of:</h4>
        <p>Rob Mochen - Guitar <br />
        Chris Etheredge - Guitar/Keys <br />
        Christian Miranda - Bass <br />
        Steven Barrera - Drums    </p>
        <p><br />
        </p>
        <h4><u>Coda Fin</u> Release Date April 12th 2013    </h4>
        <h4><img src="coda fin cover.jpg" width="250" height="238" align="left" /><img src="venues.jpg" width="171" height="65" align="right" /><br />
        <br />
        <br />
        <br />
           <a href="http://502bar.com/"><img src="502.jpg" width="150" height="112" align="right" /></a><a href="http://www.gypsyloungeaustin.com"><img src="gypsylounge.jpg" / width="150" height="112" align="right"></a></h4>
        <p align="right"> </p>
      </div>
      <div class="footer">
        <p><font face="verdana" font size="2" font color="#FFFFFF">&#169;2013 Bright Like The Sun All Rights Reserved</font></p>
        <!-- end .footer --></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>
    </html>

    What I see:
    You need a width on the ul.MenuBarVertical style. Make it the same width as the ul.MenuBarVertical li selector.
    Remove the float: none; from this style:
    ul.MenuBarVertical ul li
         width: 12em;
         float: none;
    No such measurement as a half a pixel:
    ul.MenuBarVertical ul
         border: .5px solid #CCC;
    If you want a border, 1px is minimum...you repeat this incorrect half-pixel in several places.
    Running your page through the W3C Validator returned this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthydirections.ca%2F&charset=%28dete ct+automatically%29&doctype=Inline&group=0
    Your initial errors are not declaring a DOCTYPE, which among other things, does not provide the browser with any information regarding how you want the code interpreted for your viewer. Some browsers guess well, some do not (IE).
    This
         <html>
    is insufficient.
    Apply this in its place, and run through the validator again.
    <!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">
    Beth

  • Why is my header & footer cut off by Dreamweaver?

    Greetings. I would highly appreciate any help in resolving this issue.
    I created a website using dreamweaver. Upon publishing it, I noticed that the header, footer, and sidebar have been cut off. I have an image in the header and footer, and only 1/4 of the image is showing on the website.
    Furthermore, the second part of the sidebar, starting with the black area is supposed to extend all the way down to the bottom of the page (right on top of the footer), yet only about 1/4 of that is showing as well.
    please  let me know what I can do to resolve this issue.
    http://www.ziyah.com/
    Thank you in advance.
    if it helps, the following is my 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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Ziyah.com</title>
    <!-- TemplateEndEditable -->
    <link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    .ziyahED {
        display: block;
        width: 150px;
        margin-right: auto;
        margin-left: auto;
    h1 {
        font-size: 50%;
    h2 {
        font-size: 50%;
    h3 {
        font-size: 50%;
    h4 {
        font-size: 50%;
    h5 {
        font-size: 50%;
    h6 {
        font-size: 50%;
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header">
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p><!-- end .header --></p>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="../index.html">Home</a></li>
          <li><a href="../classiccollection.html">Classic Collection</a></li>
          <li><a href="../peaceblossom.html">Peace Blossom</a></li>
          <li><a href="../colorsoflove.html">Colors of Love</a></li>
          <li><a href="../fruitgarden.html">Fruit Garden</a></li>
          <li><a href="../policies.html">Policies </a></li>
          <li></li>
        </ul>
        <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> </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>
      <!-- end .sidebar1 --></div>
      <div class="content"><!-- TemplateBeginEditable name="Page Content" -->
        <h1 align="center">Welcome To Ziyah Jewelry Boutique</h1>
        <p align="center">  </p>
        <p align="center">A decadent collection of jewelry that will make you feel elegant awaits you.<br />
          <br />
          Classic colors and modern styles are brought together to create jewelry that is romantic, sexy, and<br />
          stunning.  <br />
      <br />
          Treat yourself to a gorgeous piece to wear for a party, special evening, or accent a sophisticated <br />
          look. Jewelry by Ziyah is destined to heighten the loveliness of any outfit for those moments you <br />
          want to look extra special. </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><img src="../images/Ziyah_GiftBox2.jpg" width="290" height="376" alt="ziyah giftbox" /></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center">Free Shipping on all orders in the U.S.A.</p>
        <p align="center"> </p>
      <!-- TemplateEndEditable --><!-- end .content --><img src="../images/ZIYAH_ED.gif" alt="ziyahed" width="150" height="25" class="ziyahED" /></div>
      <div class="footer">
        <p> </p>
        <p> </p>
        <p> </p>
        <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html>

    In the header, you have your image as a background image.  A BG image does not change the height of the container, so the only thing that is giving your height is your use of
    <p></p>
    which is not the correct way to go.
    Set a new rule in your .header for a min-height of however large your background image is, that is will solve the header/image issue.
    In the side nav, change the background color to your menu color, see if that solves your problem, if not a better option would be to use a faux column, you can read about them here.
    http://www.paulgdesigns.com/faux-columns.php
    Your footer you have the image set to 25 px in height, and that appears to be what you are getting.
    Gary

  • How to Narrow the Design of an Entire Page

    Hi,
         I have been working on this problem for a while and still do not have an answer. I use Dreamweaver CS5.5. I am new at writing html code.
    My question is: How do I set the width to a more narrowed setting of my entire design that is currently centered on my page. This would allow more of the background (sky) to show on the left and right sides of my page. Is it even possible at this late date after completeing the website.
    You can see how my webpage looks now at -
    www.lanisakai.com
    Can I change some code to acheive this effect either in the index.html page or the "twoColLiqLtHdr.css" page or both?
    Here is the code for both pages.
    The Index.html Page
    <!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>Lani Sakai Pastel Pet Portraits</title>
    <link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <style type="text/css">
    .container .content p .introduction strong {
              color: #000;
    .container .content .introduction {
              color: #000;
    body {
              background-image: url(Logo/sky1.jpg);
              background-position: center center;
              background-attachment: fixed;
    </style>
    </head>
    <body bgcolor="#FFFFCC">
    <div class="container">
      <div class="header"><!-- end .header -->
        <div align="center"><a href="http://www.lanisakai.com/"><img src="Logo/Logo3.jpg" width="805" height="172" border="0" /></a></div>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="http://www.lanisakai.com/">Home</a></li>
          <li><a href="http://www.lanisakai.com/previousworks.html">Previous Works</a></li>
          <li><a href="http://www.lanisakai.com/aboutme.html">About Me</a></li>
          <li><a href="http://www.lanisakai.com/feedback.html">Contact Me</a></li>
          <li><a href="sitemap.html">Site Map</a></li>
          <li><a href="http://www.lanisakaimobie.bugs3.com/">Smartphone Version</a></li>
          <li></li>
        </ul>
        <p><!-- end .sidebar1 --></p>
      </div>
      <div class="content">
        <h1> </h1>
        <h1><img src="Original Drawings/DSCN4352-2.jpg" width="260" height="216" hspace="20" vspace="25" /> <img src="Original Drawings/DSCN9152-2.jpg" width="210" height="266" hspace="40" /></h1>
        <h2 class="introduction"><strong><em>Reasons why you want to have your pet's portrait drawn....</em></strong></h2>
        <p> </p>
        <p><img src="Drawings/untitled2.jpg" width="275" height="214" hspace="125" /></p>
        <p> </p>
        <p align="center"> </p>
        <p> </p>
      </div>
      <div class="footer">
        <p align="center">Copyright &copy; 2013<script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-40745099-1', 'lanisakai.com');
      ga('send', 'pageview');
    </script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-41801281-1', 'lanisakai.com');
      ga('send', 'pageview');
    </script>
       Lani Sakai Pastel Pet Portraits</p>
      <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html>
    The twoColLiqLtHdr.css page
    @charset "utf-8";
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              margin: 50;
              padding: 0;
              color: #000;
              background-image: url(images/sky1.jpg);
              background-position: left bottom;
    /* ~~ 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: 20px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
              font-size: medium;
    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:#000000;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #000000;
              text-decoration: underline;
    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. */
              text-decoration: none;
              color: #000;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
              width: 100%;
              max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
              min-width: 780px; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
              font-size: 100%;
              background-color: #6FF;
              margin-top: 0;
              margin-right: auto;
              margin-bottom: 0;
              margin-left: auto;
    /* ~~ 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: #6F7D94;
              font-size: x-large;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs 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.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
              float: left;
              width: 20%;
              padding-bottom: 10px;
              background-color: #66FFFF;
              font-size: medium;
    .content {
              padding: 10px 0;
              width: 80%;
              float: left;
              font-size: 14px;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    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 */
              padding: 5px 5px 5px 15px;
              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. */
              text-decoration: none;
              background: #8090AB;
              color: #000;
    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 */
              color: #FFF;
              font-size: 100%;
              background-color: #66CCFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
              background-color: #66FFFF;
              font-size: small;
    /* ~~ 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;
    }.logo {
              height: 262px;
              width: 1088px;
              margin-right: auto;
    .logo {
              height: 417px;
              width: 761px;
              margin-right: auto;
              margin-left: auto;
    .introduction {
              font-size: x-large;
              font-style: normal;
              font-weight: lighter;
              color: #0033CC;
    .logo {
              width: 770px;
              margin-right: auto;
              margin-left: auto;
    .introduction {
              font-family: Verdana, Geneva, sans-serif;
    .nameofpage {
              font-size: 200%;
              font-weight: bold;
    .PictureTitle {
              font-size: medium;
    .formby {
              font-size: 25%;
    .formby {
              font-size: 12%;
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-41801281-1', 'lanisakai.com');
      ga('send', 'pageview');
    </script>
    Do I need to just start over from scratch?
    Any suggestions would be appreciated.
    Thank you,
    Mobie Boy

    Or you could include a width to your body style:
    body {
    background-image: url(Logo/sky1.jpg);
    background-position: center center;
    background-attachment: fixed;
    width: 75%;}
    It might work or not depending on your other color scheme.

Maybe you are looking for