Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Question

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out?

I'm trying to center an image, a message, and a password input on my webpage. While it looks good on my screen, in the code snippet below, there seems to be no space below the password line (you may need to scroll around to see anything), so clearly something is amiss...it's supposed to be perfectly centered on the screen.

However, I feel like I'm not efficiently positioning my elements. I also want to ensure that when the user shrinks their window, scroll bars appear and any empty space disappears (similar to Twitter's login page: https://twitter.com/login). Unfortunately, in my current code, shrinking the window still leaves empty space which I believe is not ideal for UI.

In essence, if anyone has tips on how to effectively position text and images, as well as utilize CSS to handle window resizing gracefully, I would greatly appreciate the guidance :) Any help is welcome and thank you in advance!

.pretty {
  text-align: center;
  color: #00008b;
  font-family: Lucida Console;
  position: absolute;
  top: 115%;
  left: 39%;
}

.pwd {
  text-align: center;
  position: absolute;
  top: 155%;
  left: 38.5%;
}

.chatbubble {
  height: 14%;
  width: 6%;
  position: absolute;
  top: 102%;
  left: 48.5%;
}

body {
  background-color: #fff0f5;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.contain {
  position: relative;
  height: 200px;
}

html {
  height: 100%;
}

<!DOCTYPE html>
<html>
<div id="wrapper">

  <head>
    <title> Log In </title>

    <link href="loginstyle.css" type="text/css" rel="stylesheet">

    <script language="JavaScript">
      function showPass(form, e) {
        e.preventDefault();

        var pass = form.pwd.value;
        var pass1 = "webdesign"

        if (pass == pass1) {
          window.location.href = 'https://www.google.com'
        } else {
          window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        }
      }
    </script>

  </head>

  <body>
    <div class="contain">
      <img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
      <p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>

      <form class="pwd center" onsubmit="showPass(this, event)">
        Password: <input type="password" name="pwd" />
        <input type="submit" value="Log In" />
      </form>
    </div>
  </body>
</div>

</html>

javascript html css

Answer 1

Answer №1

It is important to note that the wrapper should be positioned inside the body tag, not around the body and head tags:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <!-- Content, including wrappers, go here -->
</body>
</html>

Avoid using absolute positioning for responsive web design unless absolutely necessary. There are various ways to center content both horizontally and vertically, with resources available on Stack Overflow. One modern approach is utilizing flexbox.

Instead of setting a fixed width, consider using max-width for your wrapper to prevent scrolling on smaller devices.

An effective strategy for Responsive Web Design (RWD) involves starting with minimal CSS styles geared towards mobile views. Most elements will naturally adjust, but ensure images are styled responsively. As you scale up to larger screens, introduce media queries to reposition elements and adjust font sizes accordingl. Embracing a "mobile first" strategy can also aid in this process.

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0 auto;
  padding: 1rem;
  max-width: 960px;
  background-color: #fff0f5;
}

/* login section */

.login-section {
  min-height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* typography */

.pretty {
  color: #00008b;
  font-family: Lucida Console;
}

<!DOCTYPE html>
<html>
<head>
  <title> Log In </title>
  <link href="loginstyle.css" type="text/css" rel="stylesheet">
  <script language="JavaScript">
    function showPass(form, e) {
      e.preventDefault();
      var pass = form.pwd.value;
      var pass1 = "webdesign"
      if (pass == pass1) {
        window.location.href = 'https://www.google.com'
      } else {
        window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
      }
    }
  </script>
</head>

<body>
  <div id="wrapper">
  
    <main>
      <section class="login-section">
        <img class="chatbubble" src="https://via.placeholder.com/150" alt="Chat Bubble" />
        <p class="pretty">Welcome to a digital photobook.<br>Please enter the password to continue:</p>
        <form class="pwd" onsubmit="showPass(this, event)">
          Password: <input type="password" name="pwd" />
          <input type="submit" value="Log In" />
        </form>
      </section>
    </main>
    
  </div>
</body>
</html>

Answer 2

It is important to note that the wrapper should be positioned inside the body tag, not around the body and head tags:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <!-- Content, including wrappers, go here -->
</body>
</html>

Avoid using absolute positioning for responsive web design unless absolutely necessary. There are various ways to center content both horizontally and vertically, with resources available on Stack Overflow. One modern approach is utilizing flexbox.

Instead of setting a fixed width, consider using max-width for your wrapper to prevent scrolling on smaller devices.

An effective strategy for Responsive Web Design (RWD) involves starting with minimal CSS styles geared towards mobile views. Most elements will naturally adjust, but ensure images are styled responsively. As you scale up to larger screens, introduce media queries to reposition elements and adjust font sizes accordingl. Embracing a "mobile first" strategy can also aid in this process.

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0 auto;
  padding: 1rem;
  max-width: 960px;
  background-color: #fff0f5;
}

/* login section */

