CODEWITHSUNDEEP
htmlcssforms
Joe F
Joe F

Reputation: 163

Positioning select element in HTML

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>

Upvotes: 3

Views: 10016

Answers (5)

Brainfeeder
Brainfeeder

Reputation: 2632

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.

Upvotes: 2

bazzells
bazzells

Reputation: 329

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.

Upvotes: 2

Thielicious
Thielicious

Reputation: 4442

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.

Upvotes: 2

0_0
0_0

Reputation: 537

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>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371093

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>

Upvotes: 3

Related Questions