H2 not full width of container

Cheesy · 4th September 12, 10:40 PM

Hi,

I've had a few issues implementing this form on my site but have ironed out everything except this.

After adding in a class for the H2 of this page to centre text etc... The H2 isn't taking up the whole width of the container.

I have cut off the bottom of the code (only pertaining to form functions) as the code was too long to post otherwise.

The HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="wss.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Wilhelmi Stage School</title>
</head>
<body>
<img src="http://www.wssdance.com/images/header.jpg" class="header" alt="Oops! There was an error displaying this image." />
<div class="box">
<ul id="nav2">
<li><a href="http://www.wssdance.com/index.html">Home</a></li>
<li><a href="http://www.wssdance.com/enrol.html">Enrolment</a></li>
<li><a href="http://www.wssdance.com/uniform.html">Uniform</a></li>
<li><a href="http://www.wssdance.com/location.html">Location</a></li>
<li class="last"><a href="http://www.wssdance.com/contact.html">Contact Us</a></li>
</ul>
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/SG89vqNIzb" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
    document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<div id="emf-container-outer">
  <div id="emf-container" style="width:599px">
    <div id="emf-logo">
      <a>EmailMeForm</a>
    </div>
    <form id="emf-form" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/SG89vqNIzb" name="emf-form">
      <div id="emf-form-instruction" class="emf-head-widget">
        <div id="emf-form-title" class="emf-bold" style="text-align:center">
          <h2 class="contacth2">CONTACT US</h2>
        </div>
        <div id="emf-form-description" style="text-align:center">
          For any enquiries, please call: 0404 186 468<br />
          <br />
          OR<br />
          <br />
          Please fill in the form below and we will contact you ASAP!
        </div>
      </div>
      <ul>
        <li id="emf-li-0" class="emf-li-field emf-field-text data_container" style="text-align:center">
          <label class="emf-label-desc" for="element_0">Name: <span>*</span></label>
          <div class="emf-div-field">
            <input id="element_0" name="element_0" value="Your name here" size="30" type="text" class="validate[required]" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-1" class="emf-li-field emf-field-phone data_container" style="text-align:center">
          <label class="emf-label-desc" for="element_1">Phone:</label>
          <div class="emf-div-field">
            <input id="element_1" name="element_1" class="validate[optional,custom[telephone]]" value="Your phone number here" size="30" type="text" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-2" class="emf-li-field emf-field-email data_container" style="text-align:center">
          <label class="emf-label-desc" for="element_2">Email: <span>*</span></label>
          <div class="emf-div-field">
            <input id="element_2" name="element_2" class="validate[required,custom[email]]" value="" size="30" type="text" />
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-3" class="emf-li-field emf-field-textarea data_container" style="text-align:center">
          <label class="emf-label-desc" for="element_3">Message:</label>
          <div class="emf-div-field">
            <textarea id="element_3" name="element_3" cols="45" rows="10" class="validate[optional]">
</textarea>
          </div>
          <div class="emf-clear"></div>
        </li>
        <li id="emf-li-recaptcha">
          <script type="text/javascript">
//<![CDATA[
                                        
                                $(function(){
                                        $('#recaptcha_response_field').addClass('validate[required]');
                                });
          //]]>
          </script>
          <div>
            <script type="text/javascript">
//<![CDATA[
            var RecaptchaOptions = {
                theme: 'clean',
                custom_theme_widget: 'emf-recaptcha_widget'
                };
            //]]>
            </script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
</script> <noscript><iframe src="https://www.google.com/recaptcha/api/noscript?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9" height="300" width="500" frameborder="0"></iframe><br />
            <textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge" /></noscript>
          </div>
        </li>
        <li id="emf-li-post-button" class="middle">
          <input value="Submit" type="submit" onmouseover="return true;" />
        </li>
      </ul><input name="element_counts" value="4" type="hidden" /> <input name="embed" value="forms" type="hidden" /><input name="_temp_id" value="" type="hidden" />
    </form>
  </div>
