CSS Alignment fail and Div height wrong

Question

Example 1: I'm trying to center align various layers for a stacked logo effect on my page. When I can actually get the lower z-index layer to display properly the alignment is all out of place.

Example 2: I started over trying to debug everything and finally got all the alignments correct, but now the lower z-index layer won't expand to the correct dimensions to show the background.

Main Page HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DaellusKnights</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Christopher Waguespack" />
    <meta name="robots" content="index, follow" />

    <meta property="og:title" content="DaellusKnights" />
    <meta property="og:description" content="Coming soon! DaellusKnights will be a central hub for all of my various and diverse projects, as well as a community workshop for others to do the same." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://www.daellusknights.com" />
    <meta property="og:image" content="http://i67.tinypic.com/117sp5w.png" />

    <link rel="stylesheet" href="/css/dk-anim.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div class="vertz gears rotating" style="z-index:10;"></div>

<div class="vertz" style="z-index:100;">
    <div class="logo">
        <div><h1>Daellus<br />Knights</h1></div>
        <div class="content">
            <div class="circle stop"></div>
            <div class="circle1 stop"></div>
            <B>coming<br />soon</B>
        </div>
    </div>
</div>



</body>
</html>

Main Page CSS

@font-face {
  font-family: '1979rg';
  src: url('/fonts/1979rg__.eot');
  src: url('/fonts/1979rg__.woff2') format('woff2'),
       url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: "1979rg";
    font-weight: ;
    text-align: center;
    color:rgba(3,79,132,0.75);
    border: 1px solid gray;
}

html {
    height:100%;
}

body {
    background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
    background-size: 100% 100%;

    width:100%;
    height:100%;
}

.vertz {
    position: relative;
    margin: 0px;
    padding: 0px;

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.logo {
    position:relative;
    width:400px;
    top:3px;
    right:3px;

    margin:auto;
    padding-left:3px;
    padding-right:3px;
    padding-bottom:10px;
}

.logo h1{
    font-family: "1979rg";
    font-size:2em;
    font-weight:bolder;
    color: rgb(3,79,132);
    position: relative;
}

.gears {
    width:362px;
    height:362px;
    margin: auto;
    position: relative;

    background:url('/img/spinner-1a.png') no-repeat center;
    background-size:cover;

    z-index: 10;
}

/* =========== Spinner Animation ============== */

@keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

@-webkit-keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

.rotating
    {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
    }

.spinner-1a {
    width: 362px;
    height: 362px;
    position: relative;
}

.spinner-1a:after {
    width: 362px;
    height: 362px;
    position: absolute;
    background: url("/img/spinner-1a.png") no-repeat center;

    -webkit-animation: spinX 20s infinite linear;
    animation: spinX 20s infinite linear;
}

Debug Page HTML

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="debug.css" type="text/css" media="screen" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script src="debug.js" type="text/javascript"></script>
</head>
<body>

    <!-- Debug Mode Header -->
    <div>
        <h1>Debug Mode!</h1>
    </div>

    <!-- Container for BG-Spinner -->
    <div class="vertz layer1 rotating"> >What the fuck?!< </div>

    <!-- Logo and L-spinner -->
<div class="vertz" style="z-index:100;">
    <div class="logo">
        <div><h1>Daellus<br />Knights</h1></div>
        <div class="content">
            <div class="circle stop"></div>
            <div class="circle1 stop"></div>
            <B>coming<br />soon</B>
        </div>
    </div>
</div>

</body>
</html>

Debug Page CSS

@font-face {
  font-family: '1979rg';
  src: url('/fonts/1979rg__.eot');
  src: url('/fonts/1979rg__.woff2') format('woff2'),
       url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: "1979rg";
    font-weight: ;
    text-align: center;
    color:rgba(3,79,132,0.75);
}

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
    background-size: 100% 100%;
}

div {
    position: relative;
}

h1{
    font-family: "1979rg";
    font-size:2em;
    font-weight:bolder;
    color: rgb(3,79,132);
    position: relative;
}

.vertz {
    position: relative;
    margin: 0px;
    padding: 0px;

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer1 {
    width: 362px;
    height: 362x;
    margin: auto;
    position: relative;

    background: url("/img/spinner-1a.png") no-repeat center;
    background-size: cover;

    z-index:10;
}

@keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

@-webkit-keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

.rotating
    {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
    }

.circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7; 
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

Unfortunately, we cannot accept questions in which we are invited to look at links on other people's websites (at a stretch they are OK as a supplementary, but only if they are not needed to understand the question). It is our experience that links break quite frequently, and this causes so much repair work (for volunteers) that we ask question authors not to set up a situation that would give rise to such breakage. — halfer, Jul 17 '18 at 18:32

score 0 · Answer 1 · answered Jul 17 '18 at 18:30

(Posted solution on behalf of the question author).

Turns out I was asking the wrong question. I found the answer here.

Translate and Rotate don't work together as separate functions. One overrides the other. They have to be in one declaration. The link answers it well.

CSS Alignment fail and Div height wrong

1 Answers1