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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Need some help with positioning DIVS

    Hi guys,
    I'm building the site below, but I'm having trouble getting the div to sit in the centre of the page. I added padding to the main div , but it still sits right next to the header div and doesn't look neat. I want the main div where the text goes to sit away from the menu and header/banner. Any ideas?

    http://www.davidstowe.co.uk

    Code:
    body
    {
    	background-color:#E9E9E9;
    	font-family:"MS Serif", "New York", serif;
    	text-align: center;
    }
    /*html {
    	background: url(../images/background.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }*/
    
    #container {
    	width:900px;
    	height:auto;
    	margin-left: auto;
    	margin-right: auto;
    	color:#000;
    }
    #header {
    	display:inline-block;
    	float:left;
    	width:900px;
    	height:85px;
    }
    
    #header_top
    {
    width:900px;
    height:55px;
    background-color:#5c75a9;
    text-shadow: 2px 2px #C0C0C0;
    font-family:"MS Serif", "New York", serif;
    color:#FFFFFF;
    font-size:43px;
    text-align:center;
    letter-spacing:10px;
    }
    #header_middle1
    {
    width:900px;
    height:2px;
    background-color:#FFFFFF;
    }
    #header_middle2
    {
    width:900px;
    height:1px;
    background-color:#5c75a9;
    }
    #header_middle3
    {
    width:900px;
    height:2px;
    background-color:#FFFFFF;
    }
    #header_bottom
    {
    width:900px;
    height:25px;
    background-color:#5c75a9;
    text-align:center;
    font-family:"MS Serif", "New York", serif;
    color:#FFFFFF;
    font-size:22px;
    letter-spacing:2px;
    }
    
    #menu {
    
    	float:left;
    	width:150px;
    	height:auto;
    	padding-top:5px;
    }
    #menu img
    {
    	padding-bottom:5px;	
    }
    
    #main {
    	padding:20px 10px 10px 10px;
    	float:left;
    	width:700px;
    	height:auto;
    	border-radius: 4px;
    	-webkit-border-radius: 4px;
    	background-color:#5c75a9;
    
    	/*overflow: scroll;*/
    }
    #footer {
    	width:750px;
    	height:50px;
    	text-align: center;
    	float: right;	
    }
    
    .blueLinks:link
    {
    	color:#5c75a9;
    	text-decoration:none;
    	font-weight: bold;
    }
    .blueLinks:visited
    {
    color: #5c75a9;	
    text-decoration:none;	
    }
    .blueLinks:hover
    {
    	text-decoration:underline;
    	color:#3CF;
    }
    .blueLinks:active
    {
    text-decoration:none;
    color: #5c75a9;		
    }
    
    /*
    #5c75a9 background color
    #8a9cc2 top border
    #29447e border
    #1a356e border bottom
    #4f6aa3 hover background color
    */
     
    .button_outside_border_blue{
    width:145px;
    border:solid #29447e 1px;
    border-bottom:solid #1a356e 1px;
    cursor:pointer;
    }
     
    .button_inside_border_blue{
    padding:6px 0 6px 0;
    background-color:#5c75a9;
    border-top:solid #8a9cc2 1px;
    text-align:center;
    color:#ffffff;
    }
     
    div.button_inside_border_blue:active{
    background-color:#4f6aa3;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <?php include "include_head.php";?>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <?php include "include_header.php";?>
    </div>
    <div id="menu">
    <?php include "include_menu.php";?>
      </div>
    
    <div id="main">
      
      <h2>Welcome to my Homepage!</h2>
    <p style="padding:10px">My drawings and paintings are all representational in character. They have followed a path of gradual evolution over the years. During this time I have experimented with a range of media and subject matter, often developing a series of works from a single landscape subject! The Website is organised on a geographical basis. Both the Derbyshire and the London pictures are concerned with colour and lighting effects. I favour the "panoramic", often with big skies! My composition models are from Hopper, Sickert and the Japanese legacy in 20th century European Art. I have a great admiration for the works of Turner, which inspire me with their drama and atmosphere. While digital and computer technology now play an important role in the recording and development of my ideas, I will always enjoy attempting the highest standards of draughtsmanship.</p>
    <p>David Stowe</p> 
    </div>
    
    <div id="footer"><?php include "include_footer.php";?></div>
    
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #main {
    	padding:20px 10px 10px 10px;
    	/*float:left;
    	width:700px;
    	height:auto;*/
    margin-left:160px;
    	border-radius: 4px;
    	-webkit-border-radius: 4px;
    	background-color:#5c75a9;
    
    	/*overflow: scroll;*/
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question

    I tried doing what you suggested and the main div has moved away from the menu, but it's still bang up against the header. Also the background seems to have shrunk.

    http://davidstowe.co.uk/pools.php

    How can I fix them?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you make a rough sketch of the desired output?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    chiba (06-16-2012)

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I want there to be a space between the header/logo area and the main content area, currently they site up close.
    Also the main area needs to vary in size depending upon how many photos are in it.
    Any ideas?
    Last edited by chiba; 06-16-2012 at 10:01 AM.

  • #6
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Quote Originally Posted by chiba View Post
    Hi guys,
    I'm building the site below, but I'm having trouble getting the div to sit in the centre of the page. I added padding to the main div , but it still sits right next to the header div and doesn't look neat.
    If you just want it to be as to the right as the header juste use a float:right instead of float:left
    Code:
    #main {
    	padding:20px 10px 10px 10px;
            margin:10px;
    	float:right;
    	width:700px;
    	height:auto;
    	border-radius: 4px;
    	-webkit-border-radius: 4px;
    	background-color:#5c75a9;
    
    }

    Or you may add some margin to #main with the float:left:

    Code:
    #main {
    	padding:20px 10px 10px 10px;
            margin-left:20px;
    	float:left;
    	width:700px;
    	height:auto;
    	border-radius: 4px;
    	-webkit-border-radius: 4px;
    	background-color:#5c75a9;
    
    }
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    chiba (06-16-2012)

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Just remove the float:left; from #header
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    chiba (06-16-2012)

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi guys
    Thanks for all your help

    Any ideas why the footer is sitting on the main form?
    http://davidstowe.co.uk/contactme.php

    Code:
    /*body
    {
    	background:#E9E9E9;
    	
    }*/
    
    #formWrap 
    {
    	width:auto;
    	/*background:#fff;*/
    	/*border:1px solid #F1F1F1;
    	-moz-border-radius:20px;
    	-moz-box-shadow:2px 2px 5px #999;
    	-webkit-border-radius:20px;
    	-webkit-box-shadow:2px 2px 5px #999;*/
    	/*padding:16px 10px 40px;*/
    }
    #formWrap #form 
    {
    /*	border-top: 1px solid #EEE;
    	width:720px;*/
    	
    }
    #form .row 
    {
    	border-bottom: 1px dotted #EEE;
    	dispay:block;
    	line-height:38px;
    	overflow:auto;
    	padding:24px 0px;
    	width:100%;	
    }
    
    #form .row .label 
    {
    	/*font-size:16px;*/
    	font-weight:bold;
    	/*font-family:Arial, Helvetica, sans-serif;*/
    	width:180px;
    	text-align:right;
    	float:left;
    	padding-right:10px;
    	margin-right:10px;
    }
    
    #form .row .input
    {
    	float:left;
    	margin-right:10px;
    /*	width:auto;*/
    width:285px;
    }
    
    #form .row .input2
    {
    	float:left;
    	margin-right:10px;
    /*	width:auto;*/
    	width:466px;;
    	
    }
    
    .detail
    {
    	width:260px;
    	/*font-family:Arial, Helvetica, sans-serif;*/
    	font-size:20px;
    	padding:7px 8px;
    	margin:0;	
    	display:block;
    	border-radius:5px 5px 5px 5px;
    	/*background:#E9E9E9;*/
    	border:1px solid #CCC;
    }
    
    .mess
    {
    	width:450px;
    	height:280px;
    	max-width:450px;
    	overflow:auto;
    /*	font-family:Arial, Helvetica, sans-serif;*/
    /*	font-size:20px;*/
    	padding:7px 8px;
    	line-height:1em;
    	margin:0;
    	display:block;
    	border-radius:5px 5px 5px 5px;
    	background:#E9E9E9;
    	border:1px solid #CCC;
    }
    
    .detail:focus
    {
    	background-color:#FFF;
    	border: 1px solid #999;
    	outline:none;
    }
    .detail:mess
    {
    	background-color:#FFF;
    	border: 1px solid #999;
    	outline:none;
    }
    
    
    #form .row .context 
    {
    	color:#999;
    	font-size:11px;
    	font-style:italic;
    	line-height:14px;
    /*	font-family:Arial, Helvetica, sans-serif;*/
    	width:200px;
    	float:left;
    }
    
    #form #submit 
    {
    	color:#000;
    	font-size:16px;
    	text-shadow:1px 1px 1px #999;
    	padding:10px;
    }
    
    span.error
    {
    	color:#000;
    	display:block;
    /*	font-family:Arial, Helvetica, sans-serif;*/
    	font-size:12px;
    	background-image:url(../images/x.png);
    	background-repeat:no-repeat;
    	background-position:left 6px;
    	padding-left:25px;	
    }
    
    #formWrap h2
    {
    	/*	font-family:Arial, Helvetica, sans-serif;*/
    	text-shadow:1px 1px 1px #CCC;
    	/*	color:#255E67;*/
    	/* [disabled]margin-left:25px; */
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <?php include "include_head.php";?>
    
    </head>
    <body>
    <div id="container">
    <div id="header">
    <?php include "include_header.php";?>
    </div>
    <div id="menu">
    <?php include "include_menu.php";?>
      </div>
    
    <div id="main">
      
    <div id="formWrap">
    <h2>We appreciate your feedback</h2>
        <div id="form">
        <?php if($form_complete === FALSE): ?>
        <form action="contactme.php" method="post" id="comments_form">
            <div class="row">
                <div class="label">Your Name</div> <!-- end .label-->
            	<div class="input">
                <input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>"/><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
                
                </div><!-- end .input-->
                <div class="context">e.g. John Smith</div><!-- end .context-->
            </div> <!-- end .row-->
            
             <div class="row">
                <div class="label">Your email address</div> <!-- end .label-->
            	<div class="input">
                <input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>"/><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
                </div><!-- end .input-->
                <div class="context">We will not share your email.</div><!-- end .context-->
            </div> <!-- end .row-->
        
                 <div class="row">
                <div class="label">Your message</div> <!-- end .label-->
            	<div class="input2">
                <textarea = "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?> </textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
            </div> <!-- end .row-->
            
            <div class="submit">
            <input type="submit" id="submit" name="submit" value="Send Message"/>
            
            </div><!-- end .submit-->
            </form>
            
            <?php else: ?>
    <script type="text/javascript">
    setTimeout('ourRedirect()',1000)
    function ourRedirect()
    {
    	location.href='thanks.php';
    }
    </script>
    
    <?php endif; ?>
    
        </div> <!-- end #form-->
    </div> <!-- end formWrap--->
    
     <div class="clearFloat"></div>
    
    
    </div>
    
    <div id="footer"><?php include "include_footer.php";?></div>
     
    </div>
    
    </body>
    </html>

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove the width and float from #footer
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    chiba (06-18-2012)

  • #10
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by abduraooft View Post
    Remove the width and float from #footer
    Hi, and thanks for your help.

    It's still not working. The footer seems to merge with the rest of the main div. Only on http://davidstowe.co.uk/contactme.php


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <?php include "include_head.php";?>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"><?php include "include_header.php";?></div>
        
    <div id="menu"><?php include "include_menu.php";?></div>
    
    <div id="main">
      
                <div id="formWrap">
                <h2>We appreciate your feedback</h2>
                    <div id="form">
                    <?php if($form_complete === FALSE): ?>
                    <form action="contactme.php" method="post" id="comments_form">
                        <div class="row">
                            <div class="label">Your Name</div> <!-- end .label-->
                            <div class="input">
                            <input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>"/><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
                            
                            </div><!-- end .input-->
                            <div class="context">e.g. John Smith</div><!-- end .context-->
                        </div> <!-- end .row-->
                        
                         <div class="row">
                            <div class="label">Your email address</div> <!-- end .label-->
                            <div class="input">
                            <input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>"/><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
                            </div><!-- end .input-->
                            <div class="context">We will not share your email.</div><!-- end .context-->
                        </div> <!-- end .row-->
                    
                            <div class="row">
                            <div class="label">Your message</div> <!-- end .label-->
                            <div class="input2">
                            <textarea = "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?> </textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
                        </div> <!-- end .row-->
                        
                        <div class="submit">
                        <input type="submit" id="submit" name="submit" value="Send Message"/>
                        
                        </div><!-- end .submit-->
                        </form>
                        
                        <?php else: ?>
                <script type="text/javascript">
                setTimeout('ourRedirect()',1000)
                function ourRedirect()
                {
                    location.href='thanks.php';
                }
                </script>
                
                <?php endif; ?>
                
                </div> <!-- end #form-->
                </div> <!-- end formWrap--->
                
                 <div class="clearFloat"></div>
    
    
    </div><!-- end #main--->
    
    <div id="footer"><?php include "include_footer.php";?></div>
     
    </div><!-- end #container--->
    
    </body>
    </html>

    Code:
    #footer {
    	/*width:900px;*/
    	height:auto;
    	text-align: center;
    	/*float: left;*/
    	padding-top: 10px;
    	border-radius: 4px;
    	-webkit-border-radius: 4px;
    	background-color:#5c75a9;
    	/*margin-left:0px;*/
    }
    Last edited by chiba; 06-21-2012 at 09:34 PM.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The footer seems to merge with the rest of the main div.
    Get a copy of firebug for your firefox to inspect the elements on live. It appears, the footer is located inside the main. You might have some misplaced/missing closing tags. Have a look at http://validator.w3.org/check?verbos...Fcontactme.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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