Hi All,

I'm new to this forum as you can see, i've been a hobbiest site builder for a while mainly using joomla templates, but i have started looking at some more personalised customisations.

I am trying to embed a domain search form inside a parallax wrap, the div i am looking at positioning is dm-reg:


The existing code for the parallax div is:

Code:
<div class="gk-parallax gkp-background-top" data-area="0" data-height="808">
<div class="gk-parallax-wrap">
<div class="dm-reg">
<form action="http://detorr.co.uk/hosting/domainchecker.php" method="post">
<input type="hidden" name="direct" value="true" />
Domain: <input type="text" size="50" name="domain" /> <select name="text">
<option>.co.uk</option>
<option>.org.uk</option>
<option>.me.uk</option>
<option>.uk</option>
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.eu</option>
<option>.biz</option>
</select>
<input type="submit" value="Go" size="75" />
</form>
</div>
<div class="gkp-element gkp-cloud_back1" data-start="55%,53%" data-end="65%,45%">Cloud back I</div>
<div class="gkp-element gkp-cloud_back2" data-start="38%,53%" data-end="45%,50%">Cloud back II</div>
<div class="gkp-element gkp-birds" data-start="50%,50%" data-end="50%,75%">Birds</div>
<div class="gkp-element gkp-ballon2" data-start="70%,55%" data-end="88%,65%">Ballon II</div>
<div class="gkp-element gkp-cloud_front4" data-start="0%,90%" data-end="0%,75%">Cloud front IV</div>
<div class="gkp-element gkp-island" data-start="50%,60%" data-end="50%,130%">Island</div>
<div class="gkp-element gkp-crane1" data-start="60%,24%" data-end="60%,70%">Crane I</div>
<div class="gkp-element gkp-crane2" data-start="0%,66%" data-end="10%,135%">Crane II</div>
<div class="gkp-element gkp-crane3" data-start="95%,60%" data-end="95%,105%">Crane III</div>
<div class="gkp-element gkp-ballon1" data-start="22%,35%" data-end="80%,125%">Ballon I</div>
<div class="gkp-element gkp-ballon3" data-start="90%,35%" data-end="90%,95%">Ballon III</div>
<div class="gkp-element gkp-cloud_front1" data-start="90%,85%" data-end="90%,135%">Cloud front I</div>
<div class="gkp-element gkp-cloud_front2" data-start="25%,63%" data-end="25%,105%">Cloud front II</div>
<div class="gkp-element gkp-cloud_front3" data-start="10%,85%" data-end="10%,105%">Cloud front III</div>
</div>
<div class="gkp-responsive gkp-tablet">Tablet view</div>
<div class="gkp-responsive gkp-mobile">Mobile view</div>
</div>
Now, i would like to position the domain look up form horizontally and vertically central regarding screen size the site is being viewed on (although i would like to be able to tweak the vertical position once the code is in place).

The css i have so far is:
Code:
/*=======Begin domain registration in header=============*/
.dm-reg {
  position: absolute;
  top: 55%;
  left: 20%;
  height: 100%;
  width: 60%;
  z-index: 10;
background-color:rgba(0, 0, 0, .5)
}
.dm-reg input[type=text] {padding:5px; border:2px solid #ccc; 
-webkit-border-radius: 5px;
    border-radius: 5px;
}

.dm-reg select[name=text] {padding:5px; border:2px solid #ccc; 
-webkit-border-radius: 5px;
    border-radius: 5px;
}


.dm-reg input[type=submit]{
padding:5px; 
-webkit-border-radius: 5px;
    border-radius: 5px;
    width:75px;
text-align:center;
float:right;
}
Now this works to an extent but i am concerned that the position of the form will become uncentred depending on browser/screensize etc. What is the best method to ensure that this form stays in position regardless of viewing platform?

Also, the size attributes in the form do not validate, is width the equivalent in css?

Detorr Hosting & Web Services

Thank you for your advice and being patient.

Best Regards
Donna