React - load new image - error - part 2

  • Thread starter Thread starter mathmari
  • Start date Start date
  • Tags Tags
    Error Image Load
Click For Summary

Discussion Overview

The discussion revolves around how to properly display an image alongside text in a React component, focusing on layout techniques and HTML semantics. Participants explore various methods for achieving the desired alignment and presentation of the image and text, considering both HTML structure and CSS styling.

Discussion Character

  • Technical explanation
  • Conceptual clarification
  • Debate/contested

Main Points Raised

  • Some participants suggest using a simple
    structure to place an image next to text, while others propose alternatives like using

    or for inline text.

  • There is a discussion about the use of block-level tags like
    ,

    , and

    , which start on a new line and take up full width, affecting the layout.

  • One participant mentions that CSS can be used to control the layout and suggests using inline-block styles for better alignment.
  • Another participant proposes using a table for layout, which is met with resistance from others who argue against using tables for non-tabular data.
  • Some participants emphasize the importance of using CSS frameworks like Bootstrap for responsive design and layout management.
  • There are suggestions for using flexbox properties to align items vertically and horizontally, with examples provided for Bootstrap classes.
  • One participant mentions the need for vertical alignment of text relative to the image, suggesting various HTML and CSS approaches to achieve this.

Areas of Agreement / Disagreement

Participants express differing opinions on the appropriateness of using tables for layout purposes, with some firmly against it. There is no consensus on the best method to achieve the desired layout, as multiple approaches are discussed and debated.

Contextual Notes

Participants reference the need for CSS knowledge and the potential use of frameworks like Bootstrap, indicating that the discussion may depend on specific styling preferences and project requirements.

  • #31
pbuk said:
Sorry, I hit post before I had added a link, look again.

Ah ok! 900 is the top, right? There is no way to make it bolder, is there? 🤔
 
Technology news on Phys.org
  • #33
Great! Thank you! :smile:
 

Similar threads

How to Correctly Load a New Logo in React?
  • · Replies 23 ·
Replies
23
Views
7K
JavaScript How does props program flow work in react js?
  • · Replies 2 ·
Replies
2
Views
2K
HTML/CSS Container shrinks at certain screen widths (CSS)
  • · Replies 5 ·
Replies
5
Views
3K
JavaScript Error logging in: onLoginSuccess is not a function
  • · Replies 8 ·
Replies
8
Views
3K
JavaScript Links from navbar made with React don't work
  • · Replies 2 ·
Replies
2
Views
3K
Dropdown menu - How to show the content of each option
  • · Replies 23 ·
Replies
23
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
2K
Comp Sci Java 15 Puzzle Homework: Setup Visual Part & Restrictions
  • · Replies 8 ·
Replies
8
Views
13K
Requesting suggestions for languages, libraries, and architectures for parallel (and sometimes non parallel) numerical and scientific computations
  • · Replies 8 ·
Replies
8
Views
4K