Help: CSS issue/Noobness

Help: CSS issue/Noobness
0
#1

I’M JUST PRACTICING TO HONE THE LITTLE I’VE LEARNED… SHOULDN’T THE WHITE SQUARE ENVELOPE THE ANIMATIONS TOO? IF NOT, HOW?

<!DOCTYPE html>
<html>
<style>
html {
	background-color: gray;
}
body {
	margin:auto;
	font-family: arial;
	width: 940px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}
#page-head {
	font-family: monospace;
	color: black;
}
.wheel {
	width: 200px;
	height: 200px;
	background-color: transparent;
	margin: auto;
	position: fixed;
	border-radius: 50%;
	margin: auto;
	animation-name: rotation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
.wheel-detail {
	width:40px;
	height:40px;
	background-color: orange;
	position: absolute;
	border-radius: 50%;
}
#left-wheel {
	left: 20%;
}
#right-wheel {
	left: 60%;
}
#dt1{
	top: 40px;
	left: 40px;
}
#dt2{
	top: 40px;
	left: 120px;
}
#dt3{
	top:120px;
	left:40px;
}
#dt4{
	top:120px;
	left:120px;
}
@keyframes rotation{
	100%{
		transform: rotate(360deg)
	}
}
</style>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title meta="project">Project</title>
	<link rel="stylesheet" href="css/bootstrap-reboot.min">
	

</head>

<body>
	<h1 id="page-head">Wheel</h1>
	<div class="wheel" id="left-wheel">
		<div class="wheel-detail" id="dt1"></div>
		<div class="wheel-detail" id="dt2"></div>
		<div class="wheel-detail" id="dt3"></div>
		<div class="wheel-detail" id="dt4"></div>
	</div>
	<div class="wheel" id="right-wheel">
		<div class="wheel-detail" id="dt1"></div>
		<div class="wheel-detail" id="dt2"></div>
		<div class="wheel-detail" id="dt3"></div>
		<div class="wheel-detail" id="dt4"></div>
	</div>
	<footer>Powered by me</footer>
</body>
</html>
#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums
markdown_Forums.gif1024x600 194 KB

Also, I moved your question outside the code to make it more visible.

#3

thank you so much, i’m still new to this!

#4

No, because when you apply absolute or fixed for an element’s display position, it takes it out of the normal flow. I modified your original code (HTML and CSS) to have everything contained inside the white section (the body). To achieve this, I wrapped the two divs with class=“wheel” in another div with id=“container”. The outer container has position of relative along with the wheel divs. I removed the CSS for the left and right wheels and added display:flex; to the outer container along with using justify-content: space-evenly to have both wheels equal distance apart.

HTML

<body>

  <h1 id="page-head">Wheel</h1>
  <div id="container">
    <div class="wheel" id="left-wheel">
      <div class="wheel-detail" id="dt1"></div>
      <div class="wheel-detail" id="dt2"></div>
      <div class="wheel-detail" id="dt3"></div>
      <div class="wheel-detail" id="dt4"></div>
    </div>
    <div class="wheel" id="right-wheel">
      <div class="wheel-detail" id="dt1"></div>
      <div class="wheel-detail" id="dt2"></div>
      <div class="wheel-detail" id="dt3"></div>
      <div class="wheel-detail" id="dt4"></div>
    </div>
  </div>
  <footer>Powered by me</footer>

</body>

CSS

html {
  background-color: gray;
}
body {
  margin: 0 auto;
  font-family: arial;
  width: 940px;
  background-color: white;
}

#container {
  position: relative;
  display: flex;
  justify-content: space-around;

  margin: auto;
}

#page-head {
  font-family: monospace;
  color: black;
}
.wheel {
  width: 200px;
  height: 200px;
  background-color: transparent;
  position: relative;
  border-radius: 50%;
  animation-name: rotation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
}
.wheel-detail {
  width: 40px;
  height: 40px;
  background-color: orange;
  position: absolute;
  border-radius: 50%;
}

#dt1, #dt2 {
  top: 40px;
  left: 40px;
}
#dt2 {
  left: 120px;
}
#dt3, #dt4 {
  top: 120px;
  left: 40px;
}
#dt4 {
  left: 120px;
}

@keyframes rotation {
  100% {
    transform: rotate(360deg);
  }
}
#5

Thank you very much. Now I see clearly how the flow works and how the “position” breaks it.
I still haven’t learn “justify-content” and display yet but still it became study material.

thanks for the teaching.

#6

To understand flexbox, I recommend A Guide to Flexbox.