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 1 of 1
  1. #1
    Junior Member
    Join Date
    Nov 2014
    Location
    Leicester
    Posts
    1
    Member #
    40767

    Smile Guidance for positioning a div inside another div?

    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

  2.  


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 09:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com