.login-section {
  min-height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* typography */

.pretty {
  color: #00008b;
  font-family: Lucida Console;
}

<!DOCTYPE html>
<html>
<head>
  <title> Log In </title>
  <link href="loginstyle.css" type="text/css" rel="stylesheet">
  <script language="JavaScript">
    function showPass(form, e) {
      e.preventDefault();
      var pass = form.pwd.value;
      var pass1 = "webdesign"
      if (pass == pass1) {
        window.location.href = 'https://www.google.com'
      } else {
        window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
      }
    }
  </script>
</head>

<body>
  <div id="wrapper">
  
    <main>
      <section class="login-section">
        <img class="chatbubble" src="https://via.placeholder.com/150" alt="Chat Bubble" />
        <p class="pretty">Welcome to a digital photobook.<br>Please enter the password to continue:</p>
        <form class="pwd" onsubmit="showPass(this, event)">
          Password: <input type="password" name="pwd" />
          <input type="submit" value="Log In" />
        </form>
      </section>
    </main>
    
  </div>
</body>
</html>

Answer 3

Answer №2

Avoid using manual percentage positioning, such as left: 155%. For centering elements, utilize absolute positioning on a wrapper container and then align the content inside with text-align: center. To center containers or images, apply the display: inline-block property so they flow to the center.

Below is an updated version of your CSS code, which you can also view in the snippet:

.contain {
   position: absolute;
   top: 50%;
   left: 50%;
   text-align: center;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.pretty {
  text-align: center;
  color: #00008b;
  font-family: Lucida Console;
}

.pwd {
  text-align: center;
}

.chatbubble {
    display: inline-block;
}

body {
  background-color: #fff0f5;
}

html {
  height: 100%;
}

<!DOCTYPE html>
<html>
<div id="wrapper">

  <head>
    <title> Log In </title>

    <link href="loginstyle.css" type="text/css" rel="stylesheet">

    <script language="JavaScript">
      function showPass(form, e) {
        e.preventDefault();

        var pass = form.pwd.value;
        var pass1 = "webdesign"

        if (pass == pass1) {
          window.location.href = 'https://www.google.com'
        } else {
          window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        }
      }
    </script>

  </head>

  <body>
    <div class=“contain”>
      <img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
      <p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>

      <form class="pwd center" onsubmit="showPass(this, event)">
        Password: <input type="password" name="pwd" />
        <input type="submit" value="Log In" />
      </form>
    </div>
  </body>
</div>

</html>

Answer 4

Avoid using manual percentage positioning, such as left: 155%. For centering elements, utilize absolute positioning on a wrapper container and then align the content inside with text-align: center. To center containers or images, apply the display: inline-block property so they flow to the center.

Below is an updated version of your CSS code, which you can also view in the snippet:

.contain {
   position: absolute;
   top: 50%;
   left: 50%;
   text-align: center;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.pretty {
  text-align: center;
  color: #00008b;
  font-family: Lucida Console;
}

.pwd {
  text-align: center;
}

.chatbubble {
    display: inline-block;
}

body {
  background-color: #fff0f5;
}

html {
  height: 100%;
}

<!DOCTYPE html>
<html>
<div id="wrapper">

  <head>
    <title> Log In </title>

    <link href="loginstyle.css" type="text/css" rel="stylesheet">

    <script language="JavaScript">
      function showPass(form, e) {
        e.preventDefault();

        var pass = form.pwd.value;
        var pass1 = "webdesign"

        if (pass == pass1) {
          window.location.href = 'https://www.google.com'
        } else {
          window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        }
      }
    </script>

  </head>

  <body>
    <div class=“contain”>
      <img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
      <p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>

      <form class="pwd center" onsubmit="showPass(this, event)">
        Password: <input type="password" name="pwd" />
        <input type="submit" value="Log In" />
      </form>
    </div>
  </body>
</div>

</html>

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Answer №1

Answer №2

Similar questions

What steps can I take to avoid encountering this endless loop?

Adjust the position of a child element to be just outside the boundaries of its parent element using CSS

Steps for aligning an image to the right using Bootstrap Vue

Using jQuery to toggle sliding the information above a div

Combining default and named exports in Rollup configuration

Chrome clipping positioned spans

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

Position a div in the center and add color to one side of the space

sending the properties from the menu component to the dish details

Angular Datatables unable to locate DataTables with Webpack Encore configuration

Generate a fresh line within the source code

"Utilizing Node.js and Express to return JSONP data based on

Trouble with the navigation of the JavaScript image gallery: next and previous buttons are not

Creating dynamic content in the Ajax-enabled Smart Admin theme: A step-by-step guide

Adjust the hue of a specific node

Using angularJS and Regular Expressions to eliminate the "+" symbols in an email address

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

What is the reason behind Angular's continued use of JSON for encoding requests? (specifically in $http and $httpParamSerializerJ

Arranging two divs side by side while considering a responsive theme

What is the best way to upload a file using AJAX request in Sinatra?