Jump to content

How do I get rid of the excess space between the resistor image and the text?

gregaryb

By gregaryb
in CSS

 Share

Recommended Posts

gregaryb Newbie

gregaryb

Posted
Posted (edited)

How do I make the text 'Fixed Resistors" but up against the image of the resistor?

  

		<style>
		
			.menu
			{
				background-color: teal;
				height: 64Px;
			}
			
			.menu_item
			{
				padding-right: 50Px;
				display: inline-block;
				color: white;
			}

			.menu_spacer
			{
				width: 20Px;
				display: inline-block;
			}
			
			.menu_item_container
			{
				background-color: teal;
				border-style: none;
				border-width: 1Px;
				border-color: black;
				display: inline-block;
				vertical-align: top;
			}
			
			.clickable
			{
				cursor: pointer;
			}
			
			.popup_menu
			{
				background-color: teal;
				border-style: solid;
				border-width: 1Px;
				border-color: #006060;
				display: none;
			}
		
			.popup_menu_item
			{
				background-color: teal;
				border-style: solid;
				border-width: 1Px;
				border-color: #006060;
				display: block;
				padding-left: 5Px;
				padding-right: 5Px;
			}
			
			.popup_menu_item_text
			{
				border-style: solid;
				border-color: black;
				border-width: 1Px;
				margin-top: 0Px;
				margin-bottom: 0Px;
			}
			
			.popup_menu_item_resistor_image
			{
				display: block;
				transform: rotate(90deg);
				height: 120Px;
				border-style: solid;
				border-color: black;
				border-width: 1Px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 0Px;
				margin-bottom: 0Px:
			}
			
			.workspace
			{
				display: block;
				background-color: white;
				margin-top: 28Px;
				border-style: solid;
				border-width: 2Px;
				border-color: black;
				overflow: scroll;
				height: 77.5%;`
			}
			
			.canvas
			{
				width:100%;
				height:100%;
			}
			
		</style>

	</head>

	<body>
	
		<!-- Horizontal Navigation bar -->
		<nav class="nav-fixed arduino_teal">
			<div class="nav-wrapper">
				<span class="brand-logo app_title translatable_title">Ardublockly Simulator</span>
				
				<!-- Horizontal Navbar links only shown on large resolutions -->
				<ul id="nav-mobile" class="right hide-on-med-and-down">
					<li><a href="#" id="button_start"><span class="translatable_open" onclick="doStart()">Start</span></a></li>
					<li><a href="#" id="button_stop"><span class="translatable_save" onclick="doStop()">Stop</span></a></li>
				</ul>
			</div>
			<div id="menu" class="menu">
				<div id="spacer" class="menu_spacer"></div>
				<div id="resistors_menu_container" class="menu_item_container"> 
					<div id="resistors_menu_item" class="clickable menu_item" onclick="doDisplayResistorsPopup()">RESISTORS</div>
					<div id="resistors_popup" class="popup_menu clickable">
						<div class="popup_menu_item">
							<span class="popup_menu_item_text">Fixed Resistor</span>
							<img class="popup_menu_item_resistor_image" src="img\Components\Resistors\R10k.png">
						</div>
						<div class="popup_menu_item">
							<span class="popup_menu_item_text">Potentiometer</span>
						</div>
						<div class="popup_menu_item">&nbsp;LDR</div>
						<div class="popup_menu_item">&nbsp;LED</div>
						<div class="popup_menu_item">&nbsp;RGB LED</div>
					</div>
				</div>

				<div id="leds_menu_container" class="menu_item_container"> 
					<div id="leds_menu_item" class="clickable menu_item" onclick="doDisplayLEDPopup()">LEDs</div>
					<div id="leds_popup" class="popup_menu">
						<div class="popup_menu_item">&nbsp;LED</div>
						<div class="popup_menu_item">&nbsp;RGB LED</div>
					</div>
				</div>

				<div id="discrete_components_menu_container" class="menu_item_container"> 
					<div id="discrete_components_menu_item" class="clickable menu_item" onclick="doDisplayDiscreteComponentsPopup()">DISCRETE COMPONENTS</div>
					<div id="discrete_components_popup" class="popup_menu">
						<div class="popup_menu_item">&nbsp;NPN Transistor</div>
						<div class="popup_menu_item">&nbsp;Diode</div>
						<div class="popup_menu_item">&nbsp;Capacitor</div>
					</div>
				</div>

				<div id="switches_menu_container" class="menu_item_container"> 
					<div id="switches_menu_item" class="clickable menu_item" onclick="doDisplaySwitchesPopup()">SWITCHES</div>
					<div id="switches_popup" class="popup_menu">
						<div class="popup_menu_item">&nbsp;Switch</div>
						<div class="popup_menu_item">&nbsp;Push Button</div>
					</div>
				</div>

				<div id="motors_menu_container" class="menu_item_container"> 
					<div id="motors_menu_item" class="clickable menu_item" onclick="doDisplayMotorsPopup()">MOTORS</div> 
					<div id="motors_popup" class="popup_menu">
						<div class="popup_menu_item">&nbsp;DC Motor</div>
						<div class="popup_menu_item">&nbsp;DC Gear Motor</div>
						<div class="popup_menu_item">&nbsp;Servo</div>
						<div class="popup_menu_item">&nbsp;Vibration Motor</div>			
					</div>
				</div>

				<div id="sensors_module_menu_container" class="menu_item_container"> 
					<span  id="sensor_modules_menu_item" class="clickable menu_item" onclick="doDisplaySensorModulesPopup()">SENSOR MODULES</span> 
					<div id="sensor_modules_popup" class="popup_menu">
						<div class="popup_menu_item">&nbsp;Ultrasonic Sensor</div>
						<div class="popup_menu_item">&nbsp;Motion Sensor</div>
						<div class="popup_menu_item">&nbsp;Temperature Sensor</div>
						<div class="popup_menu_item">&nbsp;Piezo Speaker</div>
					</div>
				</div>

				<div id="power_supply_menu_container" class="menu_item_container"> 
					<span  id="power_supply_menu_item" class="clickable menu_item" onclick="doDisplayPowerSupplyPopup()">POWER SOURCES</span> 
					<div id="power_supply_popup" class="popup_menu">
						<div class="popup_menu_item">&nbsp;12V Battery</div>
						<div class="popup_menu_item">&nbsp;6V Battery</div>
						<div class="popup_menu_item">&nbsp;3V Battery</div>

					</div>
				</div>
			</div>
		</nav>

 

image.jpg

Edited by gregaryb
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The transform property continues to reserve the same amount of space on the page as before the transformation took place. For this reason, you will have to shrink the container which had the image inside it.

You're going to have to rewrite the HTML because you need a wrapper around the image and easy access to the elements which are surrounding the it. 

<div class="popup_menu_item">
  <span class="popup_menu_item_text">Fixed Resistor</span>
  <span class="popup_menu_item_resistor_image">
  	<img src="img\Components\Resistors\R10k.png" alt="Fixed resistor">
  </span>
</div>

Now the CSS can be updated. We prevent the container of the image from exceeding the image's width, which is 30px, and we move the image upwards using a top margin. We need to move the center of the image, which is now 60px from the top of the container, up to the center of the container, which is 15px from the top. This means we have to move the image upwards by 60 - 15 = 45px. 

.popup_menu_item_resistor_image {
  display: block;
  height: 30px;
}
.popup_menu_item_resistor_image img {
  display: block;
  transform: rotate(90deg);
  height: 120Px;
  border: 1px solid black;
  margin-top: -45px;
  margin-left: auto;
  margin-right: auto;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...