Skip navigation
fluple
Currently Being Moderated

Css placement issue

Mar 17, 2013 4:27 PM

Tags: #dreamweaver #cs6

My CSS for my banner is a float right and clear right. The placement is correct in live view, but all over the place in preview, any ideas

 
Replies
  • Currently Being Moderated
    Mar 17, 2013 4:48 PM   in reply to fluple

    Let's see the code.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 4:48 AM   in reply to fluple

    You are positioning the element using absolute so that float/clear has no effects...

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 5:32 AM   in reply to kennethkawamoto2

    Further, you cannot float an absolutely positioned element!

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 12:58 PM   in reply to fluple

    Don't use positioning.  You don't need it except in very rare situations. Absolute positioning removes content from the normal document flow and creates all sorts of problems in different display widths.

     

    Learn to use CSS margins & floats to align elements on screen.

     

    Centering Pages, Images and other elements with CSS

    http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements _with_CSS-16640.html

     

    Floats & Margins:

    http://alt-web.com/DEMOS/3-CSS-boxes.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 2:35 PM   in reply to fluple

    Copy & Paste this code into a new, blank document.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Layout</title>
    
    <style>
    body {
    font: 62.50%/1.4 Verdana, Arial, Helvetica, sans-serif;
    width: 1000px; /**adjust width as req'd**/
    margin: 0 auto; /**with width, this is centered**/
    padding: 0;
    color: #000;
    background: #069;
    }
    
    header {
    margin: 0;
    padding: 0;
    min-height: 50px;
    background-color: #9CCDCD;
    overflow: hidden; /**float containment**/
    }
    
    section {
    margin: 0;
    padding: 0;
    background: #FFA8A8;
    overflow: hidden; /**float containment**/
    }
    
    /**COLUMNS**/
    aside {
    float: left;
    border: 1px dotted #990000;
    }
    
    header aside { width: 33.1% }
    
    section aside {
    margin: 0 1%;
    padding: 0 1%;
    background: #FFF;
    width: 29%;
    }
    
    /**clear floats after 3rd column**/
    aside-nth:child(3) {
    clear:left;
    }
    
    /**HORIZONTAL MENU**/
    nav {
    clear:left;
    background: #FFC; 
    overflow:hidden; /*contain floats*/}
    
    nav ul li {
    margin: 0;
    padding: 0;
    list-style: none
    }
    
    nav li {
    float: left;
    width: 8em;
    border: 1px dotted maroon;
    }
    
    nav li a {
    display: block;
    text-align: center;
    padding: 12px;
    }
    
    /**clear floats after**/
     nav:after {
    clear: left;
    content: ' ';
    display: block;
    line-height: 0;
    font-size: 0;
    }
    
    footer {
    clear: both;
    margin: 0;
    min-height: 25px;
    overflow: hidden; /**float containment**/
    }
    
    footer aside {
    width: 45.8%;
    padding: 1%;
    }
    
    /**RE-USABLE CLASSES**/
     .center { text-align: center }
     .right { text-align: right }
    
    /**TEXT STYLES**/
     h1, h2, h3, h4 { margin: 0; }
    
    h1 { color: #069; }
    
    h2 {
    color: #FFF;
    font-style: italic;
    }
    
    p { font-size: 1em }
    
    /**TEXT LINKS**/
     a:link, a:visited { color: red }
    
    a:hover, a:active, a:focus {
    background: red;
    color: white;
    }
    </style>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    <header>
    <aside> <p>Header &lt;aside&gt;</p> </aside>
    
    <aside> <p>Header &lt;aside&gt;</p> </aside>
    
    <aside class="right"> <p>Header &lt;aside .right&gt; </p>
    <h1>XYZ Company Name</h1>
    <h2>Some pithy slogan...</h2>
    </aside>
    
    <nav>
    <ul>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
    </ul>
    </nav>
    
    </header>
    
    <!--columns-->
    <section> <p>&lt;section&gt;</p>
    
    <aside><p>&lt;aside&gt;</p>
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus.</p>
    <ul>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    <li><a href="#">some link</a></li>
    </ul>
    <p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim.</p><p>&lt;/aside&gt;</p></aside>
    <aside><p>&lt;aside&gt;</p>
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p><p>&lt;/aside&gt;</p></aside>
    <aside><p>&lt;aside&gt;</p>
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim.</p><p>&lt;/aside&gt; </p> </aside>
    
    <footer>
    <aside>Footer &lt;aside&gt;</aside>
    <aside class="right">Footer &lt;aside .right&gt;</aside>
    </footer>
    </section>
    </body>
    </html>

     

    This is what it looks like in a browser/Live View:

    HTML5-3col.jpg

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points