07-13-09, 02:23 PM
|
|
Newbie Coder
|
|
Join Date: Aug 2006
Posts: 51
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
|
Space Above Form
I can not remove the space above my form on this page. I can however add text or images and fill the space. I have looked at all my css files and I can not for the life of me figure out what to change or modify.
This is my html code for the page:
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=UTF-8" />
<title>Atomike Designs</title>
<link href="files/global2.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="scripts/shadowbox.css" />
<link rel="stylesheet" href="css/structure.css" type="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript" src="scripts/wufoo.<acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym>"></script>
<script type="text/javascript" src="scripts/prototype.<acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym>"></script>
<script type="text/javascript" src="scripts/shadowbox.<acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym>"></script>
<script type="text/javascript">
Shadowbox.init({
players: ["swf","fla"]
});
</script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<h1>Atomike Designs</h1>
<!-- end #header -->
</div>
<div id="sidebar1">
<div id="nav">
<ul>
<li class="selected"><a href="#" style="background: transparent url(images/webdesign.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Web Design</a></li>
<li class=""><a href="http://www.ericryananderson.com/portrait" style="background: transparent url(images/print.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Print</a></li>
<li class=""><a href="#" style="background: transparent url(images/multimedia.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Multimedia</a></li>
<li class=""><img src="images/spacer.gif" alt="" width="1" height="34" /></li>
<li class=""><a href="#" style="background: transparent url(images/about.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">About</a></li>
<li class=""><a href="#" style="background: transparent url(images/contact.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Contac</a></li>
</ul>
</div>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<div id="container">
<form method="POST" action="contact.php">
<div class="info"><p>If you have a question or comment, drop us a line and we'll be sure to get back with you. We are always available to answer any questions you might have with your web site. If you're looking to work with us please use our work request form.</p></div>
<ul>
<li id="foli1" class=" ">
<label class="desc" id="title1" for="Field1">
Message
<span id="req_1" class="req">*</span>
</label>
<div>
<textarea id="Field1" name="Inquiry" class="field textarea medium" rows="10" cols="50" tabindex="1"></textarea>
</div>
<p class="instruct" id="instruct1"><small>This field is required.</small></p>
</li>
<li id="foli2" class=" ">
<label class="desc" id="title2" for="Field2">
Email Address
</label>
<div>
<input id="Field2" name="EmailFrom" type="text" class="field text large" value="" maxlength="255" tabindex="2"/>
</div>
<p class="instruct" id="instruct2"><small>We won't share this with strangers.</small></p>
</li>
<li class="buttons">
<input id="saveForm" class="btTxt submit" type="submit" value="Submit" />
</li>
<li style="display:none">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
</li>
<li style="display:none">
<label for="idstamp">Do Not Fill This Out</label>
<input name="idstamp" id="idstamp" value="" />
</li>
</ul>
</form>
</div>
<!-- end #mainContent -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>
Here are the three CSS files that are being used:
HTML Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lucida Grande', "Verdana";
color: #777;
font-size: 12px;
background-color: #FFF;
}
img {
margin: 0px;
}
a {
color: #666;
}
a:hover {
color: #333;
}
.twoColFixLtHdr #header {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
background-color: #DDDDDD;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-position: 30px;
height: 110px;
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 222px;
padding-left: 25px;
}
.twoColFixLtHdr #mainContent {
margin-left: 247px;
margin-top: 5px;
width: 600px;
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#photos {
height: 515px;
padding-top: 33px;
background: transparent url('../images/content-bg-left.gif') top left no-repeat;
}
#photos a {
display: block;
float: left;
padding-left: 15px;
height: 500px;
}
h1 {
position: fixed;
display: block;
width: 574px;
top: 15px;
left: 42px;
padding: 5px;
z-index: 50;
text-indent: -3000px;
}
h2 {
position: fixed;
display: block;
width: 216px;
top: 5px;
right: 8px;
padding: 5px;
text-indent: -100px;
background: #ffffff url('../images/contact.jpg') top left no-repeat;
}
#block {
position: fixed;
display: block;
width: 210 px;
height: 700 px;
background: #ffffff;
z-index: 30
}
#nav {
position: relative;
width: 222px;
height: 210px;
margin-left: -30px;
margin-top: 8px;
z-index: 40;
background: #ffffff url('../images/nav-bg.gif') 10px 0px repeat-y;
}
#nav span {
position: absolute;
display: block;
width: 10px;
height: 9px;
background: #ffffff;
}
#nav ul {
position: absolute;
top: left;
list-style-type: none;
}
#nav ul li a {
display: block;
width: 222px;
height: 34px;
text-indent: -3000px;
}
#nav ul li.selected a,
#nav ul li.selected a:hover {
background-position: 0px -68px !important;
}
#nav ul li a:hover {
background-position: 0px -34px !important;
}
#screenshot img {
margin: 10px;
}
HTML Code:
body{
margin:7px 0 15px 0;
text-align:center;
font-size:small;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}
#container{
text-align:left;
background:#fff;
}
#container, #top, #bottom, #footer{
margin:0 auto;
}
#top, #bottom{
width:650px;
height:10px !important;
display:block !important;
}
#top{
margin-top:10px;
}
form.wufoo{
margin:20px 20px 0 20px;
padding:0 0 20px 0;
}
h1 a{
min-height:40px;
height:40px;
display:block;
background:url(/images/wflogo.png) no-repeat left top;
overflow:hidden;
}
* html h1 a{
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/wflogo.png", sizingMethod="crop");
}
img, a img{
border:none;
-ms-interpolation-mode: bicubic;
}
* html #top, * html #bottom{
_behavior: url(/images/iepngfix.htc);
}
.hide{
display:none !important;
}
HTML Code:
.wufoo{
font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
}
.wufoo li{
width:62%;
}
form ul{
margin:0;
padding:0;
list-style-type:none;
width:100%;
}
form li{
display:block;
margin:0;
padding:6px 5px 9px 9px;
clear:both;
}
form li:after, form li div:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html form li{height: 1%;}
* html form li div{display:inline-block;}
*+html form li div{display:inline-block;}
form li div, form li span{
margin:0 .3em 0 0;
padding:0;
color:#444;
}
form li span{
float:left;
}
.center,
form li span.center input.text, form li span.center label,
form li.name input.text, form li.name span label,
form li.date input.text, form li.date span label,
form li.phone input.text, form li.phone span label,
form li.time input.text, form li.time span label{
text-align:center;
}
form li.time select.select{
margin-left:5px;
}
form li div.col span{
display:block;
width:100%;
float:left;
padding:0;
}
li.twoColumns div.col span{
width:48%;
margin:0 5px 0 0;
}
li.threeColumns div.col span{
width:30%;
margin:0 5px 0 0;
}
li.notStacked div.col span{
width:auto;
margin:0 7px 0 0;
}
form li.complex{
padding-bottom:0;
}
form li div span.left, form li div span.right{
margin:0;
width:47%;
}
form li div span.full input,
form li div span.full select,
form li div span.left input,
form li div span.right input,
form li div span.left select,
form li div span.right select{
width:100%;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both !important;
}
/* ----- INFO ----- */
.info{
display:inline-block;
clear:both;
border-bottom:1px dotted #ccc;
margin:0 0 5px 0;
line-height: 20px;
}
.info[class]{
display:block;
}
.info h2{
font-weight:normal;
font-size:160%;
margin:0 0 .2em 0;
clear:left;
}
.info div{
font-size:95%;
line-height:135%;
margin:0 0 1.1em 0;
color:#555;
}
/* ----- SECTIONS ----- */
form li.section, form li.captcha{
clear:both;
border-top:1px dotted #ccc;
padding-top:.9em;
padding-bottom:0px;
padding-left:9px;
width:97% !important;
position:static;
}
form ul li.first{
border-top:none !important;
margin-top:0px !important;
}
form .section h3{
font-weight:normal;
font-size:110%;
line-height:135%;
margin:0 0 .2em 0;
}
form .section div{
display:block;
font-size:85%;
margin:0 0 1.2em 0;
padding:0;
}
form li.captcha {
margin-top:5px;
padding-bottom:9px;
}
form li.captcha label.desc{
margin-bottom:4px;
}
#recaptcha_widget_div table{
background:#fff;
}
form li.captcha .noscript iframe{
border:none;
overflow:hidden;
margin:0;
padding:0;
}
form li.captcha .noscript label.desc{
display:block !important;
}
form li.captcha .noscript textarea{
margin-left:12px;
}
/* ----- LIKERT SCALE ----- */
form li.likert{
width:97% !important;
}
.likert table{
margin:0 0 .9em 0;
background:#fff;
width:100%;
border:1px solid #dedede;
border-bottom:none;
}
.likert caption{
text-align:left;
color:#222;
font-size:95%;
line-height:135%;
padding:5px 0 .5em 0;
}
.likert input{
padding:0;
margin:2px 0;
}
.likert label{
font-size:85%;
display:block;
color:#565656;
}
/* ----- Top Row ----- */
.likert thead td, .likert thead th{
background-color:#e6e6e6;
}
/* ----- Right Side ----- */
.likert td{
border-left:1px solid #ccc;
text-align:center;
padding:4px 6px;
}
.likert thead td{
font-size:85%;
padding:10px 6px;
}
/* ----- Body ----- */
.likert th, .likert td{
border-bottom:1px solid #dedede;
}
.likert tbody th{
color:#222;
font-size:95%;
font-weight:bold;
padding:8px 8px;
text-align:left;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
background-color:#f5f5f5;
}
.likert tbody tr:hover td, .likert tbody tr:hover th{
background-color:#FFFFCF;
}
/* ----- Likert Classes ----- */
.col1 td{width:30%;}
.col2 td{width:25%;}
.col3 td{width:18%;}
.col4 td{width:14.5%;}
.col5 td{width:12%;}
.col6 td, .col7 td{width:10%;}
.col8 td, .col9 td, .col10 td{width:6.5%;}
.col11{width:6%;}
.hideNumbers tbody label{
display:none;
}
/* ----- LABELS ----- */
form li div label, form li span label{
margin:0;
padding-top:6px;
clear:both;
font-size:85%;
line-height:10px;
color:#444;
display:block;
}
form li div span label{
padding-bottom:12px;
}
label.desc{
font-size:95%;
font-weight:bold;
color:#222;
line-height:150%;
margin:0;
padding:0 0 3px 0;
border:none;
display:block;
}
label.choice{
display:block;
font-size:100%;
line-height:150%;
margin:-17px 0 0 23px;
padding:0 0 5px 0;
color:#222;
width:88%;
}
.safari label.choice{
margin-top:-16px;
}
form.rightLabel div.col{
margin-top:-3px;
}
span.symbol{
font-size:120%;
line-height:135%;
}
form li .datepicker{
float:left;
margin:.19em 5px 0 0;
padding:0;
width: 16px;
height: 16px;
cursor:pointer !important;
}
/* ----- MIN/MAX COUNT ----- */
form li div label var{
font-weight:bold;
font-style:normal;
}
form li div label .currently{
display:none;
}
/* ----- FIELDS ----- */
input.text, input.search, input.file, textarea.textarea, select.select{
font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
font-size:100%;
color:#333;
margin:0;
padding:2px 0;
}
input.text, input.search, textarea.textarea{
border-top:1px solid #7c7c7c;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-bottom:1px solid #ddd;
background:#fff url(/images/fieldbg.gif) repeat-x top;
}
select.select{
padding:1px 0;
}
input.search{
-webkit-border-radius:10px;
-moz-border-radius:10px;
padding-left:6px;
}
input.checkbox, input.radio{
display:block;
margin:4px 0 0 0;
padding:0;
width:13px;
height:13px;
}
input.other{
margin:0 0 8px 25px;
}
.safari select.select{
font-size:120% !important;
margin:0 0 1px 0;
}
* html select.select{
margin:1px 0;
}
*+html select.select{
margin:1px 0;
border:1px solid red;
}
/* ----- BUTTONS ----- */
input.btTxt{
padding:0 7px;
width:auto;
overflow:visible;
}
form li.buttons{
clear:both;
padding-top:10px;
}
form li.buttons input{
font-size:120%;
margin-right: 5px;
}
/* ----- TEXT DIRECTION ----- */
.rtl .info h2, .rtl .info div, .rtl label.desc, .rtl label.choice,
.rtl div label, .rtl span label, .rtl input.text,
.rtl textarea.textarea, .rtl select.select, .rtl p.instruct,
.rtl .section h3, .rtl .section div, .rtl input.btTxt{
direction:rtl;
}
/* ----- SIZES ----- */
.third{
width:32% !important;
}
.half{
width:48% !important;
}
.full{
width:100% !important;
}
input.small, select.small{
width:25%;
}
input.medium, select.medium{
width:50%;
}
input.large, select.large, textarea.textarea{
width:100%;
}
textarea.small{
height:5.5em;
}
textarea.medium{
height:10em;
}
textarea.large{
height:20em;
}
/* ----- ERRORS ----- */
#errorLi{
width:99%;
margin:0 auto;
background:#fff !important;
border:1px solid red;
margin-bottom:1em;
text-align:center;
padding:1em 0 1em 0;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
#errorMsgLbl{
margin:0 0 5px 0;
padding:0;
font-size:125%;
color:#DF0000 !important;
}
#errorMsg{
margin:0 0 2px 0;
color:#000 !important;
font-size:100%;
}
#errorMsg strong{
padding:2px 3px;
background-color: #FFDFDF !important;
color:red !important;
}
form li.error{
display:block !important;
background-color: #FFDFDF !important;
margin-bottom:3px !important;
}
form li.error label, form li.error span.symbol{
color:#DF0000 !important;
}
form p.error{
display:none;
margin:0 !important;
padding:7px 0 0 0 !important;
color:#DF0000 !important;
font-weight:bold;
font-size:10px;
line-height:10px !important;
clear:both;
}
form li.complex p.error{
padding:0 0 9px 0 !important;
}
form li.error p.error{
display:block;
}
.leftLabel p.error, .rightLabel p.error{
margin-left:30%;
padding-left:15px;
}
.noI .leftLabel p.error, .noI .rightLabel p.error{
margin-left:35%;
padding-left:15px;
}
/* ----- REQUIRED ----- */
form span.req{
display:inline;
float:none;
color:red !important;
font-weight:bold;
margin:0;
padding:0;
}
/* ----- INSTRUCTIONS ----- */
form li.focused{
background-color:#fff7c0;
}
form li.focused, form li:hover{
position:relative; /* Makes Instructs z-index stay on top in IE. */
}
form .instruct{
position:absolute;
top:0;
left:0;
z-index:1000;
width:42%;
margin:0 0 0 8px;
padding:8px 10px 10px 10px;
border:1px solid #e6e6e6;
background:#f5f5f5;
visibility:hidden;
font-size:105%;
}
form .instruct small{
line-height:120%;
font-size:80%;
color:#444;
}
form li.focused .instruct, form li:hover .instruct{
left:100%; /* Prevent scrollbars for IE Instruct fix */
visibility:visible;
}
/* ----- ADVANCED CLASSNAMES ----- */
.hideSeconds .seconds, .hideAMPM .ampm{
display:none;
}
/* ----- ALT INSTRUCTIONS ----- */
.altInstruct .instruct, li.leftHalf .instruct, li.rightHalf .instruct{
visibility:visible;
position:static;
margin:0;
padding:6px 0 0 0;
width:100%;
clear:left;
background:none;
border:none;
}
li.altInstruct p.complex , li.leftHalf p.complex, li.rightHalf p.complex{
padding:0 0 9px 0;
}
/* ----- LABEL LAYOUT ----- */
.leftLabel li, .rightLabel li{
width:74% !important;
padding-top:9px;
}
.leftLabel label.desc, .rightLabel label.desc{
float:left;
width:29%;
margin:0px 15px 0 0;
}
.rightLabel label.desc{
text-align:right;
}
.leftLabel li div.col, .rightLabel li div.col,
.leftLabel li.complex div, .rightLabel li.complex div{
float:left;
}
.leftLabel .small, .rightLabel .small{
width:17%;
}
.leftLabel .medium, .rightLabel .medium{
width:35%;
}
.leftLabel .large, .leftLabel textarea.textarea,
.rightLabel .large, .rightLabel textarea.textarea,
.leftLabel li div.col, .rightLabel li div.col,
.leftLabel li.complex div, .rightLabel li.complex div{
width:64%;
}
* html .leftLabel .small, * html .rightLabel .small{
width:23%;
}
* html .leftLabel .medium, * html .rightLabel .medium{
width:55%;
}
* html .leftLabel .large, * html .leftLabel textarea.textarea,
* html .rightLabel .large, * html .rightLabel textarea.textarea{
width:97%;
}
.leftLabel p.instruct, .rightLabel p.instruct{
width:27%;
margin-left:5px;
}
.leftLabel .altInstruct .instruct, .rightLabel .altInstruct .instruct{
margin-left:29% !important;
padding-left:15px;
width:65%;
}
.leftLabel .buttons, .rightLabel .buttons{
margin-left:15px;
}
* html .leftLabel .buttons, * html .rightLabel .buttons{
margin-left:4px;
}
*+html .leftLabel .buttons, *+html .rightLabel .buttons{
margin-left:7px;
}
.leftLabel .buttons .submit, .rightLabel .buttons .submit{
margin-left:29%;
}
* html .leftLabel .buttons .submit, * html .rightLabel .buttons .submit{
margin-left:22%;
}
/* ----- NO INSTRUCTIONS ----- */
.noI .instruct{
display:none !important;
}
.noI form li, .noI form li.buttons, .altInstruct form li, .altInstruct form li.buttons{
width:97% !important;
}
.noI form li.section, .altInstruct form li.section{
padding-left:9px !important;
}
/* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
.noI .leftLabel label.desc, .noI .rightLabel label.desc{
width:34%;
}
.noI .leftLabel .large, .noI .leftLabel textarea.textarea,
.noI .rightLabel .large, .noI .rightLabel textarea.textarea,
.noI .leftLabel li div.col, .noI .rightLabel li div.col,
.noI .leftLabel li.complex div, .noI .rightLabel li.complex div{
width:60%;
}
.noI .leftLabel .buttons input, .noI .rightLabel .buttons input{
margin-left:34%;
}
/* ----- FIELD FLOATING ----- */
form li.leftHalf, form li.rightHalf{
width:46% !important;
}
li.leftHalf{
clear:left;
float:left;
}
li.rightHalf{
clear:none;
float:right;
}
li.leftHalf .medium, li.rightHalf .medium,
li.leftHalf .small, li.rightHalf .small{
width:100%;
}
The link to the site live is: Atomike Designs
Thanks for the help!
|
07-13-09, 10:52 PM
|
 |
Community Liaison
|
|
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 2,726
Thanks: 0
Thanked 32 Times in 32 Posts
|
|
You are going to have to re-think your layout.
You are trying to make this a lot harder than it needs to be.
You only have a basic layout.
The header,
the body ( contains the sidebar and the content, side-by-side)
and the footer.
You first need to layout your main div's to form this configuration.
Then add any formatting and special effects to the contents of each div.
__________________
Jerry Broughton
Last edited by job0107; 07-13-09 at 10:56 PM.
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
