Photo showing up in an unexpected location

I am looking to add a small image before each line on my list.

Here is the CSS code:

.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;}

This is the HTML structure:

<div class="panel">My quick links</div>
<div class="arrow"></div>
<a href="/messages.php?p=new" class="list">Send a new message</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#password" class="list">Change my password</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#picture" class="list">Upload a new site image</a>
<br />

The issue I am facing is that the images seem to be appearing at the end of the previous line instead of at the beginning of the next line.

Do you have any solutions for this problem?

htmlcss

Answer №1

Your line break tag does not properly clear the float, it only moves down a set number of pixels defined in your CSS - most likely 8 pixels, which is not enough to clear the 15 pixel floating background image on the left side of the element.

To fix this issue, you should use something like <br style="clear:left"/> or <br style="clear:both"/>. The style "clear:left" will ensure that the content appears below the last floating element.

Alternatively, for better semantics, you could style an LI element as a block with a background image. If the image at ../images/design/box.png is larger than 15 pixels, be sure to use the overflow style property.

Update:

.left div.arrow{clear:left; background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

This would be a more semantically sound solution.

Answer №2

You have the option to minimize your effort by incorporating the arrow directly into the link:

a.arrow {
    background-image: url(../images/design/box.png);
    float:left;
    min-height:15px;
    margin-right:2px;
    display:block;
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding-right:20px
    }

To discover attractive links and menus, check out: I love lists.

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

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

javascriptcssnode.jsexpressejs

PHP and Bootstrap combine in this dynamic carousel featuring thumbnail navigation

Looking to create a dynamic bootstrap carousel with image thumbnails at the bottom? After exploring various code snippets and solutions, I stumbled upon this link. While the code worked, I found the thumbnails to be too small. Below are the functions I use ...

javascriptphphtmlcsstwitter-bootstrap

What is the best way to access the onclick calling object?

Is there a way to have a handler on the calling object of the onclick event? <a href="123.com" onclick="click123(event);">link</a> <script> function click123(event) { //I need access to <a> in order to man ...

javascriptjqueryhtml

Determine the closest input value by clicking a specific link

Can you help me with a task involving text inputs and links? <p><input type="text" name="color[]" value="orange" /> <a href="#" class="show-color">color</a><br /> <input type="text" name="color[]" value="purple" /> < ...

jqueryhtml

Arranging divs beneath other elements using CSS positioning without needing to modify the HTML code

i need to align the list elements under the menu items, but the layout crashes when the fourth item is displayed. I can't change the HTML code without affecting the layout of my app. Is there a way to dynamically hide and show the elements on the page ...

jqueryhtmlcss

The content will be visible when the masonry element is in the active state

I have been working on creating a unique image gallery effect using Masonry layout where the images start at 0.2 opacity and change to full opacity of 1 when hovered over. Additionally, I want each image to fade to 0.7 opacity with text "Petra, Jordan" app ...

htmlcsshoveropacitymasonry

Unable to apply CSS modifications to child elements in AngularJS

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...

javascripthtmlcssangularjs

Having issues with the input event not triggering when the value is modified using jQuery's val() or JavaScript

When a value of an input field is changed programmatically, the expected input and change events do not trigger. Here's an example scenario: var $input = $('#myinput'); $input.on('input', function() { // Perform this action w ...

javascriptjqueryhtmleventsinput

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling

What is the method for selecting an li element within a ul list using Selenium in Python?

My goal is to automate the process of clicking on 'National Data' on a specific website using the Selenium package in Python. The website I am referring to can be found at . Although I attempted to achieve this automation, I encountered difficul ...

pythonhtmlselenium

The CSS background image doesn't appear on my personal device

I am having trouble using a local image as the background image for a section of my website. Even after entering the image URL and running the project, nothing is appearing. As a beginner in CSS and HTML, I would greatly appreciate any help or advice on ho ...

htmlcssbackground-image

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

Dealing with the challenge of sorting and editing one div at a time

I'm encountering an issue with my script where the input textbox becomes uneditable when I use sortable for a div element. In my code, I have drag and drop functionality where after dropping, the div should be sortable and the input should be editabl ...

javascriptjqueryhtml

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

javascripthtmlasp.net-mvc

The navigation bar is not staying fixed

Having trouble with the Bootstrap navbar-fixed-top feature. I have not applied any other styling to the nav element and have even tried adjusting z-index values with no success. <header> <nav class="navbar navbar-fixed-top navbar-expand-l ...

htmlbootstrap-modalnav

Is there a way to show text as symbols in Primeng components?

Check out this helpful example that demonstrates what I am attempting to achieve. I have implemented p-menu from primeng. Is there a method to convert text into symbols like &trade to ™ and &#8482 to ®? ...

javascripthtmlangulartypescriptprimeng

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...

javascripthtmlcssdarkmode

Is there a way to identify which elements are currently within the visible viewport?

I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...

javascripthtmlangulartypescript

The height of the logo is not the same as the height of the menu

Seeking assistance with aligning a logo next to the navigation menu on my website. Despite my attempts to adjust margins and paddings, the logo and menu appear to be misaligned. As a beginner in CSS, any guidance or tips would be highly appreciated! https ...

htmlcss

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

javascripthtmlcssangularjsionic-framework