Unexpected behavior exhibited by form in response to CSS styling

When I try to adjust the values of left, top, and right, nothing seems to change. I also experimented with the position attribute without any success.

What could be the mistake on my end?

.PHP_A {
  position: static;
  left: 200px;
  top: 400px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
<div class="PHP_A">
  <form action="#" method="post">
    Course Name:PHP_A</br>
    </br>
    Course Duration:100 HOURS</br>
    </br>
    CourseFees:$1000</br>
    </br>
    </br>
    <input type="submit" name="submit" value="APPLY" />
  </form>
</div>
</br>
</br>

htmlcss

Answer №1

If you need to adjust the positioning of an element, consider changing from static to either absolute or fixed, depending on your specific requirements.

More information on CSS position property

static: Default value. Elements render in order, as they appear in the document flow

absolute: The element is positioned relative to its first positioned (not static) ancestor element

fixed: The element is positioned relative to the browser window

<style>
.PHP_A
{
  position: absolute;
  left: 200px;
  top: 400px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;   
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
</style>
<div class="PHP_A">
  <form action="#" method="post">
    Course Name: PHP_A </br></br>
    Course Duration: 100 HOURS </br></br>
    CourseFees: $1000 </br></br>
    </br></br> 
    <input type="submit" name="submit" value="APPLY" />
  </form>
</div>

Answer №2

The issue was with the code "position:static;". It was causing your div to align in a predefined structure in the CSS document flow. Instead, you should use "position:relative". I have made some modifications to your CSS, so now you can assign any value to left or right and observe the result.

<style>
.PHP_A
{
  position:absolute;
  left: 10%;
  top: 40px;
  right: 200px;
  z-index: 1;
  background: #ccccff;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;   
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
</style>

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

Tips on sending the total value of a form to a PHP script

Looking for help with a PHP script to calculate the sum of checked checkboxes with corresponding numeric values. For example, if checkbox 1 = 80; checkbox 2 = 21; and checkbox 3 = 15, and the user checks checkboxes 2 and 3, the PHP should output 36. I hav ...

javascriptphphtmlcheckbox

Creating a fluid side navigation bar in reactjs

Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...

javascriptjqueryhtmlcssreactjs

Generate images in real-time based on model element properties

I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...

c#htmlimagebootstrap-4razor-pages

CSS-Styled Vertical Timeline

I have been working on creating a vertical timeline with icons embedded within it. I initially used this as a reference point. I was able to achieve the desired layout by adding extra spans inside the div. However, the end result appears somewhat cluttere ...

htmlcss

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

javascriptjqueryhtml

Enhance the functionality of your website by implementing a zoom feature

I am looking to dynamically change the CSS of a div using jQuery when it is clicked. The challenge I am facing is that there are multiple divs with the same class and I am unable to modify their classes as they are created dynamically using PHP. <div ...

jqueryhtmlcss

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

cssresponsive-designmedia-queries

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

javascripthtmlnumberscurrency

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

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

javascriptcssangularjsng-gridangular-ui-grid

Issues with Django image display in media despite proper configuration settings

I'm having an issue uploading images from a form and displaying them on another template because the images in media are not being found. Model Definition class Upload(models.Model): image = models.ImageField(upload_to='images/') View ...

pythonhtmldjango

The internal style sheet is being overridden by an earlier declared external CSS in the HTML document

Experimenting with the front end of a website using the latest version of bootstrap, 3.0. I am adjusting things by inspecting elements in Firebug, but something strange keeps catching my attention. Even though my <head> is structured like this: < ...

csstwitter-bootstrapstyles

Update the content within a div based on the selected option from a dropdown menu or

Is there a way to change the displayed text based on user input or selected option? By default, the text shown is "Aa Bb Cc Dd Ee...", but it can be changed by selecting different options. If text is typed into the input field, the displayed text will up ...

javascripthtmljquery

Is the Material-UI 1.3 font size failing to adapt to varying screen widths?

Looking to create an app with responsive font sizes using material-ui (v1.3)? Also, want the font size to shrink when the screen size is smaller and adjust automatically. However, the current code doesn't update the font size dynamically as the screen ...

htmlcssreactjsmaterial-ui

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

What is the method for rearranging the order of Bootstrap 5 columns within nested elements without using hidden duplicates?

This snippet of code is designed to show blocks in different ways on mobile and desktop devices. <div class="col-12 col-sm-6 order-sm-1">TITLE</div> <div class="col-12 col-sm-6 order-sm-0">IMAGE</div> <div cla ...

htmlcsstwitter-bootstrapresponsivebootstrap-5

Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these thi ...

htmlcss

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

javascripthtmljson

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

Identify Safari browser and redirect visitors

Here is the script I am using to detect and redirect a page specifically when Safari is used: if(/safari/.test(navigator.userAgent.toLowerCase())) { window.location.href = "elsewhere.html" } Currently, it redirects in both Safari and Chrome. How can ...

javascripthtmlhttp-redirect