Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names.

Currently, this is how it appears: https://i.stack.imgur.com/Yv1p3.png

I would like the "Buy Fudgee Bar..." item to be positioned next to the "Buy 2 bioderm coolness.." item. If they can be combined into one, they will appear right next to each other, correct? :o

How can I achieve this?

Here is the Smarty template file for the module:

{assign var=zItem value=0}
{if isset($isian) AND $isian}
        {foreach from=$isian item=cat name=productCat}
    {assign var=zItem value=$zItem+1}

            {$products=$cat.produk}
            {if isset($products) && $products}
                        {counter name=active_ul assign=active_ul}
                        {include file="$style" class='homefeatured tab-pane' id='prodcat' active=$active_ul}
                        {/if}


         {/foreach}
        {else}
                <p>{l s='No featured products' mod='prodcat'}</p>
        {/if}

The final result doesn't have to necessarily be a single item. As long as "buy fudgee bar chocolate" is displayed right next to "buy 2 bioderm coolness.." and there are no blank spaces left if there are other categories. The idea is to continuously display the products without any gaps.

Answer №1

It appears that the <ul> elements do not have distinct <li> items within them. If the <ul> elements are sharing <li> items, you can try applying the following CSS:

ul li{
   display: inline-block;
}

Alternatively,

ul li{
   float:left;
}

If the <ul> elements contain separate <li> items, consider adding a CSS rule to the entire <ul> tags such as float: left or display:inline-block.

Answer №2

When the li elements do not have uniform height and you need to align them differently, follow these steps: Add the following CSS code: ul li{vertical-align:top;}

The options for vertical align values are top, middle, and bottom. By default, the value is set to bottom.

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

Unable to access account: HTML Javascript login issue

Problem with Login Code As a newcomer to HTML, CSS, and almost unknown in Javascript, I sought help from others to create a login code. The code was working fine earlier, but now it's not functioning as expected. Despite checking everything, I can&ap ...

Clicking on the overlaying divs in the slideshow does not trigger any changes when clicked

My question is about the behavior of the href attribute in a fade-style animation. Even when different containers are visible, the href value remains constant. Below is the HTML code: <div id="teaserslider"> <ul> <li> ...

Getting the value of elements with the same id in JavaScript can be achieved by utilizing the getElement

When I click on the first delete link, I want to display the value from the first input box. Similarly, when I click on the second delete link, I want to show the value from the second input box. Currently, it is always showing the value from the first del ...

Unexpected behavior observed when animating CSS transform in IE

I am currently facing an issue with a CSS animation on my website that animates an arrow back and forth. The animation is working perfectly on all browsers except for Internet Explorer, where there seems to be a glitch causing the Y position of the arrow t ...

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

Develop a unique method for loading AngularJS templates

When working with AngularJS, there are various ways to provide an external template, such as using a script tag or a separate HTML file on the web server. However, I am faced with a situation where I need to implement a custom logic for retrieving these ...

jQuery failing to append code after being removed

I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

Using Javascript to Manuever an Element via Arrow Inputs

Currently, I am in the process of developing a Tetris game with a rotating Tetris piece controlled by pressing the space bar. My next objective is to enable the movement of objects to the left and right using the arrow keys. After exploring various simila ...

How can I fill the space around a centrally aligned div?

I'm looking to create a centered div with additional divs or spans on each side to fill the empty space. Currently, I am using margining to center the div and you can see the implementation in this example. HTML Code: <div id='A> <d ...

What is the best way to trigger a jQuery function once a form has been successfully submitted?

Is there a way to execute a jQuery function AFTER a form has been submitted? I am familiar with calling a function ON submit, but I specifically need it to run after the form data has been posted and stored in the database using PHP. In my website projec ...

Create a URL hyperlink using javascript

I am looking to create a link to a page that updates its URL daily. The main URL is where X represents the day of the month. For example, for today, July 20th, the link should read: In my JavaScript section, I currently have code that retrieves the cur ...

When I click the button, the page goes blank and keeps loading endlessly

http://jsfiddle.net/iansan5653/7EPjH/17/ <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> function chart() { var pressure; ...

Revamping HTML with AngularJS Directive: Enhancing the Layout with New Angular Attributes

I am currently facing an issue with the compiler not recognizing a new attribute I have added in a directive. In my Angular TypeScript code, I have the following setup: public class MyDirectiveScope: ng.IScope { foo: boolean; } public class MyDirecti ...

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

The HTML element <p> is not spilling over onto a new line

Having trouble with text overflow in a kanban board? I've tried various CSS styling options like overflow-wrap: break-word;, word-wrap: break-word;, and hyphens: auto;, but nothing seems to work. Here's a preview. I'm using Vue.js, but I do ...

The erratic nature of Tailwind actions

Currently, I am immersed in a Livewire project and attempting to implement some Tailwind theme configurations. However, the process does not appear to be coherent whatsoever. Here is an excerpt of my Tailwind configuration: theme: { extend: { f ...

Achieving Perfect Alignment in Website Layout using CSS and HTML

I have a customized CSS layout that was made for me, but I am no longer in contact with the original creator. I wanted to increase the size of a specific div (#rightcolumn) by 55px. To achieve this, I resized the iframe within the div and it automatically ...