List arranged in order with a hyperlink in the center and an image positioned on the right side

I am trying to create an ordered list with a link to an article in the middle and a small png image file positioned directly to the right of it.

For reference, here is an image depicting the exact type of list that I am aiming to achieve: https://i.stack.imgur.com/UFyWs.png

The current code I have is almost there but requires some modifications. What adjustments should I make to my code to successfully implement this ordered list?

HTML

<div id ="most-emailed">
      <h2>MOST EMAILED</h2>
        <ol>
          <li>
            <a href="">Well: Writing Your Way To Happiness</a>
            <img src="images/well.jpg"/>
          </li>

          <li>
            <a href="">White House Proposals on 529 College Plans Would Reduce Benefits</a>
          </li><img src="images/silver.jpg"/>
          <li>
            <a href="">Well: Ask Well: The Benefits of a Lunch Hour Walk</a>
            <img src="images/physed.jpg"/>
          </li>
          <li>
            <a href="">Well: Ask Well: The Best Time of Day to Exercise to Lose Weight</a>
            <img src="images/morning.jpg"/>
          </li>
          <li>
            <a href="">Op-Ed Contributor: Why Adnan Syed of 'Serial' Should Have Pleaded Guilty</a>
            <img src="images/murray.jpg">
          </li>
          <li>
            <a href="">36 Hours in Denver</a>
            <img src="images/denver.jpg"/>
          </li>
          <li>
            <a href="">U.S Says Assembly Speaker Sheldon Silver Took Millions in Payoffs...</a>
            <img src="images/silver.jpg"/>
          </li>
          <li>
            <a href="">Paul Krugman: Much Too Responsible</a>
            <img src="images/krugman.png"/>
          </li>
          <li>
            <a href="">David Brooks: The Devotion Leap</a>
            <img src="images/brooks.png"/>
          </li>
          <li>
            <a href="">36 Hours: What to Do in Denver</a>
            <img src="images/36hours.jpg"/>
          </li>
        </ol>

  </div

CSS

#most-emailed{
  width:250px;
  height:500px;
  float:right;
  border-top:1px solid #C9C9C9;
  border-bottom: 1px solid #C9C9C9;
}

#most-emailed h2{
  font-size:10px;
  margin:0;
  padding-top:10px;
  padding-bottom:10px;
  font-family:arial;
  font-weight:700;
}
#most-emailed img{
  width:30px;
  height:30px;
}

#most-emailed ol{
  padding:0;
  margin:0;

}

#most-emailed a {
  color:#6288a5;
  font-size:12px;
  vertical-align:middle;
}
#most-emailed li{
  width:100%;
  height:50px;
  text-align:left;
  list-style-type:inside;
}
htmlcss

Answer №1

Consider utilizing the CSS properties display: table, display: table-row, and display: table-cell in this manner:

Take a look at the JSFiddle demo here

#most-emailed{
  width:250px;
  float:left;
  border-top:1px solid #C9C9C9;
  border-bottom: 1px solid #C9C9C9;
}

#most-emailed h2{
  font-size:10px;
  margin:0;
  padding-top:10px;
  padding-bottom:10px;
  font-family:arial;
  font-weight:700;
}
#most-emailed img{
  width:30px;
  height:30px;
}

#most-emailed ol{
  padding:0;
  margin:0;
    display: table;
}

#most-emailed a {
  color:#6288a5;
  font-size:12px;
}

#most-emailed li img {
    height: 50px;
    width: 50px;
}
#most-emailed li{
  width:100%;
    height: 50px;
    display: table-row;
}
#most-emailed li a,
#most-emailed li img {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    padding: 5px;
}


Enjoy the benefits of using tables in your layout without the complications associated with traditional tables. Embrace the simplicity of modern web design.

Edit:
To maintain the table-cell CSS formatting, consider adding numbers as spans within the list items:

 <li>
     <span>1</span>
     <a href="">Well: Writing Your Way To Happiness</a>
     <img src="images/well.jpg"/>
 </li>

#most-emailed li span,
#most-emailed li a,
#most-emailed li img {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    padding: 5px;
}

Check out the updated demo on JSFiddle

Answer №2

If you're looking for a solution, consider utilizing a table element.

<ul>
   <li><table><tr><td><a href="mylink.com">My Link</a></td><td><img src="#" /></td></tr></table></li>
   <li>[[repeat process]]</li>
    ...
