Member Avatar for Sam367

How can i create those linear and boxes like for example with this:

With the text inside of it properly aligned?

  • 3 Contributors
  • 3 Replies
  • 80 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #616971

Dani AI

Generated

asked how to get those linear boxes and have the text line up. guessed a table-based layout and suggested looking at the source; recommended using an inspector. Both are on the right track — the practical step is to identify the element type and the CSS that controls it, then reproduce those rules in your own markup.

Use the browser developer tools (open DevTools, Inspect Element) to select a box and look at the DOM node and the Computed/Styles panel. Check the element tag and the display value (table, table-cell, block, flex, etc.), and look for white-space or a monospace font which indicates preformatted ASCII. Copy the node or the class name and find the CSS rules that set padding, border, text-align, and vertical-align. A short guide to browser inspectors is here: Browser developer tools

Alignment options to reproduce what you see:

  • Table-like containers: horizontal alignment via text-align, vertical via vertical-align on cells.
  • Div-based boxes: prefer display: flex with align-items and justify-content for centering.
  • Preformatted ASCII: use a pre block or white-space: pre with a monospace font.
    Add box-sizing: border-box, padding, and a border to create visible boxes. For accessibility and future maintenance, avoid using tables purely for layout and prefer semantic HTML with CSS Grid/Flex for layout control.

Recommended Answers

All 3 Replies

Member Avatar for pzuurveen

are you looking for <table >?

you can alway got to that site and press rightmouse button
than select: view source

beter: install a tool like

Member Avatar for Sam367

are you looking for <table >?

you can alway got to that site and press rightmouse button
than select: view source
[/URL]

Yes, but how can i determine if that's the code to make a box, table or something?

Member Avatar for Member #616971

If you are using FF then install the firebug plugin and it may help you show the name and outline of the elements you select. Then you can move around the cursor to find if its a table or div or else that you are looking for.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.