SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Float Problem With Sidebar and Heading

    I am having a problem here:



    How can I get the text to drop down from the float and go to the next line, I thought of using a clear but, it doesn't seem to be working.

    HTML
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <!-- This website and all of its written and visual content is 2009 Universal Martial Arts Center Inc. All Rights Reserved. -->
          <!-- If you would like to contribute information or if you would like to inquire about the site's written or visual code or style, please email the webmaster at: [email]webmaster@umac.ws[/email] -->
          <title>Universal Martial Arts Center</title>
     
          <meta http-equiv="Content-Type" content="application/xml+xhtml; charset=utf-8" />
          <meta name="keywords" content="taekwondo, hapkido, judo, karate, taichi, tai chi, capoeira, jujutsu, jiujustsu, martial arts, bushido, jidokwon, kids, afterschool, grappling"/>
          <meta name="description" content="Universal Martial Arts Center is a martial arts school in Queens, NY, USA. Specializing in Taekwondo, Hapkido, Judo, Tai Chi, Capoiera and Brazilian Jiujutsu. Call (718)276-5516 or (516)424-3567 for more information."/>
     
          <link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheets/site.css" />
        </head>
        <body>
          <div id="wrapper">
            <div class="top-nav">
              <ul>
                <li><a href="#" title="Homepage">Home</a></li>
                <li><a href="#about" title="About Universal">About Us</a></li>
                <li><a href="#programs" title="Programs We Offer">Programs</a></li>
                <li><a href="#schedule" title="Class Schedule">Schedule</a></li>
                <li><a href="#contact" title="Contact Our Staff">Contact Us</a></li>
              </ul>
              <br class="clear" />
            </div>
            <div id="page-wrapper">
              <div id="header">
                <h1>Universal Martial Arts Center</h1>
                <address>
                  Universal Martial Arts Center<br />
                  127-19 Merrick Boulevard<br />
                  Queens, NY 11434<br />
                  <br />
                  Queens (718) 276-5516<br />
                  Long Island (516) 424-3567
                </address>
                <br class="clear" />
              </div>
              <div id="page">
                <div class="one-third">
                  <div class="sidebar">
                    <ul class="sub-menu">
                      <li><strong>Universal</strong> MMA</li>
                      <li><strong>Universal</strong> Taekwondo</li>
                      <li><strong>Universal</strong> Hapkido</li>
                      <li><strong>Universal</strong> Judo</li>
                      <li><strong>Universal</strong> Capoeira</li>
                      <li><strong>Universal</strong> Tai Chi</li>
                    </ul>
                  </div>
                  <br class="clear" />
     
                  <h3>Upcoming Events <br/><span class="lower-case">Tournaments, Seminars &amp; More</span></h3>
                </div>
                <div class="two-thirds">
                  <div class="image-rotator">
                  </div>
     
                  <p class="intro-text">Welcome! Since 2000, we have been committed to the job of excellence in teaching and training current and future  black belts. We pride ourselves on our ability to instill the tenants of Courtesy, Integrity, Perserverance, Self-Control and Indomitable Spirit.</p>
     
                  <p class="intro-text">We teach modern, realistic and fully effective self-defense techniques and for those who like to go out and compete, we also train national-level competitors and amatuer MMA fighters.</p>
     
                  <h3>News &amp; Updates<br /><span class="lower-case">Your up-to-date information source</span></h3>
                </div>
                <br class="clear" />
              </div>
            </div>
            <div id="footer">
              <p>&copy;2009 Universal Martial Arts Center, Inc.</p>
            </div>
          </div>
        </body>
      </html>

    [CSS]

    Code CSS:
    @charset "utf-8";
    /* CSS Document */
     
    @import "reset.css";
     
    body {
      background: #c6e5f2 url("../images/background.gif") repeat-x top right;
      font-family: Arial, Helvetica, Verdana, Sans-serif;
      font-size: 10pt;
      text-align: center;
      color: #000000;
    }
     
    h1 {
      float: left;
      background: url("../images/umac_logo.gif") no-repeat top right;
      width: 383px;
      height: 110px;
      font-size: 1px;
      color: #ffffff;
      margin: 10px 10px;
    }
     
    h3 {
      color: #65adde;
      font-size: 14pt;
      line-height: 1em;
    }
    h3 .lower-case {
      color: #a9a9a9;
      font-weight: normal;
      font-size: 11pt;
    }
     
    address {
      float: right;
      color: #b5b5b5;
      text-align: right;
      font-style: normal;
      margin-top: 12px;
    }
     
    a, a:active, a:visited {
      text-decoration: none;
      color: #77b5e2;
      }
     
    a:hover {
      text-decoration: none;
      color: #4d99d0;
      }
     
    #wrapper {
      width: 960px;
      min-height: 600px;
      margin-left: auto;
      margin-right: auto;
    }
     
    #page-wrapper {
      background: #ffffff;
      min-height: 600px;
      height: 100%;
      text-align: left;
      padding: 15px;
    }
     
    #footer {
      color: #2996c1;
      padding-top: 15px;
    }
     
    .sidebar {
      float: left;
      background: #3d96d5;
      width: 295px;
      min-height: 150px;
      opacity: .7; 
      filter: alpha(opacity=70); 
      -moz-opacity: .7;
      margin: -40px
    }
     
    .sub-menu ul {
      color: #ffffff;
      line-height: 2em;
      text-align: left;
      font-size: 12pt;
    }
     
    .top-nav ul {
      float: right;
      white-space: nowrap;
      font-size: 9pt;
      text-align: left;
      text-transform: uppercase;
      line-height: 45px;
      margin-top: 20px;
      margin-bottom: -10px;
    }
     
    .top-nav ul li {
      list-style-type: none;
      display: inline;
      padding-right: 5px;
    }
     
    .top-nav ul li a, .top-nav ul li a:visited, .top-nav ul li a:active {
      background: #63addd;
      color: #ffffff;
      text-decoration: none;
      padding: 7px 9px;
    }
     
    .top-nav ul li a:hover {
      color: #c6e5f2;
    }
     
    .one-third {
      float: left;
      width: 31%;
      height: 100%;
      margin-left: 0.5%;
    }
     
    .two-thirds {
      float: left;
      width: 68%;
      height: 100%;
      margin-left: 0.5%;  
    }
     
    .clear {
     clear: both;
    }

    Thanks in advance for your help.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi, untested, but on #sidebar you give it margin:-40px which is pulling it up, change the value to margin:0 -40px -40px; ad you should be fine.

    Now IE6 is running into a bug a couple times . These are the elements that need display:inline; added

    .two-thirds
    .one-third
    h1

    ALso be aware that when you set min-height, yoou have to feed IE6 the height property
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I was pulling my hair out, lol.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    xD I keep my hair long for that very reason .

    Your welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •