Dynamic container elements (already arranged)

Question

Dynamic container elements (already arranged)

After creating a marksheet generator, I noticed that the divs positioned over an image on the resulting page are not responsive when trying to print. The print preview ends up looking strange and distorted. How can I make these already positioned divs responsive?

Specifically, how can I adjust the following HTML to be responsive? HTML

#name {
  position: absolute;
  top: 17.4%;
  left: 31%;
}

#cl {
  position: absolute;
  top: 18%;
  left: 58%;
}

<div id="name">
  <font size="3" face="courier new"><b><%out.print(name);%>  </b></font>
</div>

<div id="cl">
  <font size="2" face="courier new"><b> -<%out.print(cl);%></b></font>
</div>

html css responsive

Answer 1

Answer №1

To fully grasp how positioning functions in CSS, it is essential to familiarize yourself with the concept. Here is a helpful resource that explains positioning in CSS: https://css-tricks.com/almanac/properties/p/position/

Additionally, all absolute child elements should be contained within a relative parent div.

Here is an example structure:

<div class="relative_parent">
  <div id="name">
    <font size="3" face="courier new"><b><%out.print(name);%>  </b></font>
  </div>

  <div id="cl">
    <font size="2" face="courier new"><b> -<%out.print(cl);%></b></font>
  </div>
</div>

.relative_parent{
  position: relative;
}

#name {
  position: absolute;
  top: 17.4%;
  left: 31%;
}

#cl {
  position: absolute;
  top: 18%;
  left: 58%;
}

This setup ensures that when the parent div's dimensions change, its internal child elements will adjust accordingly.

Quick Tip: Avoid using IDs for styling in CSS as they have higher specificity than classes. It is recommended to reserve IDs for JavaScript functionality to prevent conflicts and maintain consistency.

Answer 2

To fully grasp how positioning functions in CSS, it is essential to familiarize yourself with the concept. Here is a helpful resource that explains positioning in CSS: https://css-tricks.com/almanac/properties/p/position/

Additionally, all absolute child elements should be contained within a relative parent div.

Here is an example structure:

<div class="relative_parent">
  <div id="name">
    <font size="3" face="courier new"><b><%out.print(name);%>  </b></font>
  </div>

  <div id="cl">
    <font size="2" face="courier new"><b> -<%out.print(cl);%></b></font>
  </div>
</div>

.relative_parent{
  position: relative;
}

#name {
  position: absolute;
  top: 17.4%;
  left: 31%;
}

#cl {
  position: absolute;
  top: 18%;
  left: 58%;
}

This setup ensures that when the parent div's dimensions change, its internal child elements will adjust accordingly.

Quick Tip: Avoid using IDs for styling in CSS as they have higher specificity than classes. It is recommended to reserve IDs for JavaScript functionality to prevent conflicts and maintain consistency.

Dynamic container elements (already arranged)

Answer №1

Similar questions

What is causing my 100% height to be excessively large?

Strategies for concealing and revealing content within dynamically loaded AJAX data

What is the best way to generate an accordion populated with data from a MySQL query?

What is the process for inserting a hyperlink onto an image within a query slider?

"Troubleshooting a JSON structure containing a complex array of objects with multiple layers

Design and styling with HTML5 and CSS

What is the best way to position an image beside a jquery dialog box?

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Having trouble installing css-sprite on Windows 8.1 using NPM

A common challenge in React is aligning the button and input line on the same level

Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

Interact with various contenteditable sections by navigating with the arrow keys

Components from Bower are currently not available

What could be causing the unexpected behavior of nth-child?

What is the best way to align the navbar items in the center?

What is the best way to incorporate content just out of view below the parallax section that becomes visible as you scroll?

Tips for organizing checkboxes in rows horizontally

Retrieving data from an HTML dropdown menu in a Django views.py file

What could be causing my custom cursor to malfunction?