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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How can I do this?

    Hi there, I'm new to CF and I'm trying to code a semi simple layout.

    I want the middle section of the website to resemble the floating boxes on http://hover.com

    any help?
    Last edited by KyleTroy; 07-14-2011 at 11:40 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ummm ok what have you got so far?? Where is your code? or your site?
    Teed

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can have a look for you in detail if you, i do quite a lot of these things. let me know, i'll give you my msn or whatever

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't have anything really then a basic layout that I started.

    My MSN: Kyle.Troy@live.com

    CSS:

    Code:
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     padding-bottom:60px;
    
    #header {
    	width: 940px;
    	margin: 0 auto;
    	position: relative;
    }
    
    #content { 
     float: right;
     color: #333;
     border: 1px solid #ccc;
     background: #F2F2E6;
     margin: 0px 0px 5px 0px;
     padding: 10px;
     width: 940px;
     display: inline;
    }
    
    #footer {
    	width: 940px;
    	margin: 0 auto;
    	position: relative;
    }
    HTML(going to use .php extension so I can use PHP includes for the header and everything later:

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Entertainment Production Company</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
    
             <div id="header">
    		 
    		       This is the Header		 
    			   
    		 </div>
    		
    	
    	<div id="content">
    		       
    	          <a href="#">Content</a>		 
    		 
    	</div>
    	</div>
      
    		 <!-- Begin Footer -->
    		 <div id="footer">
    		       
    			   This is the Footer		
    			    
    	     </div>
    		 <!-- End Footer -->
    		 
     
       
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    place all the html code into one more div and css for that div as "margin:0px auto; width:940px;" no need of giving margin auto for every sub div.

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gopinath_3411 View Post
    place all the html code into one more div and css for that div as "margin:0px auto; width:940px;" no need of giving margin auto for every sub div.
    I made the changes. You can see the updated code below. Still need help with how to execute the boxes.

    CSS:
    Code:
    * { padding: 0; margin: 0; }
    
    #wrapper{
    margin:0px auto; 
    width:940px;
    }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     padding-bottom:60px;
     
    }
    
    #header {
    	width: 940px;
    	position: relative;
    }
    
    #content { 
     float: right;
     color: #333;
     border: 1px solid #ccc;
     background: #F2F2E6;
     margin: 0px 0px 5px 0px;
     padding: 10px;
     width: 940px;
     display: inline;
    }
    
    #footer {
    	width: 940px;
    	position: relative;
    }

    HTML:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>EPC</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
    <div id="wrapper">
             <div id="header">
    		 
    		       This is the Header		 
    			   
    		 </div>
    		
    	
    	<div id="content">
    		       
    	          <a href="#">Content</a>		 
    		 
    	</div>
      
    		 <!-- Begin Footer -->
    		 <div id="footer">
    		       
    			   This is the Footer		
    			    
    	     </div>
    		 <!-- End Footer -->
    		 
    </div>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone out there that can help?

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    PAste your code here n share mockup of what you want to make

  • #9
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, England
    Posts
    63
    Thanks
    1
    Thanked 14 Times in 14 Posts
    Hi KyleTroy

    something like this?

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>EPC</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
    <div id="wrapper">
             <div id="header">
    		 
    		       This is the Header		 
    			   
    		 </div>
    		
    	
    	<div class="content" id="content1">
    		       
    	          <a href="#">Content</a>		 
    		 
    	</div>
    	
    	
    	<div class="content" id="content2">
    		       
    	          <a href="#">Content</a>		 
    		 
    	</div>
      
    		 <!-- Begin Footer -->
    		 <div id="footer">
    		       
    			   This is the Footer		
    			    
    	     </div>
    		 <!-- End Footer -->
    		 
    </div>
    </body>
    </html>
    Code:
    * { padding: 0; margin: 0; }
    
    #wrapper{
    margin:0px auto; 
    width:940px;
    background-color:red;
    }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     padding-bottom:60px;
     
    }
    
    #header {
    
    }
    
    #footer {
    
    }
    
    .content { 
     color: #333;
     border: 1px solid #ccc;
     margin: 5px 5px 5px 0px;
    }
    
    
    #header, #footer {
    margin:5px 0px;
    width: 940px;
    }
    
    #header, #footer, .content {
    float:left;
    padding: 10px;
    background: #F2F2E6;
    color: #333;
    border: 1px solid #ccc;
    }
    
    
    #content1 {
    width:150px;
    }
    
    #content2 {
    width:740px;
    margin: 5px 0px 5px 0px;
    }
    //Improvement in coding is iterative, each 'failure' is just the next step on your learning curve, some knowledge and logic can get you a long way.//

  • #10
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I'm a newbie in this field, so I can't help you.

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    if you plug this code into a new document, should work.

    Code:
    .wrapper {
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     background-color: #DDD;
     border: #BBB 1px solid;
     padding: 5px;
     -box-shadow: 0 0 1px 0 #333;
     -webkit-box-shadow: 0 0 1px 0 #333;
     -moz-box-shadow: 0 0 1px 0 #333;
    }
    
    .wrapper .box {
     border-radius: 2px;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     height: 100px;
     background-color: #FFF;
    }
    Code:
    <div class="wrapper">
     <div class="box">
     
     </div>
    </div>
    if anything don't feel intimidated by a site. chances are you know more code than them. especially this site, the script is awful. they need to use sprites for their images, if you hover over things, they flicker, because the images are loading separately. inline javascript ftl
    Last edited by Sammy12; 07-18-2011 at 06:58 PM.

  • Users who have thanked Sammy12 for this post:

    KyleTroy (07-18-2011)

  • #12
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    if you plug this code into a new document, should work.
    Like another css document and link to that one as well? or can it go into my main.css?

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    this is just an example. try pasting the code with a correct doctype, head, body and so forth in a new text document

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<style type="text/css">
    			.wrapper {
    				border-radius: 5px;
    				-webkit-border-radius: 5px;
    				-moz-border-radius: 5px;
    				background-color: #DDD;
    				border: #BBB 1px solid;
    				padding: 5px;
    				-box-shadow: 0 0 1px 0 #333;
    				-webkit-box-shadow: 0 0 1px 0 #333;
    				-moz-box-shadow: 0 0 1px 0 #333;
    			}
    
    			.wrapper .box {
    				border-radius: 2px;
    				-webkit-border-radius: 2px;
    				-moz-border-radius: 2px;
    				height: 100px;
    				background-color: #FFF;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="wrapper">
    			<div class="box">
    			</div>
    		</div>
    	</body>
    </html>
    should look like this:



    was this the portion of the page you wanted?
    Last edited by Sammy12; 07-18-2011 at 09:35 PM.

  • Users who have thanked Sammy12 for this post:

    KyleTroy (07-18-2011)

  • #14
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    this the portion of the page you wanted?
    Yup! Thanks for all of your help Sammy!


  •  

    Posting Permissions

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