Positioning select element in HTML

user_8576549 0
Viewed 5876

I have this select element on my HTML which looks like this

enter image description here

Now I want to position my select element on the top left of the division border and It won't seem to move. Am I doing it wrong? Do I have to add something my codes?

Here's the css:

<style>

 body {
    background-image: url("img/wood.jpg");
 }
 
 ​.MySelectCPU{
    margin-top:20px;
    margin-left:200px;
    }​​​
 
</style>

Here's the html code:

<div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br>


 <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:100px;" align="center">
 
 <select id="MySelectCPU" onchange="location = this.value;">
  <option disabled selected hidden>Deployed Equipments</option>
  <option value="viewcpu.php">Deployed CPUs</option>
  <option value="viewmouse.php">Deployed Mouse</option>
  <option value="viewkeyboard.php">Deployed Keyboards</option>
  <option value="viewmonitor.php">Deployed Monitors</option>
  <option value="viewlaptop.php">Deployed Laptops</option>
 </select>

 </div><br clear="all">
 
 <span style="padding-right: 10px; font-family: Questrial;" ><a href="logout.php" class="btn btn-primary">Logout</font></a></span>
 <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span>

forms css html
5 Answers

Instead of padding, use height and width.

#container {
  width: 500px;
  font-family: Questrial;
  font-size: 20px;
  border: 1px solid #000;
  height: 200px;
  width: 100%;
  /* padding: 100px; */
}
<div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br>

<div id="container">

  <select id="MySelectCPU" onchange="location = this.value;">
  <option disabled selected hidden>Deployed Equipments</option>
  <option value="viewcpu.php">Deployed CPUs</option>
  <option value="viewmouse.php">Deployed Mouse</option>
  <option value="viewkeyboard.php">Deployed Keyboards</option>
  <option value="viewmonitor.php">Deployed Monitors</option>
  <option value="viewlaptop.php">Deployed Laptops</option>
 </select>

</div><br clear="all">

<span style="padding-right: 10px; font-family: Questrial;"><a href="logout.php" class="btn btn-primary">Logout</font></a></span>
<span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span>

The gap between the top border and the select is caused by the font size. To remove the gap, reduce the font-size or set a smaller line-height.

#container {
  width: 500px;
  font-family: Questrial;
  /* font-size: 20px; */
  border: 1px solid #000;
  height: 200px;
  width: 100%;
  /* padding: 100px; */
}
<div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br>

<div id="container">

  <select id="MySelectCPU" onchange="location = this.value;">
  <option disabled selected hidden>Deployed Equipments</option>
  <option value="viewcpu.php">Deployed CPUs</option>
  <option value="viewmouse.php">Deployed Mouse</option>
  <option value="viewkeyboard.php">Deployed Keyboards</option>
  <option value="viewmonitor.php">Deployed Monitors</option>
  <option value="viewlaptop.php">Deployed Laptops</option>
 </select>

</div><br clear="all">

<span style="padding-right: 10px; font-family: Questrial;"><a href="logout.php" class="btn btn-primary">Logout</font></a></span>
<span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span>

user_35972760

Instead of height, width and padding, use positioning:

<div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br>


 <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:100px;position:relative;" >
 
 <select id="MySelectCPU" onchange="location = this.value;" style="position:absolute;top:10px;left:10px;">
  <option disabled selected hidden>Deployed Equipments</option>
  <option value="viewcpu.php">Deployed CPUs</option>
  <option value="viewmouse.php">Deployed Mouse</option>
  <option value="viewkeyboard.php">Deployed Keyboards</option>
  <option value="viewmonitor.php">Deployed Monitors</option>
  <option value="viewlaptop.php">Deployed Laptops</option>
 </select>

 </div><br clear="all">
 
 <span style="padding-right: 10px; font-family: Questrial;" ><a href="logout.php" class="btn btn-primary">Logout</font></a></span>
 <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span>

The above snippet has some changes. I positioned the parent div relative, and the select element absolute, with 10px distance from top en left border of the parent div.

user_13972200

Another option would be to set the parent div's positioning to relative, then you can use absolute positioning on the select element with the top set to 0 and left to 0.

Edit: this would be useful if the align and padding were properties you want to keep, but override with this element.

user_86521090

You have . in CSS it looks for a class. .MySelectCPU { ...

But you have declared it as a ID element in HTML, should be class=MySelectCPU and not id= or change it to #MySelectCPU in CSS.

user_61890020

You have align="center" on the parent div. Remove it to align the Select box on left and then adjust padding accordingly to get it at the position you want.

<div style="font-family: Questrial; font-size:40px;">Administrative Control Panel Page</div><br>


 <div style="width:500px; font-family: Questrial; font-size:20px; border:1px solid #000; padding:10px 5px;">
 
 <select id="MySelectCPU" onchange="location = this.value;">
  <option disabled selected hidden>Deployed Equipments</option>
  <option value="viewcpu.php">Deployed CPUs</option>
  <option value="viewmouse.php">Deployed Mouse</option>
  <option value="viewkeyboard.php">Deployed Keyboards</option>
  <option value="viewmonitor.php">Deployed Monitors</option>
  <option value="viewlaptop.php">Deployed Laptops</option>
 </select>

 </div><br clear="all">
 
 <span style="padding-right: 10px; font-family: Questrial;" ><a href="logout.php" class="btn btn-primary">Logout</font></a></span>
 <span style="font-family: Questrial;"><a href="home.php" class="btn btn-primary">Profile</font></a></span>

user_51565490
Related