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 */
htmlcsssvgloadingloader

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting modal form information using AJAX to PHP

As a novice in the realm of web programming, I find myself seeking some guidance to untangle a riddle. Regrettably, my grasp of the basics still leaves much to be desired. Within my main page, view.adminsettings.php, I've designated a Navigation DIV ...

javascriptphpjqueryhtmlajax

What is the best method to retrieve information from two tables on a webpage that have identical classes?

I am facing a challenge in retrieving or selecting data from two different tables that share the same class. My attempts to access this information using 'soup.find_all' have proven to be difficult due to the formatting of the data. There are m ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup

Is there a Container with a Heading in Material UI?

Does anyone know how to create a container with a top title like the one shown in this screenshot: I've attempted using Box or Paper components, but I can't seem to find the option for a top title. Any suggestions? Thanks in advance for any ass ...

htmlreactjsmaterial-uifieldset

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

cssreactjstypescriptnext.jsvercel

Combining two arrays in JavaScript and saving the result as an XLS file

I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...

javascriptjqueryarrayshtml

Ways to retrieve the href attribute value from an element in Python/Selenium even when there is no explicit href attribute present

I am facing an issue with retrieving the URL link from an element using the get_attribute('href') method. It returns a null value, as if the element does not have a href attribute. webdriver.find_element_by_xpath('//*[@id="__next"] ...

pythonhtmlseleniumselenium-webdriverhref

What is the best way to assess a scope object within an ng-Class directive?

Whenever I click a button, it moves to the next item in an array. Once it reaches the last item in the array, I want to assign the "endButton" class to the button tag. I plan to use the ng-class directive within the HTML code to evaluate the expression. T ...

javascripthtmlangularjs

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

phphtml

Tips for adjusting the size of numbers (e.g. 0, 1,4..) using CSS

I have a paragraph on my website that contains a phone number and an email address within the header section. I have styled them to be the same font-size: small, but for some reason, the phone number appears slightly larger than the email address when view ...

htmlcss

Minimizing HTML code on the main page of WordPress is a crucial optimization technique

I implemented this code to compress the HTML output on my WordPress website. While it works perfectly on the main page and post pages, it's causing several issues in the admin section. function minify_html(){ ob_start('html_compress'); ...

phphtmlwordpressactionminify

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

Firefox browser does not display flashing titles for tabs

Every second, I want to display "New message..." in the title when the browser tab is inactive or the user is in another tab. Here's the code I used: <script> var mytimer; function log() { document.title = document.title == "" ...

javascriptjqueryhtml

Using CSS units such as vw, vh, or percentage to specify height is not possible

In my Ionic app, I am adjusting the width and height of a div based on the viewport dimensions. This setup functions correctly on the browser and Android 4.4 devices. However, it does not work as expected on Android 4.2 (the height is constrained to the te ...

androidcsscordovaionic-framework

Remember to follow the camel case convention when utilizing element.tagName(String) with jSoup

Looking to change the name of an HTML tag using Jsoup in the following way - element.tagName("p:panelGroup"); But when I run this code, the output changes the case and I end up with p:panelgroup. Is there a method to preserve the camel case in the resul ...

htmljsoup

Dealing with HTML and Escaping Challenges in jQuery Functions

Here is a string I have: var items = "<div class='item'><div class='item-img' style='background-image: url('images.123.jpg')'></div></div>" I am looking to update the inner HTML of a div: $ ...

javascriptjqueryhtml

What methods are available for drawing on an HTML canvas using a mouse?

I am facing two challenges: how can I create rectangles using the mouse on an HTML canvas, and why is my timer not visible? Despite trying various code snippets, nothing seems to be working. Grateful for any help! HTML: <!DOCTYPE html> <html lan ...

javascripthtmlhtml5-canvas

Enhancing HTML Layouts using Visual Basic for Applications

I'm currently experiencing some difficulties when embedding HTML into VBA to send an email. The formatting is not appearing as intended, and I've been experimenting with different options. My first concern is regarding the font size displayed in ...

htmlvba

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

Is there a way to hide my jQuery menu?

Can anyone help me figure out how to make it close when I click on a link? <nav class="navigation"> <a href="" class="menuIcon"><i class="fa fa-bars"></i></a> <ul class="nav"> <li class="clearfix"&g ...

jqueryhtmltwitter-bootstrapdrop-down-menumenu

The navbar does not dictate the views

Greetings lovely individuals I've been grappling with this issue for a while now and it seems I can't quite crack it on my own... I'm hopeful that you can assist me. My objective: A functioning navigation bar controlled by PHP in an MVC pat ...

phphtmlmodel-view-controllerbootstrap-4