</ul>

Answer №3

Make sure to align your images to the left

#most-emailed li{
float:left; <!-- this code will move text to the left of the image -->
width:80%; <!-- allocate some space for the image -->
height:50px;
text-align:left;
list-style-type:inside;
}

#most-emailed img{
float:left; <!-- this will position the image to the right of the text -->
width:20%; <!-- width set as a percentage -->
height:30px; <!-- you may consider removing this line -->
}

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

Changing HTML tags programmatically in Angular while inheriting a template

In my project, I have a Component called DataGrid that represents a table with expandable rows. Each row can be expanded to show a child DataGrid table, which is similar to the parent DataGrid component. To simplify this setup, I created a base class DataG ...

htmlangulartemplatesinheritancetags

Obtaining and storing multiple checkbox selections in a database using a JSP page

If users are required to input data on the first page, such as City, Country, and URL of the destination, and they need to select the type of destination from options like Winter, Christmas, and Summer (max 2 selections), how can these results be connected ...

javascriptjavahtmlmysqljsp

Retrieve the initial identification number from a sorted list using Jquery UI Sortable

Situation: My task involves developing a mobile website that allows users to organize a list of names using the Jquery UI sortable option. Depending on the order in which the names are arranged, additional information will be displayed on the next page. ...

jqueryhtmljquery-ui

Discovering unmarked content using Jsoup

I have been struggling to find a solution to my problem, but so far I have not found any clear answers in my search results. I have spent a considerable amount of time trying different suggestions from various posts that seemed somewhat related. Now, let&a ...

javahtmljsoup

The border at the top of the table's header will be removed and the

I am trying to achieve a clean look with a solid blue line under my table header. However, the current styling on each th is causing little white separations in between each column. thead th { border-bottom: 4px solid #D3E6F5; padding-bottom: 20px ...

htmlcsscss-tables

Capture line breaks from textarea in a JavaScript variable with the use of PHP

I need help with handling line breaks in text content from a textarea. Currently, I am using PHP to assign the textarea content to a Javascript variable like this: var textareaContent = '<?php echo trim( $_POST['textarea'] ) ?>'; ...

javascriptphphtml

Hidden visibility of input field prevents the value from being posted

I have a dropdown menu containing numbers as options. When a user selects a number, I want to display an input box using jQuery based on their selection. However, the issue arises when I try to submit the values of these input boxes as they are not being s ...

javascriptphpjqueryhtmlcss

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Two separate Bootstrap dropdowns are failing to function independently from each other

Can anyone help me prevent both buttons from displaying a drop-down when only one is clicked? https://i.stack.imgur.com/nvtbm.png Below is my HTML code: <form action="{{ url_for('crudSEapi.gcp_image_search') }}" method="post&q ...

html

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss

Grouping of check-boxes in sets of 3

I need to customize the display of my checkboxes by grouping them side by side. Instead of showing them in a list format, I want them to be displayed in groups. For example, when there are 7 checkboxes, I would like them to be split into two columns with ...

html

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

cssfluid-images

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...

javascriptjqueryhtmlcss

Utilize the display flex property within a nested flex container

I can't seem to get my link text centered both vertically and horizontally, it keeps aligning to the left. I was under the impression that using flex-based alignments would solve this issue. I have gone through the information on using a flex item as ...

cssflexbox

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

jqueryhtmljsonajax

Is it feasible to place an ordered list within a table row <tr>?

Below is a code snippet demonstrating how to create an ordered list using JavaScript: Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function() { $("ul").each(function() { $(this).find("li").each(functio ...

javascriptjqueryhtml

Instructions for implementing personalized horizontal and vertical scrolling within Angular 9

I am currently working on an angular application where users can upload files, and I display the contents of the file on the user interface. These files may be quite long, so I would need vertical scrolling to navigate through them easily. Additionally, fo ...

javascripthtmlcssangulartypescript

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted ...

javascriptcssangularsassangular8

Prevent the colorpicker feature for the <input type="color"> element on Google Chrome

When using Google Chrome, the <input type="color"> element creates an input field with a color bar inside it. By default, it opens a colorpicker that may vary in appearance depending on the operating system (mine has a Windows theme). I have implemen ...

jquerycsshtmlgoogle-chrome

Rails 5 not allow user submission of bootstrap modal form

I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...

javascriptjqueryhtmlruby-on-railsajax