I have a Menu where each item has an image, and I am looking to connect those images with a horizontal line.
<ul>
<li>
<a href="#" title="Item1"><img src="foo/bar.png"></a>
</li>
<li>
<a href="#" title="Item2"><img src="foo/bar2.png"></a>
</li>
</ul>
To illustrate my point, here are 2 images:
Original:
Desired Outcome:
I am unsure about the necessary CSS properties to achieve this effect or if it can be done purely using CSS.
Greetings,
I believe you may find this link to be helpful...
[http://jsfiddle.net/UniqueUser/jhdslwue/][2]
Ensure that the line image is set to a size of 1 by 4 pixels.
Feel free to leave any comments or feedback.
There are numerous methods to accomplish this task, however, by following your method, simply attempt the following:
ul{background-image:url(images/line.png); background-repeat:repeat-x; background-position:50%; display:block;}
li{display:inline-block;}
In this code snippet, line.png represents a line similar to the one in your picture.
<div>
<a href="#" title="Product1"><img src="example/image1.png"></a>
<a href="#" title="Product2"><img src="example/image2.png"></a>
</div>
div {
height: 30px;
border-bottom: 3px solid #ccc;
}
div a {
display: inline-block;
margin: 0 15px;
width: 50px;
height: 50px;
}
How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...
Currently, I'm developing a CRUD example using dotnet core and Angular. In the backend, I have implemented a function in the CarController.cs as shown below: CarController.cs [Route("UpdateCar")] [HttpPut] public IActionResult Put([ ...
For my current project, I was tasked with designing a print view using HTML & CSS. This view is then converted into a PDF on the server and sent to an A5 printer for physical output. One of the specific requirements of this assignment is that the first pa ...
I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...
Having two PHP files where one is executed through a URL and makes AJAX calls to the second PHP file can present challenges. Sometimes, the AJAX results return HTML content with JavaScript events that do not work as expected. To solve this issue, I have in ...
How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...
The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...
Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...
When running scripts on an HTML page, the page tends to freeze until the script completes. This is why I am considering using workers. However, I have encountered a problem: <html> <head> </head> <body> <button onclick="startWor ...
Currently, I am in the process of designing a banner that will only be displayed when necessary. I am looking for techniques to achieve this goal effectively. Is there a way to align text centrally only if it fits on one line and does not wrap onto a new ...
I created a counter with context API in React, and I'm looking for a way to persist the state even when the page is changed. Is there a method to store the Counter value during page transitions, similar to session storage? My app utilizes React Router ...
jQuery(document).ready(function() { jQuery("#bfCaptchaEntry").on("click", function(){ jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF"); }); jQuery("#bfCaptchaEntry").on("blur", function(){ jQuery("#b ...
Is there a way to achieve serving html files without using Express in Nodejs? I have experience with serving html files through http/https in a typical website without a frontend framework, but when attempting to do the same with index.html from a React ap ...
Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...
When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold s ...
Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...
Is there a way to create a skeleton for Node.js using Express generator with an HTML view engine? For example, we typically do npm install -g express-generator express -v pug but it seems we cannot create a skeleton for express -v html ...
Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image below. Here is my code snippet: ...
Hey there, I'm currently diving into Django and I have a question regarding making my two apps work together. Here's how my folders are structured: mysite/ --/app1 (blog app) --/app2 (a list of users that sign up with a form) --/mysite --db --m ...
I am looking to auto-refresh a specific div every few seconds on my index.php page below. <?php session_start(); if (! check_write()) { redirect('testlogin.php'); return; } if (file_exists('lmt.json')) { $lmt = json_de ...