Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well.

<div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "viewNews.php" >News</a></li></ul></div>

The CSS code for this menu is as follows:

.mmenu{
    height: fit-content;
    width: fit-content;
    float: left;
    position: fixed;
}
.mmenu ul
{
    margin-top: 20px;
    margin-left: 15px;
}
.mmenu li
{
    margin-bottom: 0px;
    width: 150px;
    color: white;
}
.mmenu a {
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
    padding-top:12px;
    padding-bottom: 7px;
    text-align:left;
    padding-right: 12px;
    padding-left: 15px;
    position: relative;
}
.menu-news{
    background-image:url('menu icons/css-sprite.png');
    background-repeat: no-repeat; background-position:5px 17px;
}

One issue I am facing is that the menu text appears above the image. How can I create space between the image and the text?

htmlcssmenucss-floatmenubar

Answer №1

To ensure the text does not overlap with the background image, you may want to consider adding some padding to the menu-news class.

.menu-news{
    background-image:url('menu icons/css-sprite.png');
    background-repeat: no-repeat; 
    background-position:5px 17px;
    padding-left: 50px; /* Adjust padding as needed */
}

Answer №2

Make sure to customize the background position to your liking or add some space around the text.

Answer №3

You utilized the background-position property for your background-image, but you have the flexibility to alter the image's position.

Consider adding padding-left to your menu-news class or applying padding to .mmenu a{ }

For example:

.mmenu a {
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
    padding-top:12px;
    padding-bottom: 7px;
    padding-left: xx px /* added now */
    text-align:left;
    padding-right: 12px;
    padding-left: 15px;
    position: relative;
}

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

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap

Is there a flaw in how Firefox handles text-overflow and inline-block?

It seems that according to the text-overflow specification, the ellipsis effect only applies to inline elements: This property defines how content within an inline element is displayed when it overflows its container's boundaries in the inline dire ...

htmlcssfirefoxlanguage-lawyer

Clickable link that directs to a particular tab on a webpage (cbpFWTabs)

I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...

javascriptjqueryhtml

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

javascriptjqueryhtmlcss

Tips for retaining the original size of an image in HTML5 canvas drawImage

function getBase64ImageData(_id) { var canv = document.createElement('CANVAS'); var context = canv.getContext("2d"); var imageElem = document.getElementById(_id); context.drawImage(imageElem, 0, 0); var dataURL = canv.toDat ...

javascripthtmlimagecanvas

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Generate dynamic and user-defined positioning requires input parameters: offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth ...

javascripthtmlcssdom

Tips for identifying when a change has been made to a SCSS file or any of its partial files

Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code: require "sass" Sass::Engine.new(File.read(scss), options).render By utilizing appropriate hash val ...

cssrubysassfileupdate

Discovering distinct colors for this loading dots script

Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...

javascripthtmlcss

Using Material UI v1 to customize the widths of table columns

I am looking to configure column widths on a Material UI table using CSS, rather than within React with "classes." However, I am struggling to understand how the column widths are actually controlled. Despite trying to set widths on the TH columns, it does ...

cssreactjsmaterial-ui

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Currently, I am in the process of working on a website that has opted for the adaptive approach, using separate mobile and desktop templates instead of responsive design. Despite this choice, Bootstrap is still being utilized on these templates, loading al ...

csstwitter-bootstrapsassbootstrap-sass

What is the process for creating a duplicate element within the target div after the original element has been dropped?

Imagine a scenario where the "HI" div is dragged into the "DRAG HERE" div, causing the "HI" div to be removed from its original location. What if, instead of disappearing, dragging the "HI" div to another location generated a new "HI" div? /** * Fu ...

javascripthtml

Swapping out a character on a webpage using jQuery

Can someone help me remove the colon from this code snippet on my webpage? <h1><b>Headline:</b> something</h1> I'm looking for a simple solution using jQuery, as I am a beginner in JavaScript. Please include the complete code ...

javascriptjqueryhtml

Fixing the issue of a div exceeding the height of its parent div in Tailwindcss

One issue I'm encountering is with my card element, which has a fixed height of h-80 in Tailwind. Typically, I use this card within a grid. However, I recently added a div inside the card that is larger than its parent div, and I want it to scroll ve ...

javascripthtmlvue.jstailwind-css

Why won't my browser properly center my CSS navigation menu?

After experimenting with different CSS properties like margin-right: auto and margin-left:auto, I found that using display: inline-block works well for centering actual links, but it causes issues with the menu when added as a parent element. I suspect th ...

cssnavigationcentering

What steps can I take to ensure that my server is accessible to all users?

After successfully creating a chat server using Node.JS and hosting it on my LocalHost (127.0.0.1), I realized that only I have access to the chat. To make the chat server accessible to everyone, I want to deploy it on my real server. The real server URLs ...

javascripthtmlnode.js

Incorporating Social Share Buttons to Enhance User Engagement on Your WordPress E

Looking to enhance my product page by adding social icons right below the 'Add to Cart' button. The product page URL is https://flowersforeveryone.co.za/product/cheerful-orange-tulips/. I already have a 'social menu' set up. How can I ...

phpcsswordpresswoocommerce

Choose the desired options to add to the selection box

Here is a question that I have: <select class="myselect"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4 ...

jqueryhtmlselect

What is the best way to line up a checkbox and its labels alongside a dropdown menu?

My index.html file has a header like this: https://i.sstatic.net/s0hAt.png I'm trying to align the checkbox and its label with the dropdown menu "In ordine". I'm using only bootstrap (no custom classes) and my current page layout is as follows. ...

htmlcssbootstrap-4

Steps for generating a sophisticated shadow effect using CSS

Currently in the process of revamping a poorly designed website by replacing images with CSS whenever possible, along with other updates. I have encountered a challenging graphic (there are three of these, one for each active tab): Take note of how the sh ...

htmlcss

Inexplicably bizarre HTML glitch

I am currently utilizing a comment system that involves adding a new row to a SQL database. The system seems to be working fine; however, when I try to display the comments, the formatting of the comment div becomes all jumbled up. You can view the page wh ...

phpsqlcsshtml