Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile HTML Newbie needs simple help, floating and javascript configuration

    Hi there,

    Im very very new to coding, but i think i have a fairly good grasp on HTML. Im pretty sure these issues are just quick fixes / solutions, but thank you in advance.

    http://rileyswingle.com/kk/index.html

    Code:
           <div id="content">
           		   <div id="leftcontent">
                   
                   <div id="contentleft1">
                   <img src="images/keandiff.png" />
                   <p>Text for The Keane Difference goes here</p>
                   </div>
                   
                   <div id="contentleft2"> 
                   <img  src="images/service2meet.png" />
                   <p>Text for service to meet your unique needs goes here</p>
                   </div>
    
                       <div id="contentright1">
                       <img src="images/certific.png" />
                       <img src="#" />
                       </div>
                   
    
           </div>
    Code:
    #content p {font-size:10px;
    			width:900px;
    			height:auto;
    			}
    
    #contentleft1{padding-left:42px;
    			padding-top:30px;
    			width:370px;
    			height:inherit;
    			float:left;
    			}
    #contentleft2{padding-left:42px;
    			width:370px;
    			height:auto;
    			}
    #contentright1{
    			width:300px;
    			height:inherit;
    			float:right;
    			}
    I cannot seem to find out how to get these divs to float correctly. I wish to have the "Certifications" div to be within the lower content div (that div is below the menu), but whenever i try to float the other two divs, they just do funky things like come out of the div and removes the background white color and the image comes through.

    Also, i wish to put in a javascript slideshow with or without clickable links, whichever is easier. I had downloaded a .js called CrossSlide, but i dont know where to put the following code to configure it. It seems like an easy enough procedure, but i cant ever find any real quick answer to it.

    Code:
    $('#placeholder').crossSlide({
      sleep: 2,
      fade: 1
    }, [
      { src: 'sand-castle.jpeg' },
      { src: 'sunflower.jpeg'   },
      { src: 'flip-flops.jpeg'  },
      { src: 'rubber-ring.jpeg' }
    ]);
    Thanks for your help in advance!

    -Riley

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    use clearfix

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    A good starter way to clear floats.

    Here's how you use it:

    Code:
    <div class="clearfix">
     <div class="difference" style="float: left; width: 450px;">
     
     </div>
     <div class="certificates" style="float: left; width: 450px;">
     
     </div>
    the correct way is to set a height for the "container" of the two divs your floating, but clearfix will work regardless. notice how the "difference" and "certificates" divs equal to 900 width (which is the width of your container).
    Last edited by Sammy12; 07-14-2011 at 03:09 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Simply set following code to parent DIV of floated elements. It will work in all browsers:

    Code:
    #parent_div {
    width:900px; /*width should be according to child floated elements */
    height:1%;
    overflow:auto;
    }

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    or you could try adding in the missing "</div>" tag for the left content area

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    good catch. but regardless he's gonna have to clear his float one way or another


  •  

    Posting Permissions

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