dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Can't get ul lists to float

  1. #1
    Join Date
    Mar 2008
    Posts
    51

    Can't get ul lists to float

    Hi,

    I'm writing because I am having problems with getting these ul lists to floats. I was able to do it on another page with paragraphs and headings but for some reason these choose not to clear. I've been testing it in Firefox. Any suggestions? You'll find the code below.

    <div id="container">

    <div id="header"><img src="images/header2.jpg" alt="Dental Auxiliary Placement Service"></div>

    <div id="nav">
    <ul>
    <li><a href="index1.html">Home</a></li>
    <li><a href ="about.html">About</a></li>
    <li id="current" style="margin-left: 1px"><a href="services.html">Services</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    <li><a href="staff.html">Staff</a></li>
    <li><a href="contact.html">Contact Us</a></li>

    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="associates.html">Associates</a></li>
    </ul></div>
    <div id="navline"></div>
    <div id="upper">
    <h3 style="color: yellow;">Qualified and Experienced Candidates available
    for Temporary or Permanent placement - you make the choice!</h3>
    </div>
    <div id="Content">
    <h4>TEMPORARY EMPLOYMENT:</h4>

    <ul>

    <li>Vacant positions</li>

    <li>Vacation coverage</li>
    <li>Maternity Leave Absence</li>
    <li>Emergency Coverage</li>
    <li>Supplemental Staffing</li>
    <li>Illness Coverage</li>
    <li>Can earn extra income on days off</li>
    </ul>
    </div>

    <div id="sidebar">
    <h4>PERMANENT PLACEMENT:</h4>

    <ul>
    <li>Each candidate is registered with DAPS, Inc. </li>
    <li>Each registered client has the opportunity to interview the
    candidate and may schedule a working interview.</li>
    <li>DAPS, Inc. follows-up with your office to insure satisfaction of
    permanent placement.</li>
    <li>A written guarantee with each permanent position.</li>
    <li>Permanent positions are posted on our web site
    for your convenience.</li>
    </ul></div>
    <div class="runner">
    <h5>Additionally - <br />
    DAPS, Inc. offers guidance in the following areas to lead you and
    your team toward success!</h5>

    <ul style="font-size: .875em;">
    <li>Collections</li>
    <li>Appointment Book Scheduling</li>
    <li>Development of the Office Manual</li>
    <li>Employee Performance Appraisals</li>
    <li>Efficient Re-Call System</li>
    <li>Office Organization</li></ul></div>

  2. #2
    Join Date
    Jan 2009
    Posts
    147
    post the css also

  3. #3
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    Hard to tell without also seeing the accompanying css file. Is this available live somewhere?

  4. #4
    Join Date
    Mar 2008
    Posts
    51
    Sorry,
    The header and footer sections were not included in my post but they are working fine.

    Thanks,

    dreadingjs

    body, html {
    margin: 0; padding: 0; background: #369;
    color: #ffffff;
    }
    body { min-width: 750px;}
    h1, h2, h3, h4, h5, h6, p {font-family: "Copperplate Gothic", Verdana, sans-serif;
    color: white; }
    p {font-size: .75em;}
    #container { background: #369; margin: 0 auto; width: 750px;}
    #header {background: #369;}
    #header h1 {padding: 10px; margin: 0px;}
    #nav {padding: 0px; width: 100&#37;; background: transparent;
    voice-family: "\"}\""; voice-family: inherit;}
    #nav ul {font-family: "Copperplate Gothic", Verdana; font-weight: bold;
    font-size: 10px; color: #4c99e6; margin: 0; margin-left: 10px;
    padding: 0;list-style: none; width: 100%}
    #nav li {display: inline; margin: 0 2px 0 0; padding: 0;
    text-transform: uppercase;}
    #nav a {float: left; display: block; color: #369; margin: 0 1px 0 0;
    padding: 5px 10px; text-decoration: none; letter-spacing: 1px;
    background-color: white; /*Default menu color*/
    border-bottom: 2px solid yellow; }
    #nav a:hover {background-color: yellow; }
    #nav #current a {/*currently selected tab*/
    background-color: yellow; border-color: yellow; }
    #navline {clear: both; padding: 0; width: 100%; height: 5px;
    line-height: 5px; background-color: yellow; }
    #content {background: #369; width: 45%; display: block; float: left; padding-left: 15px; padding-top: 5px;}
    .runner { clear: both; margin-left: 15px; }
    #sidebar { display: block; float: right; width: 45%; margin: 0px 0 325px 0; background-color: #369}
    #sidebar h3, #sidebar p, {padding-left: 15px; padding-top: 5px; }
    #upper {clear: both; margin-left: 15px;}
    #footer {background: #909; background-image: url(images/footer.png); clear: both; height: 80px; font-size: .8em;
    font-weight: normal; margin-left: 10px;}
    #footer p {padding: 10px; margin: 0; float: right;}
    #footer .address {text-align: left; float: left;}
    .effect {font-style: italic;}

  5. #5
    Join Date
    Jan 2009
    Posts
    24
    Case sensitive, see

    <div id="Content"> and #content {background: #369; width: 45&#37;; display: block; float: left; padding-left: 15px; padding-top: 5px;}

    Div is a block element, so there's no need to declare with display: block again.

  6. #6
    Join Date
    Mar 2008
    Posts
    51

    UL Lists

    Halelujah!

    Thanks so much! It was driving me crazy trying to figure that out.

    dreadingjs

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles