No matter how much I try, the text refuses to align with the top-left corner

Question

No matter how much I try, the text refuses to align with the top-left corner

I have been working on creating a loading screen, but I am facing an issue with aligning the h1 tag selected to the top left. As a young developer at the age of 13, I am quite confused. I attempted to use the following CSS properties:

vertical-align: top;
text-align: left;

However, it did not yield the desired result. Any assistance provided would be greatly appreciated.

Here is the code snippet:

HTML5:

<!DOCTYPE html>
<!-- More HTML code here -->
</html>

CSS3:

::selection {
  color: #ffff;
  background: rgb(142, 73, 232);
}

/* More CSS styles here */

html css svg loading loader

Answer 1

Answer №1

The request was to align the text in the upper left corner, but what about the animation? I assumed it should be centered.

To address this, I utilized absolute positioning for the h1 text in my solution.

Here is how you can achieve this:

Include these properties - position: absolute, top: 0, left: 0, and margin: 30px within your .text-logo selector as shown below:

.text-logo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 30px;     
  color: rgb(142, 73, 232);
}

::selection {
  color: #ffff;
  background: rgb(142, 73, 232);
}
html, body {
  height: 100%;
  margin: 0;
}
*{
  box-sizing: border-box;
}
body {
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background: linear-gradient(to bottom, rgb(38, 76, 158) 0%, rgb(42, 143, 119) 100%);
}
svg {
  width: 120px;
  height: auto;
}
.text-logo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 30px;      
  color: rgb(142, 73, 232);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SideQuests | Simple but Powerful Todo App</title>
  <!--meta http-equiv="refresh" content="2;url=home" /-->
  <link rel="stylesheet" href="loader.css">
  <link rel="icon" href="images/sidequests-logo.png">
  <meta property="og:image" content="images/sidequests-logo.png">
  <meta property="og:title" content="SideQuests | Simple but Powerful Todo App">
  <meta property="og:description" content="SideQuests is a simple but powerful todo app that can list any task you want, and it also saves the tasks into the LocalStorage. Meaning, even if you refresh or leave the website, it will still save your progress.">
  <meta property="og:url" content="https://www.sidequests.ga">
</head>
<body>
  <h1 class="text-logo"><i class="fas fa-check-square"></i> SideQuests</h1>
  <svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="25 25 50 50">
  <circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke="#45d6b5" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="100, 200">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dashoffset" values="0;-30;-124" dur="1.25s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dasharray" values="0,200;110,200;110,200" dur="1.25s" repeatCount="indefinite"/>
  </circle>
</svg>
</body>
</html>

Answer 2

The request was to align the text in the upper left corner, but what about the animation? I assumed it should be centered.

To address this, I utilized absolute positioning for the h1 text in my solution.

Here is how you can achieve this:

Include these properties - position: absolute, top: 0, left: 0, and margin: 30px within your .text-logo selector as shown below:

.text-logo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 30px;     
  color: rgb(142, 73, 232);
}

::selection {
  color: #ffff;
  background: rgb(142, 73, 232);
}
html, body {
  height: 100%;
  margin: 0;
}
*{
  box-sizing: border-box;
}
body {
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background: linear-gradient(to bottom, rgb(38, 76, 158) 0%, rgb(42, 143, 119) 100%);
}
svg {
  width: 120px;
  height: auto;
}
.text-logo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 30px;      
  color: rgb(142, 73, 232);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SideQuests | Simple but Powerful Todo App</title>
  <!--meta http-equiv="refresh" content="2;url=home" /-->
  <link rel="stylesheet" href="loader.css">
  <link rel="icon" href="images/sidequests-logo.png">
  <meta property="og:image" content="images/sidequests-logo.png">
  <meta property="og:title" content="SideQuests | Simple but Powerful Todo App">
  <meta property="og:description" content="SideQuests is a simple but powerful todo app that can list any task you want, and it also saves the tasks into the LocalStorage. Meaning, even if you refresh or leave the website, it will still save your progress.">
  <meta property="og:url" content="https://www.sidequests.ga">
</head>
<body>
  <h1 class="text-logo"><i class="fas fa-check-square"></i> SideQuests</h1>
  <svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="25 25 50 50">
  <circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke="#45d6b5" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="100, 200">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dashoffset" values="0;-30;-124" dur="1.25s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dasharray" values="0,200;110,200;110,200" dur="1.25s" repeatCount="indefinite"/>
  </circle>
</svg>
</body>
</html>

Answer 3

Answer №2

Just a friendly reminder - please refrain from adding any elaborate styling directly to the body tag. It's best to encapsulate your content within div tags. Additionally, using display:flex can be quite complex, so it's important to have a good grasp of its functionality before implementing it.

Feel free to take a look at this fiddle I've put together as a solution for your specific requirements: http://jsfiddle.net/boa3xh17/

Answer 4

Just a friendly reminder - please refrain from adding any elaborate styling directly to the body tag. It's best to encapsulate your content within div tags. Additionally, using display:flex can be quite complex, so it's important to have a good grasp of its functionality before implementing it.

Feel free to take a look at this fiddle I've put together as a solution for your specific requirements: http://jsfiddle.net/boa3xh17/

Answer 5

Answer №3

Take a look at the code below and see if it suits your needs.

::selection{
  color: #ffff;
  background: rgb(142, 73, 232);
}

html, body{
  height: 100%;
  margin: 0;
}
*{
  box-sizing: border-box;
}
body{
  background: linear-gradient(to bottom, rgb(38, 76, 158) 0%, rgb(42, 143, 119) 100%);
}

svg{
  width: 120px;
  height: auto;
}
.loader{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-logo {
  color: rgb(142, 73, 232);
      margin: 0;
}

  <h1 class="text-logo"><i class="fas fa-check-square"></i> SideQuests</h1>
  <div class="loader">
  <svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="25 25 50 50">
  <circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke="#45d6b5" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="100, 200">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dashoffset" values="0;-30;-124" dur="1.25s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dasharray" values="0,200;110,200;110,200" dur="1.25s" repeatCount="indefinite"/>
  </circle>
    </svg></div>

Avoid using the body style that you have implemented in this code snippet.

Answer 6

Take a look at the code below and see if it suits your needs.

::selection{
  color: #ffff;
  background: rgb(142, 73, 232);
}

html, body{
  height: 100%;
  margin: 0;
}
*{
  box-sizing: border-box;
}
body{
  background: linear-gradient(to bottom, rgb(38, 76, 158) 0%, rgb(42, 143, 119) 100%);
}

svg{
  width: 120px;
  height: auto;
}
.loader{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-logo {
  color: rgb(142, 73, 232);
      margin: 0;
}

  <h1 class="text-logo"><i class="fas fa-check-square"></i> SideQuests</h1>
  <div class="loader">
  <svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="25 25 50 50">
  <circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke="#45d6b5" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="100, 200">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dashoffset" values="0;-30;-124" dur="1.25s" repeatCount="indefinite"/>
    <animate attributeName="stroke-dasharray" values="0,200;110,200;110,200" dur="1.25s" repeatCount="indefinite"/>
  </circle>
    </svg></div>

Avoid using the body style that you have implemented in this code snippet.

No matter how much I try, the text refuses to align with the top-left corner

Answer №1

Answer №2

Answer №3

Similar questions

Conceal the div element if the screen size drops below a certain threshold

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

Disappearance of external page upon refreshing - jquery mobile

Windowing box inside a container box

Arranging content within columns according to their column position

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

JavaScript - Declaring canvas as a global object

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

Filter search results to display only posts

Using jQuery to insert a new string into the .css file

Modifying HTML elements with JavaScript - a practical guide

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

Is it possible to modify the value on the src img tag prior to scraping the data

A guide on switching out an HTML element with an AJAX response

Establishing Fixed Positioning

Changing the identification of elements

Issues with CSS3 height transitions in a specific scenario

Organize group data by month in a visually appealing table using HTML/PHP with

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

:hover doesn't fully implement background color on list items