</div><br />
<div style="text-align:center">
  <font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=
  "http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"
  target="_blank"><font face="Verdana" size="2" color="#000000">Forms Builder</font></a><br />
  <a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/SG89vqNIzb" target="_blank"><font face=
  "Verdana" size="2" color="#000000">Report Abuse</font></a>
</div></div><script type="text/javascript">

The CSS:

Code:

html {
overflow-y: scroll;
padding-top:10px;
}
h1 {
    color:black;
    text-align: center;
    font-family: 'Great Vibes', cursive;
    font-size: 3em;
}
h2.contacth2 {margin-top:-25px; font-size:1.25em; font-family:Times New Roman; font-weight:normal;}
h2, h3, h4 {
color:black;
}
h2 {
border-bottom: solid 1px black;
background-color:#FFC6CE;
margin-top:-20px;
}
body {
      background-color:#FFC0C9;
}
p {
   color:black;
   font-weight:bold;
   padding:3px;
}
ul#nav2 {
width:600px;
margin:0;
padding:0;
overflow: auto;
}
#nav2 li
{
display:inline;
float:left;
list-style-type:none;
border-bottom:1px solid black;
border-right:1px solid black;
}
#nav2 li.last
{
border-right:none;
}
#nav2 a:link
{
display:block;
width:109px;
font-weight:bold;
color:#000000;
background-color:#F6A8B6;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:5px;
}
#nav2 a:hover,a:active
{
background-color:#FF99AA;
}
#nav2 a:visited
{
background-color:#FF99AA;
}
div.box {
margin:0 auto;
padding:0px 0px 20px 0px;
background-color:#FFDDDD;
text-align:center;
border:1px solid black;
color:#FFE4C4;
width:599px;
}
ul#footer {
width:500px;
margin:0 auto;
}
#footer li
{
display:inline;
float:left;
list-style-type:none;
text-decoration:underline;
}
#footer a:link,a:visited
{
display:inline;
width:500px;
color:#000000;
text-align:center;
padding:8px;
text-decoration:none;
text-transform:uppercase;
}
img.header {
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom:5px;
}

meesa · 4th September 12, 10:50 PM

Make sure there isn't a margin or a padding around the H2.

Cheesy · 4th September 12, 10:55 PM

Quote:

Originally Posted by meesa

Make sure there isn't a margin or a padding around the H2.

There is only margin:top which I need to bump up the H2.

meesa · 4th September 12, 11:01 PM

There are default margins on every element, sometimes you have to set them to zero.

Cheesy · 4th September 12, 11:13 PM

Quote:

Originally Posted by meesa

There are default margins on every element, sometimes you have to set them to zero.

Have tried setting left and right margins to zero; no change.

Code:

h2.contacth2 {margin-top:-25px; margin-left:0px; margin-right:0px; font-size:1.25em; font-family:Times New Roman; font-weight:normal;}

meesa · 4th September 12, 11:16 PM

How about padding?

BTW, use short forms:
margin: -25px 0 0 OR margin: -25px 0 0 0.

Cheesy · 4th September 12, 11:34 PM

Quote:

Originally Posted by meesa

How about padding?

BTW, use short forms:
margin: -25px 0 0 OR margin: -25px 0 0 0.

set padding to zero, still no go.

Thanks for the tip.

meesa · 4th September 12, 11:38 PM

Do you have it live anywhere?

meesa · 4th September 12, 11:39 PM

Nevermind, you have paddings on the parent containers, that is your issue.

4th September 12, 10:50 PM	#2
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,140	Re: H2 not full width of container Make sure there isn't a margin or a padding around the H2. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

4th September 12, 11:01 PM	#4
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,140	Re: H2 not full width of container There are default margins on every element, sometimes you have to set them to zero. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

4th September 12, 11:16 PM	#6
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,140	Re: H2 not full width of container How about padding? BTW, use short forms: margin: -25px 0 0 OR margin: -25px 0 0 0. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

4th September 12, 11:38 PM	#8
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,140	Re: H2 not full width of container Do you have it live anywhere? __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

4th September 12, 11:39 PM	#9
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,140	Re: H2 not full width of container Nevermind, you have paddings on the parent containers, that is your issue. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode