What is the best way to position my images next to text using inline-block in CSS?

I'm having trouble aligning images and links side-by-side in my side navigation bar. The images are supposed to show the destination of each link, and I want them to be next to their respective links. I also want the borders of each link to be equal. Check out how it looks here.

I need to place a guitar icon next to the Chords link, and do the same for the rest of the links and their respective icons. Here's the CSS code I'm using:

<div class="code-box" id="code-box">
  <img src="img/chords.png">
  <a href="#">Chords</a>
  <img src="img/tabs.png">
  <a href="#">Tabs</a>
  <img src="img/notereading.png">
  <a href="#">Note Reading</a>
</div>

I've tried setting the position property of the links to relative, and it worked for one link. However, when I tried adding more links, they didn't align properly as if they weren't within an inline-block element. I thought that inline-block would only make elements sit on the same line if they can fit. I would appreciate any help on this issue. Thank you!

htmlcss

Answer №1

The issue is not related to the inline-block property. I recommend trying the following HTML code instead. 

.sidebar {
        display: inline-block;
        overflow: hidden;
        position: fixed;
        margin-top: 60px;
        width: 200px;
        height: 300px;
        background-color: rgba(50, 50, 50, .8);
        transition: width .3s ease;
      }
      .sidebar a {
      display: inline-block;
        font-size: 1.5em;
        text-decoration: none;
        color: white;
        border: 1px solid rgba(25, 25, 25, .5);
        background-color: rgba(50, 50, 50, 1);
        border-collapse: collapse;
        transition: background-color .1s ease;
        width: 140px;
      }
      .sidebar img {
        transform: translateY(15px);
        width: 50px;
      }
      .sidebar_item {
          height:60px;
          display: inline-block;
      }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="sidebar" id="sidebar">
            <div class="sidebar_item">
                <img src="https://drive.google.com/uc?id=1TkoF1IzxW9y3Xs1YWYpDeX7qCye3ud45" width=55px height=55px>
                <a href="#">Chords</a>
            </div>
            <div class="sidebar_item">
                <img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
                <a href="#">Tabs</a>
            </div>
            <div class="sidebar_item">
                <img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
                <a href="#">Note Reading</a>
            </div>
          </div>
    </body>
    </html>

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

Mobile phone web development using HTML5

I am currently facing an issue with playing sound on mobile browsers. In my code snippet, I have the following: Response.Write("<embed height='0' width='0' src='Ses.wav' />"); While this works perfectly fine on desktop ...

javascripthtmlaudiomobile

increasing the size of the input thumb compared to the others

Hello fellow React developers, I'm currently learning by coding and I have a question about a slider. I'm trying to make the thumb of the slider bigger, but when I increase its size it doesn't fully display within the input area (as you can ...

javascripthtmlreactjsinputmaterial-ui

Tips for utilizing SeleniumRC within JUnit framework for elements with dynamically changing IDs

I'm currently in the process of automating a workflow and I need to click on a link within a table row. The challenge is that all links within the rows share the same element ID, and the source code has a JavaScript code snippet like this: ("Element I ...

cssseleniumelementxpath

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

cssangularangular-materialmat-drawer

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

Can someone assist me with moving additional product images next to the main product image in the default opencart 2.0.1.1 theme? Currently, they are appearing below the product image and I would like them to be displayed alongside it instead. ...

css

Incorporating external files into Javascript code may cause issues with its functionality

Currently, I have a fully developed PHP theme that I am in the process of designing. Within this theme, I have integrated an image slideshow plugin to enhance its functionality. The following code represents the implementation of the image slideshow: &l ...

javascriptphpjqueryhtmlcss

In Laravel Blade, the modal content is obstructed by the Modal Backdrop on portrait screen orientation

Within my Laravel Blade, I encounter an issue where a modal pops up in portrait orientation on an iPad Pro, but is obstructed by the backdrop div. The message prompts the user to rotate the screen to landscape mode. However, the modal works perfectly in la ...

javascripthtmlcssbootstrap-4laravel-blade

Differences between using CSS custom properties in the :root selector versus the body/html tags

Why would you choose to define global CSS custom properties in the :root element rather than in the body or html tags? How might this decision impact the effects or performance of the page? ...

csscss-variables

`Is it possible to remove an empty frame using javascript?`

I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...

javascriptjqueryhtml

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

Ways to apply a border-bottom to tr elements without affecting td elements

Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border? I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving ...

css

What is the best way to align div elements in HTML5?

I've spent countless hours trying to properly display and align multiple divs. Despite extensive research, I just can't seem to get it right. What I'm aiming for is to have the title of a section in the top left corner, an info box to the l ...

csshtml

Utilize React JS to incorporate multiple instances of the Bootstrap carousel within a webpage using Reactstrap

I am having difficulty using the bootstrap carousel multiple times on a single page. I have attempted to copy it as a new item numerous times, but I keep encountering errors. <CarouselItem onExiting={() => setAnimating(true)} onExited={() => ...

htmlnode.jsreactjsbootstrap-4reactstrap

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Is it possible to use the 34 Responsive Grid system to create a column that takes up two-thirds of the full width? Although the Grid System has equal columns settings, I'm curious how to combine or merge two columns together? <div class="containe ...

css34grid

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

Customize style with Dart programming language

Is it possible to modify a HTML element's CSS with DART? I've searched around but couldn't find clear instructions on how to accomplish this or if it's feasible at all. The main objective is to alter the position of a button on a webp ...

htmlcssdynamicdart

Using webapp2 to serve a stylesheet in a non-Google App Engine environment

After successfully deploying an app using webapp2/jinja2 and a Paste server, I encountered difficulties serving static stylesheets. I managed to access static files by following this method. Additionally, I implemented a StaticFileHandler that I discovere ...

pythoncssgoogle-app-enginestaticwebapp2

Achieving full table height with a parent having a min-height requirement

Encountering a seemingly straightforward issue where I am unable to make an inner div 100% height of the parent div, which is set with min-height 70vh. My goal is to have the table inside be 100% height and content vertically aligned. It currently works if ...

csstwitter-bootstrap

Firefox has trouble with jQuery AJAX as anchor tags in returned HTML are not clickable

The issue at hand: In Firefox, anchor tagged text in the returned HTML is not clickable (no "hand cursor" and no action), while IE 10 seems to handle it without any problems. The scenario: I am utilizing jQuery AJAX to request a PHP page that fetches HTML ...

jqueryhtmlajaxhyperlinkanchor