Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member djsquid's Avatar
    Join Date
    Aug 2011
    Location
    Staffordshire
    Posts
    15
    Member #
    28854
    Hey Guys,

    I'v started a new project recently creating the new website for my workplace, and I have made a contact page, and want to implement a contact form. I have all the HTML and CSS down to a T all works fine, but here is my problem..

    All my content for the page is within a content div, which then has another div called contactuscontentholder which has a background image.

    In the contactuscontenholder I have a h1 tag and P tag and then I have my form, but I no longer require the h1 and P tag just the form, but when I remove the h1 and P tag the form jumps up to the top of the contactuscontentholder and sits flush with this, and when I apply a margin or padding to the form to bring it down into position it makes the contactuscontentholder image move down with it? and I can not for the life of me stop this. I want the background image to stay put and just move my form around and add a margin-top and some padding, could someone please advise this is so frustration....

    H1 and P tag have now been replaced with "space" tag as I have found this is the only way to stop it from sitting flush with the contactuscontentholder.

    HTML Code:
    <div id="content">
                <div id="contactuscontentholder">
    
                <div class="space"></div>
    
                <div id="contactform" class="myform">
                    <form id="form" name="form" method="post"    action="Home.html">
                    <h1>Contact Us</h1>
                    <p>Product Enquiries or just a general chat?</p>
    
                    <label>Name
                    <span class="small">Add your name</span>
                    </label>
                    <input type="text" name="name" id="name"/>
    
                    <label>Email
                    <span class="small">Add your Email Address</span>
                    </label>
                    <input type="text" name="email" id="email"/>
    
                    <label>Message
                    <span class="small">How can we Help</span>
                    </label>
                    <input type="text" name="message" id="message"/>
    
                    <button type="submit">Submit</button>
                    <div class="spacer"></div>
    
                    </form>
                </div>
    
                </div>
    
            </div>
    CSS CODE

    Code:
    #content {
    	width:1020px;
    	height:100%;
    }
    
    #homecontentholder {
    	margin-top:50px;
    	margin-left:auto;
    	margin-right:auto;
    	width:908px;
    	height:796px;
    	background-image:url(Images/contentholder.jpg);
    }
    
    #productcontentholder {
    	margin-top:50px;
    	margin-left:auto;
    	margin-right:auto;
    	width:908px;
    	height:796px;
    	background-image:url(Images/contentholder.jpg);
    }
    
    #portfoliocontentholder {
    	margin-top:50px;
    	margin-left:auto;
    	margin-right:auto;
    	width:908px;
    	height:796px;
    	background-image:url(Images/contentholder.jpg);
    }
    
    #contactuscontentholder {
    	margin-top:50px;
    	margin-left:auto;
    	margin-right:auto;
    	width:908px;
    	height:796px;
    	background-image:url(Images/contentholder.jpg);
    }
    
    /*--------------------END OF CONTENT HOLDER STYLES -----------------------*/
    
    /*--------------------CONTENT HOLDER H1 STYLES -----------------------*/
    
    #productcontentholder h1 {
    	font
    	text-align:left;
    	padding:55px;
    }
    
    #portfoliocontentholder h1 {
    	text-align:left;
    	padding:55px
    }
    
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    
    .space {
    	padding:20px;
    }
    
    
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    
    
    
    #contactuscontentholder .myform {
    	margin-top:25px;
    	padding-left:0px;
    }
    
    
    
    
    /*--------------------END OF CONTENT HOLDER H1 STYLES-----------------------*/
    
    
    
    /*--------------------HOME PAGE SLIDESHOW-----------------------*/
    
    /* rotator in-page placement */
            div.slideshow {
    	position:relative;
    	height:398px;
    	width:908px;
    	margin-left: 0px;
    }
    /* rotator css */
    	div.slideshow ul li {
    	float:left;
    	position:absolute;
    	list-style: none;
    }
    /* rotator image style */	
    	div.slideshow ul li img {
    	border:1px solid #ccc;
    	padding: 0px;
    	background: #FFF;
    }
            div.slideshow ul li.show {
    	z-index:500;
    }
    /*--------------------END OF HOME PAGE SLIDESHOW-----------------------*/
    
    
    /*--------------------CONTACT US FORM -----------------------*/
    
    /*----FORM ----*/
    
    
    .myform {
    	margin-top:50px;
    	margin-left:25px;
    	width:400px;
    	padding:14px;
    }
    
    /*----FORM STYLE ----*/
    
    #contactform {
    	border:solid 1px #F00;
    	background:#FFF;
    }
    
    #contactform h1 {
    	font-size:32px;
    	font-weight:bold;
    	margin-bottom:0px;
    }
    
    #contactform p {
    	font-size:11px;
    	color:#F00;
    	margin-bottom:20px;
    	border-bottom:solid 1px #F00;
    	padding-bottom:10px;
    }
    
    #contactform label {
    	display:block;
    	font-size:25px;
    	font-weight:300;
    	text-align:right;
    	width:140px;
    	float:left;
    }
    
    #contactform .small {
    	color:#F00;
    	display:block;
    	font-size:11px;
    	font-weight:normal;
    	text-align:right;
    	width:140px;
    }
    
    #contactform input {
    	float:left;
    	font-size:12px;
    	padding:4px 2px;
    	border:solid 1px #F00;
    	width:200px;
    	margin:2px 0 20px 10px;
    }
    
    #contactform button {
    	clear:both;
    	margin-left:150px;
    	width:125px;
    	height:31px;
    	background:#CCC;
    	text-align:center;
    	line-height:20px;
    	color:#000;
    	font-size:16px;
    	font-weight:bold;
    }
    
    /*--------------------END OF CONTACT US FORM -----------------------*/

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It's jumping to the top because the <h1> and <p> elements are block level, which, in short, adds the space. Add a margin to the top of #contactform to push it down instead of the empty <div>
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I have to ask... is this happening in All Browsers ? or just certain browsers ?

    I noticed you don't have heights defined on most of your Div(s).

    I learned a long time ago, that you should always define Height, Width, Padding, Margins on each and every div, so the browser default settings are not applied. IE is probably the worst about defining these for you if you don't have something in there... define them even if they are 0.

    for troubleshooting I never use the "AUTO" definition for anything but height, as each and every browser is allowed to apply what they think fits the space.

    shorthand for margins and padding ( always remember the "length" starts at the top and goes clockwise )

    for a margin of 25px on top, 5px on the right and left sides and no margin on the bottom, the css would be.

    margin: 25px 5px 0 5px;

    for a margin of 25px on top and bottom, and 0 on the left and right

    margin: 25px 0;

    for no margins:

    margin: 0;

    notice 0 is 0 , you don't need to enter PX, EM Or %, as 0 = 0 no matter how you read it.

    perhaps all the "auto" sizing is getting in your way ?



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com