help with float:left; attribute

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by dellerdynamics, Dec 12, 2008.

  1. dellerdynamics

    dellerdynamics New Member

    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    this is the html
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <title>DellerDynamics</title>
    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="accordion/accordion.css" charset="utf-8"/>
    <script type="text/javascript" src="accordion/accordion.js"></script>
    </head>
    
    <body>
    
    <div><img src="images/logo.png" width="316" height="77" alt="Logo" /></div>
    <!-- NAV -->
    <ul id="nav">
     <li><a href="http://dellerdynamics.com" title="Home">Home</a></li>
     <li><a href="/projects/" title="Projects">Projects</a></li>
     <li><a href="/software/" title="Software">Software</a></li>
     <li><a href="/photoshop/" title="Photoshop">Photoshop</a></li>
     <li><a href="/other/" title="Other">Other</a></li>
     <li><a href="/about/" title="About">About</a></li>
     <li><a href="/i7/" title="Item 7">Item 7</a></li>
    </ul>
     <ul id="subnav">
      <li id="subnavfirst"><a href="javascript: void;" title="Login">Login</a></li>
      <li><a href="javascript: void;" title="">Item 1</a></li>
      <li><a href="javascript: void;" title="">Item 2</a></li>
      <li><a href="javascript: void;" title="">Item 3</a></li>
     </ul>
    <!-- SUBNAV -->
    <div id="banner"><img src="images/banner.jpg" width="800" height="212" alt="Banner" /></div>
    
    
    <!-- CONTENT -->
    <img id="test" src="images/feature_2.gif" alt="" />
    <div id="content">
    
        <h2 class="primaryHeading">Primary <span>Content</span></h2>
    
        <h3 class="secondaryHeading">Placeholder Content 1</h3>
        <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
        <br />
        <h3 class="secondaryHeading">Placeholder Content 2</h3>
        <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
        <br />
        <h3 class="secondaryHeading">Placeholder Content 3</h3>
        <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
        <br />
        <h3 class="secondaryHeading">Placeholder Content 4</h3>
        <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
        <br />
    </div>
    
    
    <div id="foot">
     <p>Copyright &copy; 2008 DellerDynamics, sp &middot; All Rights Reserved<br />
     Made with valid <a href="">xhtml</a> &middot; <a href="">css3</a></p>
    </div>
    </body>
    
    </html>
    this is the css
    Code:
    /* BASE COLOR: #d99c6b
        DARKER: #e77c5b */
        
    /* SETUP */
    html {
        text-align: center;
        font: 10px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
        background-color: #fff;
        color: #4b4b4b;
    }
    
    body {
        margin: 0 auto;
        padding: 0;
        width: 800px;
        text-align: left;
    }
    
    a:link, a:visited {
        background-color: inherit;
        color: #ab6d00;
        text-decoration: none;
    }
    
    a:hover, a:active {
        background-color: inherit;
        color: #b9924d;
        text-decoration: none;
    }
    
    /* END SETUP */
    
    #test {
    float: left;
    }
    
    
    div#banner {
        margin: 0;
    }
    
    
    h2 span {
        background-color: inherit;
        color: #e77c5b;
    }
    
    h2.primaryHeading {
        font: 13px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
        text-transform: uppercase;
        background-color: inherit;
        color: #4b4b4b;
        margin: 20px 0 0 0;
        padding: 0 0 1px 25px;
        border-bottom: 1px solid #ddd;
        background: #fff url(images/starAllianceOrange.png) left no-repeat;
        color: inherit;
        clear: both;
    }
    
    h3.secondaryHeading {
        margin: 5px 0px 0px 0px;
        padding: 5px 0px 5px 20px;
        background: #f0f0f0 url(images/starAlliance.png) left no-repeat;
        font: 13px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
    }
    
    p {
        font-size: 11px;
        margin-bottom: 15px;
    }
    
    div#foot {
        clear: both;
        margin: 0;
        padding: 0;
        width: 800px;
        height: 43px;
        background-color: #ededed;
        color: #888;
        text-align: center;
    }
    
    div#foot p {
        padding: 9px 0 0 0;
    }
    
    div#foot p a {
        text-decoration: none;
    }
    
    div#foot p a:link, div#foot p a:visited {
        background-color: inherit;
        color: #4b4b4b;
    }
    
    div#foot p a:hover, div#foot p a:active {
        background-color: inherit;
        color: #000;
    }
    
    
    /* NAV */
    ul#nav {
        margin: 0;
        padding: 0 0 0 6px;
        width: 794px;
        height: 44px;
        background: #000 url(images/nav_bg.gif) repeat-x;
        color: inherit;
    }
    
    ul#nav li {
        float: left;
        margin: 0;
        padding: 15px 0 0 0;
        list-style-type: none;
        /*text-transform: uppercase;*/
        font-size: 11px;
        font-variant: small-caps;
    }
    
    ul#nav li a {
        text-decoration: none;
        padding: 13px 30px 14px 30px;
    }
    
    ul#nav li a:link, ul#nav li a:visited {
        background-color: inherit;
        color: #fff;
    }
    
    ul#nav li a:hover, ul#nav li a:active {
        background-color: inherit;
        color: #c9f381;
    }
    /* SUBNAV */
    ul#subnav {
        margin: 0;
        padding: 0 0 0 30px;
        width: 770px;
        height: 31px;
        background: #000 url(images/subnav_bg.gif) repeat-x;
        color: inherit;
        font-size: 9px;
    }
    
    ul#subnav li {
        float: left;
        margin: 0;
        padding: 9px 0 0 0;
        list-style-type: none;
        text-transform: uppercase;
    }
    
    ul#subnav li a {
        text-decoration: none;
        padding: 7px 20px 7px 20px;
        background: transparent url(images/subnav_sep.gif) no-repeat left;
    }
    
    ul#subnav li a:link, ul#subnav li a:visited {
        background-color: inherit;
        color: #303030;
    }
    
    ul#subnav li a:hover, ul#subnav li a:active {
        background-color: inherit;
        color: #000;
    }
    
    ul#subnav li#subnavfirst a:link, ul#subnav li#subnavfirst a:visited {
        background: transparent url(images/subnav_icon.gif) no-repeat left;
        color: #303030;
    }
    
    ul#subnav li#subnavfirst a:hover, ul#subnav li#subnavfirst a:active {
        background: transparent url(images/subnav_icon.gif) no-repeat left;
        color: #000;
    }
    /* END NAV */
    why doesnt the main content float to the left of the image?
    any help is appreaciated
     
  2. compwhizii

    compwhizii Banned

    Messages:
    779
    Likes Received:
    0
    Trophy Points:
    0
    This is not an issue with hosting, so I've moved it to Programming help.
     
  3. freecrm

    freecrm New Member

    Messages:
    629
    Likes Received:
    0
    Trophy Points:
    0
    After a quick look, there is no css defined for the content.

    Secondly, this is doing exactly what you are telling it to. You're not using absolute positions so...

    float the image to the left...done

    THEN comes the content!

    If you want the main content to float to the left of the image, set the content first and then set #test to float to the left of that.

    (If I've understood your question!)
     
    Last edited: Dec 12, 2008
  4. vol7ron

    vol7ron New Member

    Messages:
    434
    Likes Received:
    0
    Trophy Points:
    0
    Yes, what exactly are you asking, you aren't too clear on what you want.
     

Share This Page