Elevate the block when encountering errors in HTML/CSS

Question

Elevate the block when encountering errors in HTML/CSS

Here is a picture of what I want, and below I will provide a more detailed description:

Link to the image (I cannot paste it here)

I am explaining the elements involved. There are three main components:

1) The topmost text "Bla bla bla bla"

2) The button "Click me"

3) And the bottom text

When you click the button, an error message will appear. I want to move the first two elements higher without affecting the bottom text. Therefore, the bottom text should remain in its original position.

My question is - How can I achieve this using HTML/CSS code only (excluding JavaScript for text appearance)? I require HTML/CSS code that will ensure the movement of the top two elements higher.

html css web frontend

Answer 1

Answer №1

It would be more effective to utilize javascript in this scenario, allowing for the dynamic calculation of the error message display height. Resorting to other methods may lead to hacky solutions based on fixed heights, as illustrated below.

//Purely for CSS demonstration
$("#btn").click(function(){
  $(".msg").toggleClass("error");
});

.msg {padding: 3em; border:1px solid black;}
.msg.error {padding-top: 1em;
border-color:red;}

.errorMsg { 
display:none;
color:red;
height:2em;}

.error .errorMsg{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="msg">
<h1>bla blah bla</h1>
   <input type="button" value="Click Me" id="btn" />
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

Another approach is to leverage the visibility attribute to maintain the hidden element's position on the page

.msg {padding: 30px; border:1px solid black;}
.errorMsg { visibility:hidden; /*Important line*/
color:red;}

.errorMsg:target{
  visibility: visible;
}

<div class="msg">
<h1>bla blah bla</h1>
   <a href="#error">Click Me</a>
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

I've incorporated the use of target in the above example for styling purposes, but modifications can be made by assigning a class to the error element or its parent and styling accordingly.

Answer 2

It would be more effective to utilize javascript in this scenario, allowing for the dynamic calculation of the error message display height. Resorting to other methods may lead to hacky solutions based on fixed heights, as illustrated below.

//Purely for CSS demonstration
$("#btn").click(function(){
  $(".msg").toggleClass("error");
});

.msg {padding: 3em; border:1px solid black;}
.msg.error {padding-top: 1em;
border-color:red;}

.errorMsg { 
display:none;
color:red;
height:2em;}

.error .errorMsg{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="msg">
<h1>bla blah bla</h1>
   <input type="button" value="Click Me" id="btn" />
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

Another approach is to leverage the visibility attribute to maintain the hidden element's position on the page

.msg {padding: 30px; border:1px solid black;}
.errorMsg { visibility:hidden; /*Important line*/
color:red;}

.errorMsg:target{
  visibility: visible;
}

<div class="msg">
<h1>bla blah bla</h1>
   <a href="#error">Click Me</a>
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

I've incorporated the use of target in the above example for styling purposes, but modifications can be made by assigning a class to the error element or its parent and styling accordingly.

Elevate the block when encountering errors in HTML/CSS

Answer №1

Similar questions

Utilizing Font Awesome within the `<fieldset>` element alongside Bootstrap 4 forms

Floating and scrolling navigation bar not functioning properly in bootstrap framework

converting an entire HTML layout into a PDF using JavaScript

Firefox browser does not display flashing titles for tabs

What is the best way to display two items from a list while hiding the rest?

I'm working on creating a login page with Bootstrap. Does anyone know the best way to center it on the screen

The importance of formatting in coding and how to effectively apply it

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Are programmatic clicks distinguishable from manual clicks in JQuery?

Using justify-content-between in a div container with only two items will not produce the desired effect

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

How to display an image stored in Laravel within a Nuxtjs application?

The jQuery function is running double even after I cleared the DOM with the empty() method

Is foreach the key to optimizing your queries?

How can I create an image link with a hover effect using HTML and CSS?

Sorry, the provided text is already unique as it is an error message

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Retrieving elements from the DOM based on their class name

Experimenting with applying jquery .slideDown() to multiple classes in order to create dynamic animations

Moving from one page to another