Bollate

HTML

[ANSWERED] html – How to group message boxes and center them

By

Nov 19, 2022 , , ,

Solution 1 :

You could use flexboxes, CSS-Grid or simply wrap all the boxes and declare them as inline-block and align them then with text-align.

Option #1: Flexbox

Here you wrap the textboxes and give them the wrapper display: flex; to declare everything as flex elements. Then you can use justify-content: center; to center them.

.messagebox {
  min-width: 1200px;
  display: flex;
  justify-content: center;
}

.messagebox div {
  background-color: #267677;
  color: #ffffff;
  border: 3px solid #ffffff;
  font-family: Arial Black, Gadget, sans-serif;
  font-size: 24px;
  width: 210px;
  padding: 2px;
  text-align: center;
}
<div class="messagebox">
  <div>Naam Winkel</div>
  <div>15/08/2020</div>
  <div>Totaal (Prijs)</div>
  <div>Door Wie?</div>
  <div>Extra Info?</div>
</div>

Option #2a: Inline-blocks using a div as wrapper

With this method, you declare all the divs inline elements with display: inline-block; and as such they can be centered by using text-align-center;

.messagebox {
  min-width: 1200px;
  text-align: center;
}

.messagebox div {
  display: inline-block;
  background-color: #267677;
  color: #ffffff;
  border: 3px solid #ffffff;
  font-family: Arial Black, Gadget, sans-serif;
  font-size: 24px;
  width: 210px;
  padding: 2px;
  text-align: center;
}
<div class="messagebox">
  <div>Naam Winkel</div>
  <div>15/08/2020</div>
  <div>Totaal (Prijs)</div>
  <div>Door Wie?</div>
  <div>Extra Info?</div>
</div>

Option #2b: Inline-blocks using a list

Same methode as #2a. However you use an unordered list as a wrapepr and instead of using divs you use the normal list items. The “list bullet” will eb removed with list-style-type: none;.

.messagebox {
  min-width: 1200px;
  text-align: center;
  list-style-type: none;
}

.messagebox li {
  display: inline-block;
  background-color: #267677;
  color: #ffffff;
  border: 3px solid #ffffff;
  font-family: Arial Black, Gadget, sans-serif;
  font-size: 24px;
  width: 210px;
  padding: 2px;
  text-align: center;
}
<ul class="messagebox">
  <li>Naam Winkel</li>
  <li>15/08/2020</li>
  <li>Totaal (Prijs)</li>
  <li>Door Wie?</li>
  <li>Extra Info?</li>
</ul>

Option #3: CSS Grid

Messy as it is complicated for this use and total overkill. As such you better of to stick with flexbox or inline-block.

Problem :

I’m totally new to webdesign and all of the things. I’m trying to create textboxes and center them.
Here is what I have now:

Index.php & css

.messagebox {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:210px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 200px;
}
.messagebox1 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:180px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 418px;
}
.messagebox2 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:210px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 606px;
}
.messagebox3 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:180px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 824px;
}
.messagebox4 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:180px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 1012px;
}
<div class="messagebox">Naam Winkel</div>
<div class="messagebox1">15/08/2020</div>
<div class="messagebox2">Totaal (Prijs)</div>
<div class="messagebox3">Door Wie?</div>
<div class="messagebox4">Extra Info?</div>

Output
Output

Is there an easier way to group all those mesageboxes and center them all at once? At the moment all the margin-left have been done by hand..

Thnx in advanced

Comments

Comment posted by El_Vanja

Seems like a purely design-related question. You might want to remove the

Comment posted by G-Cyrillus

Group them in a single container. From witch you can use flex and justify-content 😉 text boxes could also be inline boxes.(span instead div , if that makes sens for the contents. ) else ul-li would be fine here

Comment posted by Konrads

@G-Cyrilus gave you the answer broadly. Some code reuse could be obtained using a common class. At risk of sounding arrogant, I suggest picking up a decent book on modern web design. Good looking modern web is a little like making a complex dish – all the ingredients have to come out just right and it’s best when someone shows it to you.

Comment posted by G-Cyrillus

A list would be perfect i believe 😉

Comment posted by DarkSmile

Option #1 works great! thank you, am I understanding this right? If I have multiple boxes or other items that I want in one group I just create the class and put them all in the same class? As seen in your options?

Comment posted by tacoshy

@G-Cyrillus, yes which is rpetty much the same solution as inline-block. But I will add 😉

Comment posted by tacoshy

@DarkSmile, yes you wrap them. In eevry cases you have the elemetns (that youc all textboxes) are wrapped. childs dont need a seperate class msot of the time as you can select them through the parent. Int hsi case:

Comment posted by G-Cyrillus

?? ul/li and inline-block are two different language HTML/CSS 😉 , one is for the semantic (when tags have a meaning, exit div/span) , and the other one is for the styling of any tag and won’t modify the DOM/semantic at all 😉

By

Related Post

HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022
HTML

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022
HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022