0

My element "#splashlogo" doesn't seem to want to centre in the body of my document.I have tried positions; absolute, relative, fixed etc. I'm not sure what is happening. It may be something to do with other parts of my code...?

My HTML:

<html><head>

  <meta charset="UTF-8">

  <title></title>

    <link rel="stylesheet" href="css/splashscreenstyle.css">

</head>

<body>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
$(document).ready(function() {
    //hiding initially
    $('.scene').hide();
    //Fade In and delay 2.5 sec then Fade Out
    $('.splashscreenlogo').hide().fadeIn(function() { 
        $(this).delay(2500).fadeOut(function() {
            //Fade In and delay 3 sec then Fade Out
            $('.scene').fadeIn(function() { 
                $(this).delay(15000).fadeOut(function() {
                    //Redirect to any location
                    window.location = 'index.html';
                }); 
            });
        }); 
     }); 
});

window.onload = function() {
  Animate(1);
  Animate(2);
}

function Animate(number) {
  var line = document.getElementById('movingLine' + number);
  var lineLength = line.getTotalLength().toString();
  var lineAnim = document.getElementById('lineAnim' + number);
  line.setAttributeNS(null, 'stroke-dasharray', lineLength + " " + lineLength);
  line.setAttributeNS(null, 'stroke-dashoffset', lineLength);
  lineAnim.setAttributeNS(null, 'from', lineLength);
  lineAnim.setAttributeNS(null, 'values', lineLength + ';0');
}

function fade(number) {
  var line = document.getElementById('movingLine' + number);

  var animation = document.createElementNS(
    'http://www.w3.org/2000/svg', 'animate');
  animation.setAttributeNS(null, 'attributeName', 'opacity');
  animation.setAttributeNS(null, 'to', 0);
  animation.setAttributeNS(null, 'dur', 3.25);
  animation.setAttributeNS(null, 'begin', 10);
  animation.setAttributeNS(null, 'fill', 'freeze');
  line.appendChild(animation);
}


</script>

  <h4></h4>
<div class="scene" style="display: none;">
  <svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
  <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
     <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
  </text>
  <path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20
            c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
  <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>      
   </path>

  <path fill="#859900" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M7.078,20
  c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
  C12.875,32.922,7.078,27.125,7.078,20z">
   <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
    </path>
  </svg>
</div>

<div class="splashscreenlogo" style="display: block;">

</div>

<div class="canvas_container">
    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">

      <g>

        <path id="movingLine1" d="m 20,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">

          <animate id="lineAnim1" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="9.5s" fill="freeze" values="1200.66650390625;0"></animate>

      </path></g>

      <g>

        <path id="movingLine2" d="m 80,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">

          <animate id="lineAnim2" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="10.5s" fill="freeze" values="1200.66650390625;0"></animate>

      </path></g>
    </svg>
  </div>



<div id="splashlogo">
  <img src="logo_splashscreen.png" alt="Splashscreen logo">
  </div></body></html>

My CSS:

/* Demo Styles */
html {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
html body {
  background: url("Splashscreen.png") no-repeat;
  background-size: 100%;
  font: 14px/21px Monaco, sans-serif;
  color: none;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  height: 100%;
  min-height: 100%;
}
html body a, html body a:visited {
  text-decoration: none;
  color: #FFffF;
}
html body h4 {
  margin: 0;
  color: #666;
}

.scene {
  width: 100%;
  height: 100%;
  -webkit-perspective: 600;
          perspective: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.scene svg {
  width: 240px;
  height: 240px;
}
.splashscreenlogo{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  /* height: 100%; */
}
#splashlogo{
  position: absolute;
  background-position: 50%;
  /* top: 50%; */
  /* width: 100%; */
  /* height: 100%; */
}

.canvas_container{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

 .white-line {
   fill: none;
   stroke: white;
   stroke-width: 5%;
 }

Any help would be awesome!

Clarke
  • 47
  • 1
  • 9

0 Answers0