What is the method for determining the percentage in CSS conversion using pixels?

I currently have these CSS styles:

body {
  padding: 0;
  margin: 0;
  font-family: bentonsans-regular, sans-serif;
  font-size: 14px;
  background-image: url(../affiliate/amex/images/background.png);
  background-repeat: repeat-y;
  background-position: top left;
}

#header {
  position: fixed;
  left: 150px;
  top: 50px;
}

#footer {
  position: fixed;
  left: 150px;
  right: 50px;
  bottom: 10px;
  height: 100px;
  line-height: 10px;
  font-size: 10px;
}

My goal is to convert the measurements from px to %, but I am unsure of the best approach to do this accurately. I came across a tool that converts from px to em, which wasn't quite what I needed. If anyone has any suggestions, advice, or solutions on how to achieve this conversion accurately, please point me in the right direction. Thank you!

htmlcss

Answer №1

The appropriate calculation to convert measurements depends on the surrounding elements. It is crucial to keep in mind the basic equation target / context

Finding a converter may prove challenging since the outcome varies based on the specific situation.

For instance, if you need to convert a 300px element within a 1000px container, the process involves:

300/1000 = 0.3 resulting in 30%

In case the 300px object has a 10px padding and requires conversion, apply the formula considering the 300px as your context. Therefore,

10/300 = 0.0333333333 which translates to 3.3333333% (include decimals)

Regarding font sizes, setting the font-size to 100% corresponds to 100% of the default browser font size, typically 16px for most browsers. To understand font sizing accurately, refer to: The font-size CSS property

Answer №2

You are welcome to specify the percentage for width, but it is recommended to use "px" or "em" for height.

body {
  padding: 0;
  margin: 0;
  font-family: bentonsans-regular, sans-serif;
  font-size: 14px;
  background-image: url(../affiliate/amex/images/background.png);
  background-repeat: repeat-y;
  background-position: top left;
}

#header {
  position: fixed;
  width: 90%;
  height: 100px;
  max-width: 600px;
  left: 10%;
  right: 10%;
  top: 50px;
  background: gray;

}

#footer {
  position: fixed;
  width: 90%;
  height: 100px;
  max-width: 600px;
  left: 10%;
  right: 10%;
  bottom: 10px;
  line-height: 10px;
  font-size: 10px;
  background: gray;
}
<div id="header">
  header
</div>

<div id="footer" >
  footer
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

javascriptcsslayoutresponsive-design

Issue with Bootstrap 4 grid not respecting col-* sizes when arranging columns

I have developed a bootstrap 4.1 application. My main goal is to design a group of 6 cards. For wide screens in landscape mode, I aim to show 2 rows with 3 columns each. [1] [2] [3] [4] [5] [6] However, on narrower screens in portrait mode, I want to di ...

cssbootstrap-4

The art of arranging elements on a webpage using HTML and

I designed a rectangle using position: relative; and placed an icon inside it. However, when I added a new div class called .Home, and included an element <h4>Home</h4> with position: relative;, the element appeared outside of the rectangle. Wh ...

htmlcss

Symfony2's W3C XHTML validation fails when validating form submissions according to the W3C standards

Having an issue with valid w3.org XHTML - the validator is showing an error on the required attribute of an input: The attribute "required" is not recognized. I firmly believe that this attribute is necessary, as it is included by Symfony2 form builder f ...

formshtmlvalidationxhtmlsymfony

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

javascriptjqueryhtmlimagesrc

What steps do I need to take to create a sitemap that includes dynamic routes?

Seeking advice on how to direct search engines to index my dynamic routes. One example is /post/:id, with :id representing the post's ID. Any tips on how to include this in a sitemap? ...

javascripthtmlreactjsxmlsitemap

steps to repair the toggler button on my website's navigation bar

Currently working on a webpage that requires a double navbar, but encountering issues with the toggler button. It's behaving strangely - not collapsing or showing properly. When clicked, a black box appears around the button and then quickly collapses ...

htmlcssnavbarbootstrap-5

Alert: Ajax encountered an issue with the auto-refreshing field

When running a script I created for a self-updating field, I encountered the following error message: UpdateField.html:37 Uncaught ReferenceError: fieldname is not defined at HTMLInputElement.onchange (UpdateField.html:37) Script: https://i.sstatic.n ...

javascriptphphtmlajax

When using CSS @media print with inches, different dimensions are displayed post-printing

I'm currently working on a project that involves printing a single div from my webpage. However, I've encountered some issues with the @page tag not affecting the print output as expected. I attempted to manually set the dimensions of the element ...

htmlcssreactjsprintingmedia-queries

Can JavaScript be used to change the style and make a hidden input field vanish from view?

Currently, I am designing a table containing dates along with numerous hidden fields. print "<td"; { $dm=date('Y-m-d',strtotime("+".$i." days", strtotime($m))); print " class=\"overflow\" id=\"$a::$dm\" onclick=\" ...

javascriptcsshidden-field

Box-free calendar dash component

Encountering an issue within my application dashboard, here's a direct screenshot: https://i.stack.imgur.com/sEMrM.png The problem is that the Calendar days are extending beyond the borders of the calendar box. To implement this, I simply utilized ...

pythonhtmlcssplotly-dash

Error: Unable to find a matching route in Django

Currently, I'm in the process of developing a blog platform that offers users the ability to search for posts using specific keywords through a standard search bar. In order to achieve this, I have imported Q from django.db.models. Here is the view ...

pythonhtmldjangodjango-querysetdjango-q

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

Creating a custom accordion with pure CSS, no need for Bootstrap or HTML

Struggling to create an accordion using pure CSS Despite numerous attempts, I have been unsuccessful in achieving the desired outcome. ...

javascripthtmlcssbootstrap-4accordion

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

I'm currently working on a website for a company that requires users to complete all the information before proceeding. To achieve this, I created a form with the following code: <form action="Owners Infoback.php" onsubmit="return validateFo ...

javascripthtmlcss

"Despite having an updated browscap.ini file defined in php.ini, the function Get_browser is still returning unexpected

These are the steps I have taken so far: Downloaded the updated php_browscap.ini file from (chose the PHP version) Tested php_browscap.ini, lite_php_browscap.ini, and full_php_browscap.ini. Updated the php.ini file to: [browscap] ;http://php.net/bro ...

phphtmlvb.netphp-inibrowscap

How to set a background image using JQuery Mobile

Struggling to apply a background image on my webpage due to JQuery Mobile CSS taking precedence over my own styling. Despite attempting the following solution, it remains unsuccessful. body { height: 100%; background-image: url('ProjectImages/log ...

jqueryhtmlcssmobile

Pausing the Nivo slider when hovering over a specific non-slider element - a simple guide

As the saying goes, the title sums it up. I am trying to get the nivo slider to pause when I hover over the top menu in the Twenty Fourteen theme. It's been hours and I still can't figure out how to make it work... ...

jquerycsswordpressnivo-slider

Display HTML tags on an HTML page using TypeScript

In my angular application, I encountered an issue where I needed to call one component inside another component. Initially, I was able to achieve this by simply using the second component's selector in the HTML of the first component: html: <div&g ...

javascripthtmlangulartypescript

Issue with submit button functionality in Wicket when the value is empty

This is a custom class called YesNoPanel that extends the Panel class: public class YesNoPanel extends Panel { /** * */ private String password = "Password"; public String getPassword() { return password; } public void setPassword(String passwo ...

javahtmlwicket