I'm looking to adjust the position of an image inside a div without affecting the position of the entire div

When creating a horizontal navigation bar with an image, I encountered an issue where the image link did not align with the rest of the links on the navigation bar. I wanted to drop it down by a pixel or two without affecting the position of the other links within the div tag.

Using { position: absolute; } and { position: relative; } caused the image link to overlap the other links.

Check out how it looks normally: https://i.stack.imgur.com/3KrbT.jpg

Here is how it appears with absolute positioning: https://i.stack.imgur.com/Xx0Y0.jpg

csshtml

Answer №1

Check out these suggestions:

li {
  display: inline-block;
  margin: 0 5px 0 0;
}

#apps {
  vertical-align: middle;
}

VIEW DEMO

SNIPPET PREVIEW

#top-navbar {
  float: right;
  display: block;
  padding: 10px;
  word-spacing: 5px;
  text-align: center;
  font-family: Arial;
  font-size: 13pt;
  position: relative;
}
#signin {
  background-color: #4387FD;
  color: white;
  width: 120px;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  word-spacing: 1px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 5px 0 0;
}
#apps {
  vertical-align: middle;
}
a {
  text-decoration: none;
}
<div id="top-navbar">
  <ul>
    <li>Gmail</li>
    <li>Images</li>
    <li>
      <a href="https://www.example.com/options/">
        <img id="apps" src="image-url-here" />
      </a>
    </li>
    <li>
      <a id="signin" href="https://accounts.example.com/ServiceLogin?hl=en&passive=true">Sign In</a>
    </li>
  </ul>

</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

Connecting a hero image in CSS for Flask application: a step-by-step guide

Adding a hero image to my Flask app page has been challenging. Here is the directory structure of my Flask project: -static |--css_files |--my.css |--images |--img.jpg -templates |--layout.html In order to incorporate a hero image, I have includ ...

pythonhtmlcssflaskjinja2

Bootstrap button groups do not support the checking functionality of radio buttons

My bootstrap modal contains a form with two radio style buttons created using the example for normal button styled radio options found here: <form id="changePlanForm" action="/change_plan_submit.php" method="post"> & ...

htmljquerybootstrap-4

GWT integration for TinyMCE

I've been attempting to incorporate TinyMCE with GWT's RichTextBox, but so far I haven't had any luck. The issue seems to be that GWT turns the Rich text area into a #document, rather than a standard textarea in HTML. Does anyone know how to ...

javascriptjqueryhtmlgwttinymce

How to apply gradient colors to borders using CSS

Is it possible to create a simple border bottom color with a gradient effect? div{ border-bottom:10px solid linear-gradient(#FF4000, transparent); height:20px; width:auto; background:#ccc; } <div></div> ...

css

Entry Points for Logging In

After stumbling upon this pre-styled Material UI login page example, I decided that it was exactly what I needed. However, I ran into an issue when trying to figure out how to store the username and password values. Whenever I try to use 'State' ...

javascripthtmlreactjsauthenticationmaterial-ui

Access the JavaScript variable in a webview and store it in an Android variable

I have been attempting to retrieve a variable from a webview, but I am only able to make modifications like this: browser.loadUrl("javascript:var x = document.getElementById('login').value = 'something';"); However, I need to be able ...

javascriptandroidhtmlwebwebview

Trouble with setting the color attribute using setProperty in a GXT text area

Help needed in dynamically changing the font color of a text area from the color menu. Existing attempts to change it have not been successful. Can someone provide assistance? final ColorMenu fontColorMenu = new ColorMenu(); fontColorMenu.getPalette().a ...

javahtmlcssgwtgxt

Collision of CSS styles with a different CSS stylesheet causing conflicts

Currently, I am in the process of developing a website and have encountered a specific issue. Within my page, there are various divs and tables present. I have meticulously crafted classes and styles to customize the appearance of these elements to align ...

jqueryhtmlcss

Converting Excel values to Exponential format using Python

I'm struggling to find a solution for extracting the Invoice Number in Python from an Excel sheet without turning it into exponential form. Expected Value: 8000030910 Result: 8.00002e+09 Python Result Excel sheet d1.append(sheet.cell_value(j,0)) ...

pythonhtmlexcel

What is the best way to retrieve data from within HTML tags using PL/SQL?

Within my Oracle PL SQL project, I am dealing with an html file that contains the following comment tag. I need to figure out how to retrieve the value between these comment tags. <comment label="Comments">Text_to_Extract</comment>&l ...

htmloracleplsql

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

javascriptjqueryhtmlcssviewport

Why is my Javascript XMLHttpRequest onreadystatechanged event not triggering?

I am facing an issue with my html file and a .txt file stored in the same directory on a webserver. In the html file, I have the following code: <html> <head> <script> window.onload = function() { receiveMessage(); } function recei ...

javascripthtmlajax

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

Utilizing the Jquery hover feature to reveal or conceal an element

My Hover function is designed to display and hide sub menus when a person hovers on them. The issue I'm facing is that the menu disappears when I move the mouse down towards it. Can someone help me identify what I am doing wrong here? ...

javascriptjqueryhtmlcss

JQuery fails to retrieve accurate width measurements

Utilizing this code snippet, I have been able to obtain the width of an element and then set it as its height: $(document).ready(function(){ $(".equal-height").each(function(){ var itemSize = $(this).outerWidth(); cons ...

javascriptjqueryhtmlcss

SWF file redirection with a flash blast

How can I implement a click event and redirect on an embedded SWF object? I currently have the following code, but it doesn't appear to be working: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia. ...

htmlflash

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

cssangularjstwitter-bootstrap

Information flows from the Bootstrap 4 template

When viewed on a mobile device, the content extends beyond the page and a horizontal scrollbar appears. You can view my page by clicking this link. <div class="custom_content col-md-12"> <div class="container"> <div class="row"> ...

htmlcssbootstrap-4flexbox

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss