Have Geek Brain

Filling in a certain amount of gaps on a website

In my web application, I am using the following CSS to provide notifications / error messages:

#notice { 
  border: 1px solid green; 
  padding: 1em; 
  margin: 1em; 
  margin-bottom: 2em; 
  background-color: lightgreen; 
  font: bold sans-serif;
  color: darkgreen 
}

But when a notification is not required, I want the empty space to be equal to the amount of space that would be occupied by this notification. I want to do this so that my web pages look consistent and the elements on the page don't move up / down depending on whether there is a notification or not.

+1


a source to share


4 answers


I did this by setting a fixed height.



I've also heard the argument that it's okay for the page to succeed (how stackoverflow works) because it draws attention to the message, which is good.

+1


a source


The solution may depend on how you want / need to implement this notification block. If you refresh the page using Ajax (no clever degradation, disable JS to normal), I highly recommend doing it using modals like Facebook - it's nice and convenient. If you haven't had the option of using modals, it might be something like:

#notice{ height: 100px; margin: 1em 1em 2em } /* #notice can be a wrapper with basic dimensions */
.error{ border: 1px solid red; } /* reuse the same block */
.info{ border: 1px solid green; } /* reuse the same block */

And the HTML accordingly:

<div id="notice"></div>

Error state:



<div id="notice" class="error"> Your error message </div>

Informational state:

<div id="notice" class="info"> Your info message </div>

Of course, you may run into problems with the height of the #notice div when the message is too long, but that's a different problem :)

+1


a source


You can set a fixed height and width for the div.

#notice {
   ....
   height: 200px;
   width: 100%;
}

Alternatively, you can use minimum height and minimum width.

0


a source


I assume the C # notice div won't be there unless you need it. Why not use an adjacent selector like this. It won't work in some browsers like IE6. Give the element the next class "next" or something similar. There will still be some kind of difference, because you have 2px from the border there.

#notice {
  border: 1px solid green; 
  padding: 1em; 
  margin: 1em; 
  margin-bottom: 2em; 
  background-color: lightgreen; 
  font: bold sans-serif;
  color: darkgreen 
}
.following {
    margin-top:4em
}
#notice + .following {
    margin-top:2em;
}
0


a source






More articles:


All Articles