Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Need to "center" my form

Posted on 2013-12-04
6
442 Views
Last Modified: 2013-12-04
I would like to center my form on this page (http://test.bluestarbussales.com/features_leftsidebar%20-%20Copy.html)

I am assuming it is a "simple" line of code I need to add (where and what I do not know)


Here is the code:

<div class="content_full_size">
                  <div class="h2_background">
                    <h2><span>Part Order Form</span></h2>
                    <div class="clr"></div>
                  </div>
                  <div class="clr"></div>
                  <div class="pic"> <div class="pic img_hover_box 1_ico"><a href="http://cdn.pimg.co/p/800x600/205927/fff/img.png" class="prettyPhoto" rel="prettyPhoto[id]"> <img src="images/part_order.png"/>
          	        
          	        </a>
          
      </div> 
                  </div>
                  <div class="separator_clear small"></div>
                  <form action="parts.php" method="post" id="contactform_main">
                                      <ol>
                                        <li>
                                          <input name="name" required class="text" id="name" placeholder="Name (required)"/>
                                        </li>
                                        <li>
                                          <input name="email" required class="text" id="email" placeholder="Email (required)"/>
                                        </li>
                                        <li>
                                          <input name="school" required class="text" id="school" placeholder="School / Business (required)"/>
                                        </li>
                                        <li>
                                          <input id="phone" name="phone" class="text" placeholder="Phone # (required)" required/>
                                        </li>
                                        <li>
                                          <input id="vin" name="vin" class="text" placeholder="Last 8 VIN / Body # (required)" required/>
                                        </li>
                                        <li>
                                          <input id="part" name="part" class="text" placeholder="Part # (optional)" />
                                        </li>
                                        <li>
                                          <input id="description" name="description" class="text" placeholder="Description of Part (required)" required/>
                                        </li>
                                        <li class="buttons">
                                          <input type="submit" name="imageField" value="submit" class="send" />
                                          <!--<input type="image" name="imageField" id="imageField" src="images/sub.png" class="send" />-->
                                          <div class="clr"></div>
                                        </li>
                                      </ol>
                                    </form>
                </div>

Open in new window

0
Comment
Question by:Nicholas_BlueStar
  • 2
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39696179
in your stylesheet give the form a specific width and margin:auto

That will center it in the parent tag.  If you want is centered in the page, then give the parent a width of 100%.



Cd&
0
 

Author Comment

by:Nicholas_BlueStar
ID: 39696213
you are talking about my style.css right?

How/where do I put in the width and margin:auto?

Here is my style.css

 

* { border:0; margin:0 auto; padding:0; outline:none; }
body { width:100%; margin:0; padding:0; font:normal 12px/150% "Liberation sans", Arial, Helvetica, sans-serif; background:#f6f6f6;}
.body_pattern { background:#f6f6f6; }

/* TEXT EDITOR */
p { line-height:150%; padding:5px 0; color:#a0a0a0; }
p.white { color:#fff;}
a { text-decoration:none; }

h1 {  color:#ffffff;}
h1 small { color:#c3c1c1; font-size:18px; text-transform:none;}

h2 { color:#000000; font-size:14px; padding:10px 0;   }
a.colbox { display: block;}
a h2 span { text-decoration:none; color:#fff; font-size:14px;text-transform: uppercase;}
a:hover h2 span { color:#fff; }

h2.op { color:#000000;  padding:0; margin-top:50px; width:940px; margin-bottom:10px;}
h2.op a{background:#fec223; padding:2px 6px; color:#000!important; text-decoration:none; float:right; font-size:12px!important;}
h2.op span {  color:#fec223;  padding:10px 10px 10px 0; margin:0;  }

h3 { font-size:12px; color:#ffffff;}
a h3 span { text-decoration:none; color:#000000; }
a:hover h3 span { color:#1d5682; }
h3 a {
    -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;
}
h3 a:hover{color:#317BB5!important;}

input, select, textarea { border: none;color:#404040; font-size:12px;  font-family:Arial, Verdana, Helvetica, sans-serif; }
input.required { width: 60%; float: left; border: none; height: 30px; background: #fff; }
input.button { background: #1d5682; color: #fff;  width: 37%; float: left; height: 30px; cursor: pointer; }
/* responsive image */
img {  }
@media \0screen {
	img { width: auto; /* for ie 8 */ }
}

/* IMG  */
a.pic {  position: relative; padding:0; margin:0;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.margin_right { margin:0 20px 0 0; }
a.pic img.h { position :absolute; padding:0; top:-1px; bottom:0; left:1px; visibility:hidden; }
a.pic:hover { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
-moz-opacity: 0.7; 
-khtml-opacity: 0.7; 
opacity: 0.7; }



a.pic h3 { margin:15px 0 5px 0;}

/* CONTENT */
.body_res { background:none; margin:0; padding:0; max-width:100%;  }
.bg_white{background:#fff;}
.brd{border-bottom:4px solid #87b165;}
.main_resise { margin:0 auto;  
              -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;   
        
}


/* header */
.preheader { padding:0; margin:0 auto; color:#333333; position:relative; z-index:9999;  margin:0 auto;  
             width: 100%; background: url(../images/dot.png);}
        
.preheader.prefooterg {border-top: none;}
.header { padding:0; margin:0; color:#333333; position:relative; z-index:9999; }
.header_resise {background: #00477b; border-top: 3px solid #2a699a;border-bottom: 3px solid #2a699a; margin: 0 auto;}      
.nav_panel {  }

/* logo */
.logo {
	width: 375px;
	font-size: 30px;
	line-height: 100%;
	text-transform: none;
	font-weight: bold;
	float: left;
	margin-bottom: 5px;
	margin-left: 10px;
	margin-right: 0;
	margin-top: 5px;
}
.logo span {color: #b9c562!important; font-weight: bold!important;}
.logo a { color:#595959; text-decoration:none; font-weight: bold; }
/* RSS_blog */
.RSS_blog {  padding:0; float: left; margin-top: 15px;}
.RSS_blog a { text-align:right; display:inline;}
.RSS_blog img { margin:0 0px 0 3px; }
/* Widget text */
.header_right_text { line-height:13px; font-size:11px; display:block;}
.header_right_text span { display:block;}
/* img */
img.rss1 { background:url(../images/f1.png) no-repeat; width:32px; height:32px; 
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss1:hover { background:url(../images/f1_a.png) no-repeat; width:32px; height:32px;}
img.rss2 { background:url(../images/f2.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss2:hover { background:url(../images/f2_a.png) no-repeat; width:32px; height:32px;}
img.rss3 { background:url(../images/f3.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss3:hover { background:url(../images/f3_a.png) no-repeat; width:32px; height:32px;}
img.rss4 { background:url(../images/f4.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss4:hover { background:url(../images/f4_a.png) no-repeat; width:32px; height:32px;}
img.rss5 { background:url(../images/f5.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss5:hover { background:url(../images/f5_a.png) no-repeat; width:32px; height:32px;}
img.rss6 { background:url(../images/f6.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss6:hover { background:url(../images/f6_a.png) no-repeat; width:32px; height:32px;}
img.rss7 { background:url(../images/f7.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss7:hover { background:url(../images/f7_a.png) no-repeat; width:32px; height:32px;}


/* content */
.content { margin:0 auto; width:100%; position:relative; margin-top:0px; z-index:999; background:#ffffff;}
.content1 { margin:0 auto; width:100%; position:relative; margin-top:0px; z-index:999;}
.sep{height:3px; background:url(../images/sep.png) center center no-repeat; margin:40px 0 -20px 0; opacity:0.5;}
/* content_text */
.content_text { font-size:18px;line-height:1.6em; padding:20px 0; margin:0 0px;  border-bottom: 3px solid #3ca0db;}
.content_text h1 { display:block; padding:0 10px; margin:0 2%; text-align:center; color: #3ca0db!important;}
.content_text span { display:block; padding:0 10px; margin:0 2%;}
.content_text small { font-size:14px; color:#a6a6a6; display:block; }
.content_text small span { display:inline; font-size:14px; color:#a6a6a6; margin:0; padding:0; }
.content_text img { float:right; margin:0; padding:0; height:50px; }
.content_text img.button_1 { background:url(../images/button_text_hover.png) no-repeat; }
.content_text img.button_1:hover { background:url(../images/button_text.png) no-repeat; }
/*social*/
/*img_hover_box_r_plus*/
.img_hover_box.pic { display: block; position: relative; }
.img_hover_box.pic .img_hover_overlay { position: absolute; top: 0; left: 0; visibility:hidden;  border:none; width:100%; height:100%; padding:0;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
.img_hover_box.pic:hover .img_hover_overlay { visibility:visible; }
.img_hover_box.pic .img_hover_overlay2 {background: #b9c562; position: absolute; top: 0; left: 0; visibility:hidden;  border:none; width:100%; height:100%; padding:0;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
.img_hover_box.pic:hover .img_hover_overlay2 { visibility:visible; background: #b9c562;}

.img_hover_box.pic .r_plus { position: absolute; bottom: 60px; left: 50%; visibility:hidden;  border:none;  margin:0;}
.img_hover_box.pic .r_plus:hover {opacity:1;}
.img_hover_box.pic:hover .r_plus { visibility:visible; }

.img_hover_box.pic .img_hover_overlay { background:url(../images/img_overlay.png) repeat;}
.img_hover_box.pic .img_hover_overlay2 { background:#b9c562 url(../images/img_overlay.png) repeat;}
.img_hover_box.pic .r_plus { background:url(../images/img_hover.png) no-repeat;}
.img_hover_box.pic .r_plus.pos_right { background:url(../images/img_hover_href.png) no-repeat;}

.img_hover_box.pic .r_plus {height:40px; width:40px; margin:-12px 0 0 -12px; }
.img_hover_box.pic .r_plus.pos_left {margin-left:-8px; }
.img_hover_box.pic .r_plus.pos_right {margin-left:2px; }

/*Slider*/
.sliderwrapper {height: 291px; width: 100%; margin: 0 auto;}
.now_slider {position:absolute; z-index:99; padding-top: 0px; margin-top: -105px; width: 100%;}
.home_text { max-width:100%;  margin-top:20px; text-align: center; text-transform: none!important;}
.home_text h1 { padding-bottom:10px;}
.home_text p {font-size: 12px;}
hr {margin-top: 20px; color: #e6e6e6; background: #e6e6e6; border-top: 1px solid #e6e6e6;}

.after_slder { background: url(../images/middlebg.png);}

/* BLOG PAGES */
.main_content {position: relative; width:940px; margin:0 auto; padding:0; max-width: 99%;}

/*now_page*/
.now_page{width:100%; background:url(../images/dot.png); -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;      border-top: 10px solid #eaeaea;  border-bottom: 4px solid #eaeaea;}
.now_page_res {   margin:0 auto; text-align:center; color:#fff; font-size:12px; position:relative; z-index:100;  }
.now_page_res h1{padding: 20px 0 0px 0; text-transform: uppercase; font-weight: lighter; }
.now_page_res h1 span {color:#00477b!important;}
.now_page_res p {padding-bottom: 30px; color: #c2c2c2;}
.now_page_res .social{ background:#87b165; min-height:50px;  text-align:right; padding-top:25px;}
.now_page_res .tit{color:#fffffe; font-size:18px; font-weight:bold; font-style:normal; margin-bottom:10px;}
h2.title{background:url(../images/bar.png) center repeat-x;;  padding-left:0px; margin: 20px 55px 20px 0; }
h2.title span { display: inline-block; padding: 6px 20px 6px 0; color: #535353; background: #fff; font-weight: lighter;}
h2.title2{background:url(../images/bar.png) center repeat-x;;  padding-left:0px; margin: 20px 0px 20px 0; }
h2.title2 span { display: inline-block; padding: 6px 20px 6px 0; color: #535353; background: #fff;font-weight: lighter;}
/* left_side */
.side_full { width:97%; float:right; margin:2% 1.5%; }
.side_big { width:64%; float:right; margin:2% 0 2%  }
.side_small { width:30%; float:left; margin:2% 0 2%  }

.side_small .content { padding:0;}

/* ul li */
.side_small ul { list-style:none; margin:10px 0; padding:0; }
.side_small ul li { padding:5px 10px 5px 0px; margin:3px 0; font-size:11px; border-bottom:1px solid #f1f1f1; color:#333; }
.side_small ul li a { color:#15acf2; display:block; }
.side_small ul li a:hover { color:#414141; }


/* .right_side_big.l { float:left; } */
/* .right_side { padding:10px 18px; } */

/* coment */
.coment1 { overflow:hidden; margin:3% 0 0 1%; border-top:1px solid #c8c8c8; padding-top:20px; }
.coment2 { overflow:hidden; margin:3% 0 0 20%; border-top:1px solid #c8c8c8; padding-top:20px; }

/* center_colums  */
.columns { margin:0px auto 0 auto; padding:0; }
.columns.margin_board { margin:0 2%; width:96%;}
.colums_box { text-align:left; width:240px; margin:0 10px 0 0; padding:0; float:left; background:#ffffff;}
.colums_box a h2{ padding:0 0 0px 0px; padding-top: 15px; color: #fff;}
.colums_box.last { text-align:left; width:240px; margin:0 0 0 0; padding:0;}
.colums_box.project { text-align:left; width:219px; margin:20px 28px 0 0; padding:0; float:left; }
.colums_box.project:hover{border-bottom:1px solid #fec223;}
.colums_box.project.last { text-align:left; width:219px; margin:20px 0 0 0; padding:0; float:right; }


.colums_box.text_left { text-align:left; }
.colums_box.text_left h2, .colums_box.text_left p { }
.colums_box p.more_bg { padding:15px 0; border:1px solid #f0f0f0; border-top:0; background:#fcfcfc;}
.colums_box:hover p.more_bg  { background:#f0f0f0; }
.col4{width:25%; float:left;}
.col4:hover{}
.col4.last{ margin-right:0; float:right;}
.col4 .tit { padding:10.5% 2% 1% 2%;}
.col4 a h2.ico1{background:url(../images/ico1.png) center left no-repeat; padding-left:35px;}
.col4 a h2.ico2{background:url(../images/ico2.png) center left no-repeat; padding-left:35px;}
.col4 a h2.ico3{background:url(../images/ico3.png) center left no-repeat; padding-left:35px;}
.col4 a h2.ico4{background:url(../images/ico4.png) center left no-repeat; padding-left:35px;}
.col4 a h2:hover{color:#87b165!important;}
.col4 .col_text{padding:5px 20px 25px 10px; font-size:12px; line-height:22px;}
.col4 .col_text p{ color:#a9a9a9;}
.col2{float:left; width:49%; margin:0% 2% 2% 0; background:#fff; }
.col2.last{ margin:0% 0% 2% 0;}
.col2 .tit{border-bottom:1px solid #e6e6e6; padding:15px 20px 10px 20px;}
.col2 .col_text{padding:2.5% 2% 2% 2%;}
.col2 a h1{background:url(../images/tit_bg_big.png) center left no-repeat; padding-left:20px; text-transform:none;}
/*latest work*/
.l_w_item{float:left; width:45%; margin-right:10px;}
.l_w_item p {margin-bottom:20px; font-size:11px;}
.l_w_item h3 {font-weight:normal; margin-top:20px; margin-bottom:10px;}
.butt{background:#a8be0f; border-radius:2px; color:#fff!important; padding:4px 10px;}
h2 img { position:relative; top:0px; padding-right:0px;}
/*item_features*/
.feat_item{padding-left:70px;}
.feat_item p {line-height:22px;}
.item1{background:url(../images/service.png) center left no-repeat;}
.item2{background:url(../images/service2.png) center left no-repeat;}
.item3{background:url(../images/service3.png) center left no-repeat;}

/* colums_box */
.bluecap {background: #00477b; width: 100%; height: 50px; color: #fff;}
.colums_box.no_bg { border:none; text-align:center; width:23%; margin:0% 2.6% 0% 0;  float:left; }
.colums_box.no_bg.last {   margin:0% 0% 0% 0;  float:left;}
.colums_box.no_bg p { color:#747474; font-size:12px; margin-top: 90px;  padding-bottom: 15px;}
.colums_box.no_bg:hover p{color: #fff;}
.colums_box.no_bg:hover .bluecap {background: #2a699a;}
.colums_box.no_bg:hover a h2 span {color: #fff!important;}
.colums_box.no_bg img {
    margin-bottom: 20px;
    -webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
.colums_box_1  { background: #fff url(../images/h1.png) 78px 65px no-repeat;}
.colums_box_1:hover  { background: #317bb5 url(../images/h1a.png) 78px 65px no-repeat;}
.colums_box_2 { background:  #fff url(../images/h2.png) 78px 65px no-repeat;}
.colums_box_2:hover { background: #317bb5 url(../images/h2a.png) 78px 65px no-repeat;}
.colums_box_3 { background: #fff url(../images/h3.png) 78px 65px no-repeat;}
.colums_box_3:hover { background: #317bb5 url(../images/h3a.png) 78px 65px no-repeat;}
.colums_box_4 { background: #fff url(../images/h4.png) 78px 65px no-repeat; }
.colums_box_4:hover { background:#317bb5 url(../images/h4a.png) 78px 65px no-repeat;}

/* content_blog */
.content_blog { padding:0; }
.content_blog ul { list-style:none; }
.content_blog li { background:url(../images/ul_li_body.png) left no-repeat; padding:2px 0 2px 15px; }
.content_blog li a { font-weight:bold; font-style:italic; color:#8f8f8f; font-size:11px; }
.content_blog li a:hover {color:#db7641;}

/* prefooter */
.prefooter {  padding:0; margin:0; max-width:100%;  margin-top:0px; background: #1d5682; border-top: 1px solid #d9d9d9;}
.prefooter_resise { margin:0 auto; padding: 40px 0;  
 -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;  }
.prefooter h3 {padding:0px 0px 20px; margin-bottom:10px;  color: #fff!important; font-size: 18px!important; text-transform: uppercase; font-weight: lighter;}
.prefooter h3.log{font-size:30px!important;}
.prefooter h3.log span{color:#fec223;}
.prefooter p { color:#a9a9a9; font-size:12px; line-height:1.5em; padding:0px 0 5px; }
.prefooter p span{color:#afafaf; font-size:12px;}
.prefooter a { color:#25a9ff;  }
/* Flickr */
.widget_flickrRSS { }
.widget_flickrRSS img { border: 0; background:#484848; text-align: center; margin:0px 7px 7px 0; width:60px; height:60px; }
.widget_flickrRSS img.last { margin:7px 0; }
.widget_flickrRSS img:hover {  }
/* footer */
footer { color:#aecae0; font-size:11px;  text-align:left;; padding:20px 0; margin:0; background:#00477b; width: 100%; margin: 0 auto;}
footer a { color:#aecae0!important; text-decoration:none; }
/*-------------------------------------*/
/* search */
.selectnav {display: none;}
.search { margin:7px 0px 0px 0;  padding:0px 0 0 0; width:auto; height:30px;  margin-right: 0px;  width: 160px; margin-top: 7px; padding:5px 0px 5px 0;  float:right;}
.search form { padding:0; width:auto; }
.search label { padding:2px 10px 0 0;}
.search span { display:block;  padding:0;  background:url(../../images/search_bg.png) no-repeat left top; }
.search input.editbox_search {  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;padding:0px 0px 0px;  width:100%; height:30px; font-size:12px; line-height:16px; color:#b4b4b4; background: #fafafa url(../images/searchicon.png) right center no-repeat;  padding-left: 5px; box-sizing: border-box;  -moz-box-sizing: border-box;  -o-box-sizing: border-box; -webkit-box-sizing: border-box;}
.search input.button_search {  padding:0; border:none; float:left; }

a.fl { margin:10px 10px 10px 0; float:left; padding:0; }
/* img */
img.fgh { background:#3d3d3d; padding:4px; margin:0 3px 0 0; float:left; }
img.fgh:hover { background:#e05d1f; }

/*== Sitemap Page Template ==*/
.sitemap-page { line-height: 160%; }
.sitemap-page h4 { margin-bottom: 5px; font-weight: normal; }
.sitemap-page h3 { padding-bottom: 10px; margin-bottom: 15px; }
.sitemap-page ul { margin-bottom: 20px; }
.sitemap-page ul li { margin: 1px 2%; }
.sitemap-page ul li ul { margin: 1px 2%; }
.sitemap-page ul li a { color: #656464; }
/*== Timeline Page Template ==*/
#archives { padding: 10px 0 0; line-height: 160%; }
#archives a { font-style: normal; color: #656464; }
#archives .archives_list { border-left: 1px solid #e1e1e1; list-style: none; margin: 0 0 15px 15px; }
#archives .archives_list li { margin: 2px 0; clear: left; padding-left: 24px; font-size: 0.9em; font-style: normal; list-style: none; }
#archives .archives_list .date { color: #727272; width: 20%; font-style: normal; display: inline-block; vertical-align: top; }
#archives .archives_list .linked { width: 50%; display: inline-block; vertical-align: top; }
#archives .archives_list .comments { width: 20%; display: inline-block; vertical-align: top; }
#archives .archives_list .comments a { color: #7e7e7e; font-size: 0.9em; font-style: italic; text-decoration: underline; padding-left: 13px; }
#archives .archives_list .comments a:hover { text-decoration: none; }
h3.archive_year { font-weight: normal; font-size: 1.4em; color: #585858; margin-top: 0; padding: 0px; }
/*== Breadcrumb ==*/
.breadcrumbs { padding: 10px 0; width: 100%; overflow:hidden; font-size: 12px; }
.breadcrumbs a { font-size:12px; color:#ffffff;}

/*- Message -*/
.message div { margin:0 0 18px; }
.message input { padding:9px 15px; width:90%; border: 1px solid #ddd; color:#000; }
.message textarea { height:114px; overflow:auto; padding:9px 15px; width:90%; border: 1px solid #ddd; }
.message .submit { float:left; }
.message .submit input { background:#fff; width:128px; height:32px; font-weight:bold; color:#000; }
.message .btn { padding:0; width:auto; }
.message .notice { color:#a4a4a4; float:right; font-style:italic; padding:10px 0 0; }

/* contact-us */
.contact_us div { padding:3px 5px;}
.contact_us div input[type=text] { width:70%;}
.contact_us div textarea { width:95%; height:70px;}

/*- Post Comments -*/
.post-comments h2 { padding-top:10px; }
.post-comments .fl { width:80px; padding:0 10px 0 0; }
.post-comments .fr { width:100%; margin-right: 0; }
/* post-commets */
.post-commets { padding:2px 0 0 0; margin:5px 0 0 0; float:right; width:42px; height:28px; text-align:center; }
.post-commets a { color:#fff; font-size: 18px; text-decoration:none; }

/*- Box2 -*/
.box2 { background:#f9f9f9; border:1px solid #ddd; width: 480px; height:1%; margin:0 0 20px; padding:10px; min-height:100px; }
.box2.alt { background:#FFFFFF; }
.box2.alt { background:#FFFFFF; }
.comm-name, .comm-date { line-height:20px; font-size: 80%; }
/*=== Sub Columns ===*/
.cols { float:left; width:45%; }
.cols:first-child { padding:0 15px 0 0; }
.col ul li { border-bottom:1px solid #EAEAEA; clear:both; padding:8px 0 8px; }
.col.popular-posts li { border-bottom:none; padding:0px 0 0px; }
.col.popular-posts li { min-height:65px; }
.col ul li img { float:left; margin:0 10px 0 0; max-height:58px; max-width:58px; border:1px solid #EAEAEA; padding:4px; background:#fff; }
.col.widget_recent_entries { float:right; }
.col span { float:left; width:65%; }
.cols ul { list-style: none; }
.col ul li a:hover { text-decoration:underline; }

/* Global */
.clr { clear:both; height:0; margin:0 auto; padding:0;  overflow: hidden;}
.bg { clear: both; border-bottom:1px solid #f1f1f1; margin:20px 0; padding:0; height:1px; }
.left, .fl { float:left; }
.right { float:right;}
img.fl { float:left; margin:5px 15px 0 0; }

a.post{background:url(../images/arr_post.png) center left no-repeat; padding-left:10px; color:#a9a9a9!important;}
a.post span{padding-left:10px; color:#fec223;}

a.getstarted {font-size: 20px; color: #fff!important; padding: 10px 40px; background: #85af64; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; margin: 20px 0; display: inline-block;}


.feelfree { float: left; color: #7d7d7d; font-size: 12px; margin-top: 22px; margin-bottom: 20px; text-transform: uppercase;}
.feelfree span {color: #b9c562;}



.content_full_size { width:100%;  padding-bottom: 40px;}

/*sub_page_blog*/
.post h3 { padding-top:15px; padding-bottom:0; margin-bottom:0; font-size:16px; font-weight:normal; color:#414141; }
.post h3 a,
.post h3 a:hover {  }

.post h2 {margin-bottom:0; }
.post h2 a{ font-weight:bold;}

.post .pic { margin:0 0 20px; }
.post_detail { color:#a4a4a4; font-style:normal; padding:0; font-size:11px; font-weight:normal; margin:5px 0 5px 0; }
.post_detail a { font-size:11px; color:#a4a4a4; font-weight:bold; font-style:normal; text-decoration:none; }
.post_detail a:hover { font-size:11px; color:#a4a4a4; text-decoration:none; }
.post_date {  color:#fff; font-style:normal; font-weight:normal; font-size:18px; float:left; text-align:center; padding:8px 15px; background:#e25e54; border-top:3px solid #353535; margin:0 20px 20px 0; display:none;}
.post_date span { color:#fff; font-style:normal; font-weight:normal; font-size:12px; display:block; margin-top:5px; padding:5px 3px 0; text-align:center; border-top:1px solid #fff; }


.post_detail a.read_more:hover { color:#e25e54; font-style:normal; font-weight:normal; }

/*coments*/
#coment { overflow:hidden; margin:10px 0; padding-bottom:10px; }
#coment img { float:left; margin-right:20px; }
#coment h3 { margin:0; padding:0; }
#coment .podpis {  margin:5px 0;  }
#coment .podpis a { margin-left:10px; }
#coment2 { overflow:hidden; margin:10px 0 00px 50px;  padding-bottom:10px; }
#coment2 img { float:left; margin-right:20px; }
#coment2 h3 { margin:0; padding:0; }
#coment2 .podpis {  margin:5px 0 0 0;  }
#coment2 .podpis a { margin-left:10px; }
#coment3 { overflow:hidden; margin:10px 0 00px 100px;  padding-bottom:10px; }
#coment3 img { float:left; margin-right:20px; }
#coment3 h3 { margin:0; padding:0; }
#coment3 .podpis {  margin:5px 0 0 0;  }
#coment3 .podpis a { margin-left:10px; }
#coment3 .lin { border-top:1px solid #c8c8c8; margin-top:20px; }

/*form Contact_us*/
#contactform_main { margin:0; padding:5px 0; }
#contactform_main * { color:#8b8b8e; }
#contactform_main ol { margin:0; padding:0; list-style:none; }
#contactform_main li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform_main li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform_main label { margin:0; width:60px; padding:6px 0; text-transform:none; float:left; font-weight:normal; color:#8b8b8b; }
#contactform_main label .ness { color:#656566; }
#contactform_main label span { color:#8b8b8b; }
#contactform_main input.text { width:55%; border:1px solid #d3d3d3; margin:5px 0; padding:5px 2px; height:16px; background:#ffffff; float:left; font-size:12px; color:#8b8b8e; }
#contactform_main textarea { width:83%; border:1px solid #d3d3d3; margin:4px 0; padding:5px 2px; background:#ffffff; float:left; font-size:12px; color:#8b8b8e; }
#contactform_main li.buttons input {cursor: pointer; padding:2px 10px 4px 10px; margin:10px 0 0 60px; border:0; color:#FFF; float:left; background:#2A699A; font-size:14px; font-weight:bold; }


/*h3.h3_act_href*/
h3.h3_act_href { clear:both; width:100%; text-align:left; display:block; background:none; padding-left:0; height:15px; margin-bottom: 10px;}
h3.h3_act_href a span,
h3.h3_act_href a{ color:#313131; text-decoration:none; font-weight:bold; 
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a:hover span,
h3.h3_act_href a:hover em,
h3.h3_act_href a:hover{color:#317BB5; text-decoration:none;  }
h3.h3_act_href a.h3_href em {font-style:normal;}

h3.h3_act_href a.h3_href {padding:8px 0 12px 40px;}

h3.h3_act_href a.ico_1{background:url(../images/ico.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_2{background:url(../images/ico-02.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_3{background:url(../images/ico-03.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_4{background:url(../images/ico-04.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_1:hover{background:url(../images/ico_a.png) no-repeat left top; color:#19aae3;}
h3.h3_act_href a.ico_2:hover{background:url(../images/ico_a-02.png) no-repeat left top; color:#19aae3;}
h3.h3_act_href a.ico_3:hover{background:url(../images/ico_a-03.png) no-repeat left top;color:#19aae3;}
h3.h3_act_href a.ico_4:hover{background:url(../images/ico_a-04.png) no-repeat left top;color:#19aae3;}

.cols2 {margin-top: 20px;}


h3.blogpost a {font-size: 16px!important; }

h3.blogpost span {margin-top: 5px; display: block; color: #009ceb;}

.bar {width: 100%; background: url(../images/bar.png) repeat-x; height: 10px;}

.fleft50 {
    float: left;
    width: 49%;
}
.fright50 {
    float: right;
    width: 49%;
}

p.date {
    font-size: 10px!important; 
    color: #a9a9a9;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 0 5px 0!important;
}


a.readmore {
    color: #78b312!important;
    text-decoration: none;
    font-size: 12px;
    padding-bottom: 10px;
}

a.readmore:hover {
    color: #78b312!important;
    text-decoration: underline;
    font-size: 12px;
    margin-bottom: 10px!important;
}

p.test {
    display: block;
    background: url(../images/test.png) no-repeat;
    font-size: 12px;
    color: #d1d1d1;
    padding: 30px 20px 30px 60px;
    font-style: italic;
     -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;  
        width: 460px;
        height: 130px;
}

.picfloat {float: left;}
.namefloat {margin-left: 10px; float: left;}
.name {font-weight: bold; color: #484848!important;}

/* footer box */
.prefooter_box:after { clear: both; content: ""; display: block; }
.prefooter_box { width: 100%; margin:0 0 0 0; }
.prefooter_box > div { float: left; vertical-align: top; }
.prefooter_box > div:first-child, .prefooter_box > article:first-child { margin-left: 0; }
.prefooter_box > div:last-child, .prefooter_box > article:last-child { margin-right: 0; }
.pref_box { width:32%; float:left; margin:0 1.3333% 3% 0; padding:0; }
.pref_box.about{margin-right:90px;}
.pref_box.contact{width:150px;}
.pref_box p{color:#aecae0; font-size:12px; }
.pref_box a{color:#5d5d5c!important; text-decoration:underline;}
.pref_box p.bold{font-weight:bold;}
.pref_box .tit {margin-bottom:20px; color:#fff; font-size:18px; margin-top: 30px;}
.pref_box.last {  float:left; margin:0 0 3% 0; padding:0; }
.Flickr { width:20%;  margin:3% 5.3333% 3% 0;}

.menudiv {
    width: 100%;
    border: 1px solid #eaeaea;
    border-left: none;
    border-right: none;
}


/*4cols_gallery*/
.cols44{overflow:visible!important;}
.col44 { width:245px; float:left; padding:0; margin-right:0px; position:relative;  top:0; }
.col44 h3 { position:relative; bottom:0px; margin-bottom:0px;}
.col44 a img { margin-top:0px;}
.col44.last { float:right; margin:0; margin-right:0px;}
.col44.invisible-box { display: none; opacity: 0;  z-index: 1;}
.mask {
    left:0px;
	top:0px;
	background: #b9c562;
		-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	width:100%;
	height:100%;
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	z-index:999;
	position:absolute;
		
	padding:0px;
}
.mask span{
    display: block;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	position: relative;
         text-align: left;
         left: 5%;
         bottom: -140px;
        
}
.mask p{
     display: inline-block;
	color:#fff!important;
	font-size:12px;
	padding-top:0px;
	line-height:20px;
        
        
        position: relative;
         text-align: left;
         left: 5%;
         bottom: -125px;
}
a.info {
	display: block;
	text-decoration: none;
	background: url(../images/ico_link.png) no-repeat;
	position:absolute;
        
	bottom:70px;
	left:5%!important;
	width:30px!important;
	height:30px!important;
	opacity:0.8;
	overflow:hidden;
}
a.info:hover{
	opacity:1;
}
a.link {
	display: block;
	text-decoration: none;
	background: url(../../images/ico_full.png) no-repeat;
	position:absolute;
	bottom:41px;
	left:41%!important;
	width:19px!important;
	height:16px!important;
	opacity:0.8;
}
a.link:hover{
	opacity:1;
}
.pic.img_hover_box:hover{
	cursor:pointer;
}
.pic.img_hover_box:hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

img.bb {border-bottom: 3px solid #b9c562;}

.somebg {
    width: 100%;
    background: url(../images/dot.png);
    padding: 5px 0 40px;
}

.hrenover {
    background: #fff;
    padding: 10px 0;
    margin-top: -5px;
}

.hrenover:hover {
    background: #00477b;
}

.hrenover:hover h3 a {
    color: #fff!important;
}

.hrenover:hover p {
    color: #fff!important;
}


/* prefooter */
.prefooter { padding:0px 0; margin:0 auto; }
.prefooter h2 { font-size:14px; color:#fff; padding:15px 0; margin:0; }
.prefooter p { color:#fff; font-size:12px; line-height:1.5em; padding:5px 0; }
.prefooter a { color:#c1c1c1; font-style:italic; }
.pref_blog { width:23%; float:left; margin:0px 15px 5px 0; padding:0; }
.pref_blog.last { margin:0px 0 5px 0; }
a.fl { margin:10px 10px 40px 0; float:left; padding:0; }


#mailform-subscribe {
	color: #fff;
	padding: 20px 15px;
	text-shadow: 1px 1px #111;
}
#mailform-subscribe input {
	font-size: 13px;
	margin-bottom: 10px;

	border-radius: 6px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border:1px solid #cccccc;
}
#mailform-subscribe input.email {
	background: #fff url(../images/mailform-subscribe.png) no-repeat 10px center;
	padding-left: 32px
}
#mailform-subscribe input[type="submit"] {
	width: 73px;
	margin:0px 0 0 0px;
	background-color: #1D5682;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	border-radius: 0px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	color: #ffffff!important;
	cursor: pointer;
	display: inline-block;
	moz-border-radius: 0px;
	moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	padding: 5px 4px 5px 4px !important;
	position: relative;
	text-decoration: none;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
	webkit-border-radius: 0px;
	webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	font-size: 11px;
	border-radius: 5px;
	font-weight: normal;
	line-height: 1;
        height: 30px;
}
#mailform-subscribe input[type="submit"]:hover {
	
	color: #fff;
}
#mailform-subscribe input[type="submit"]:active {
	top: 1px
}

.content_page {
    background: #fff;
}

.content_full_size { width:100%; }
/*centercol*/
.centercol { width:65%; float:left; padding:0; }
.centercol.last {float:right;}
/*sidebar*/
.sidebar {width:30%; float:left;  }
.sidebar.last { float:right; }


.p404 h2{ font-size:50px!important; color:#e25e54!important;  text-align:center; margin:0px auto 0; line-height:1.2em;  background:none;padding-top: 40px; }
.p404 h2 span{ font-size:22px;  color:#7D7D7D; text-align:center; margin:10px auto 0; line-height:1.2em; }
.p404 p,.p404 a{ font-size:24px; color:#B4B4B4; text-align:center; padding:40px 0 60px; line-height:1.2em; }
.p404 p span { font-size:24px; display:block; text-align:center; margin:20px auto; line-height:1.2em; }
.p404 h2,
.p404 .btn { margin-bottom:0; }
.p404 .content_box { margin-bottom:40px; }

.pic.fl { margin:5px 20px 10px 0; }
.pic.fr { margin:5px 0 20px 10px; }
.fl { float:left; }
.fr { float:right; }

.h2_background {position:relative; padding-top: 30px;}
.h2_background h2 { color: #515151!important; width:100%; margin:0px 0 20px 0; padding:0;}
.h2_background h2 span{ padding:10px 20px 10px 0; }

.img_hover_box.pic a img.h2 { position: absolute; top: 0; left: 0; visibility:hidden; background:rgba(0,0,0,0.5) url(../images/img_z.png) center center no-repeat; border:none; display:none; width:100%; height: 100%; }
.img_hover_box.pic a:hover img.h2 { visibility:visible; display:block; }

/*3cols*/
.cols3 { margin:0px auto 0; width:100%; padding:0; text-align:left; }
.col3 { width:30%; margin:0 35px 0 0; float:left; padding:0;  }
.col3 p { margin:0; padding:0; }
.col3.last { float:right; margin-right:0; }

.tangodiv {float: left;margin-left: 28px;}

/*4cols*/
.cols4p { margin:0 auto; width:100%; padding:0; text-align:left; }
.col4p { width:24%; margin:0 12px 0 0; float:left; padding:0;  }
.col4p.last { float:left; margin-right:0; }
.cols4p.bg {background:url(../images/cols4_bg.png) repeat-y top left; padding:10px 0;}
.center_side { margin-top:20px; padding-top:20px; background:url(../images/border.png) repeat-x left bottom; padding-bottom:40px;}
.center_side h2 { display:block; float:left; }

.margin {padding-top: 20px;}

.pluginConnectTextDark {color: #fff!important;}
.nav_panel .tinynav { display:none; }
.slidertop { margin-top: -113px; }
.slidertop1 { margin-top: -119px; }
.sliderwraperheight { height: 500px; }
#slider-wrapper object { width: 100%; }
.pic img { max-width: 100%; height: auto; }
 /* special */
.right { float: right; }
.container #coment img { width: auto; }
.container #coment2 img { width: auto; }
.container #coment3 img { width: auto; }
.two { display: none; }
.content_resize.adder .col2.last { float: right; }
.change img {
	width: 227;
	height: auto;
}
.change h1 { color: #fff!important; text-align: left; }
.change.some h1 span { display: inline; color: #fff;}
.change.some h3 { color: #fff!important; }
.change.some h2 { margin-top: 3px!important; text-align: center!important; font-size: 20px!important; line-height: 30px!important; font-weight: bold!important; color: #fff!important; }
.change.some h1 {
	margin-top: 3px!important;
	text-align: center!important;
	font-size: 30px!important;
	line-height: 30px!important;
	font-weight: bold!important;
	color: #fff!important;
}
.change.some .col2 { width: auto; float: none; }
.change.some .col3 { width: auto; float: none; }
.change.some .col4 { width: auto; float: none; }
.change.some .header_row_2 h2 { color: #474747!important; }
.change.some  h1.left { text-align: left!important; }
.product img { width: 100%; height: auto; }
.code { padding: 0 12px; width: auto; }
.code h1 { padding: 20px 0 10px 20px; text-align: left; font-size: 24px; color: #fff!important; font-weight: bold; }
.code h3 { font-weight: bold!important; }
.code img { width: 100%; height: auto; }
#ticker1 .tweet_list.tweet_even, #ticker1 .tweet_list, #ticker1 .tweet_list .tweet_even { background: none; color: #fff; }
.column_2 .col2 { background: none; }
.dc_pricingtable05 ul.borderright, .dc_pricingtable05 ul.borderleft, .dc_pricingtable05 ul.borderleft, .dc_pricingtable05 ul.borderleft, .dc_pricingtable06 ul.borderright, .dc_pricingtable06 ul.borderleft { list-style: none; }

Open in new window

0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39696232
While adding margin:auto will centre an element, the problem you will encounter is that the inputs in your form are set to a width of 55%, so if you set a width to the form, your inputs will be 55% of that width. As well as adding a width and margin to your form, you'll need to reset the width of your form elements:

//style.css - line 483
#contactform_main { width: 350px; margin: 0px auto; }

//style.css - line 491
#contactform_main input.text { width: 344px; } 

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39696235
@Nicholas_BlueStar - there's really no need to paste your entire CSS file - we can see it on your site :)
0
 

Author Comment

by:Nicholas_BlueStar
ID: 39696312
haha shoot, sorry!

Im a novice at this stuff for sure.

After your help I have decided to just change 55% to 90% to make it look better within the page.

Thanks for all the help!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question