What is the best way to showcase an unordered list alongside corresponding images, with a paragraph text next to each one?

Hey there, I need a little help with displaying an unordered list correctly.

Here's how it should look:

Below is the code snippet that needs some fixing:

<ul>
        <li><img src="images/02.jpg" alt="Picture 1"></li>
        <li><img src="images/19.jpg" alt="Picture 2"></li>
        <li><img src="images/02.jpg" alt="Picture 3"></li>
        <li><img src="images/19.jpg" alt="Picture 4"></li>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
    </ul>
htmlcssxhtmlfrontend

Answer №1

Here is the recommended layout: http://example.com/layout. If this does not meet your requirements, please inform me so I can make adjustments accordingly.

HTML Code:

<ul>
<li>
    <img src="images/03.jpg" alt="Image 1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
<li>
    <img src="images/11.jpg" alt="Image 2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
<li>
    <img src="images/08.jpg" alt="Image 3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
<li>
    <img src="images/27.jpg" alt="Image 4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
</ul>

CSS Styles:

ul {
    list-style-type: none;
}

li img {
    float: left;
    margin: 10px;
}

Answer №2

To reiterate, it was mentioned earlier that you were very close to the correct solution. Just remember that only list-items (li) can be placed inside your ul. However, you can include an image and paragraph within an li.

http://jsfiddle.net/vdecree/VW8N7/2/

HTML

<div class="mycontainer">
    <ul id="mylist">
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
    </ul>
</div>

CSS

.mycontainer{
    width: 750px;
    margin: 0 auto;
}

#mylist li:before,
#mylist li:after {
    content: "";
    display: table;
} 
#mylist li:after {
    clear: both;
}
#mylist li {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

#mylist li{
    list-style: none;
    margin-bottom: 20px;
    overflow: none;
}

#mylist li p{
    width: 340px;
    float: left;
}

#mylist li img{
    width: 350px;
    float: left;
    margin-right: 20px;
}

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

How can we use jQuery to change the format of a

I'm working on a project where I want the calendar to display the date that the user picks. Right now, my "{{date}}" is in the format 2016-01-11, but it keeps showing one day before the selected date. I would like it to display as mm/dd/yyyy. I belie ...

jqueryhtml

Using Angular with OpenStreetMap and $routeProvider allows for dynamic routing and

Check out this awesome single page app that I found: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/simple-example.html However, I am looking to enhance it by adding a menu... <html ng-app="App"> <head> <lin ...

javascriptjqueryhtmlajaxangularjs

How can I include multiple search forms on a single page in TYPO3 Ke_Search without any conflicts between them?

In the header of my website, I have a search form that is generated as a cObject from a content element containing a ke_search searchbox. When this form is submitted, it redirects to a /search page. In addition to this, I have subpages that are meant to se ...

htmlsearchtypo3content-management-systemtyposcript

Aligning Bootstrap Cards in Mobile View

When viewing on mobile, the cards aren't centering properly. I've attempted to use d-flex and justify-content-center as recommended in a previous response without success. I've observed that by adding mx-auto to each card class it somewhat ...

htmlcssbootstrap-4

Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out t ...

htmlcss

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...

javascripthtmlvue.jsgridvuetify.js

What impact does CSS scaling transform have on the flow of a document?

I'm really confused about the impact of scaling an element using CSS transforms on the document flow. Take a look at this jsbin or this codepen (since jsbin seems to be down), where I have set up the following structure: p{slipsum text} #scaled #s ...

csstransform

Incorporate a genre twist in animated films

Is there a way to implement an animated feature where the letters appear one by one in between a sentence, similar to what is seen on this page? On the linked page, there is a sentence displayed inside a banner that reads: Create meaningful documents Cr ...

javascriptjqueryhtmlcssanimation

Error in line 36: firebase.auth function is undefined

Snippet of index.html code <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" ...

javascripthtmlfirebasefirebase-authentication

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Personalized design options for ASP text fields

I have two textboxes (asp:TextBox) close to each other, currently styled like this: https://i.sstatic.net/mcha5.png I want to remove the shadow effect on the top and left edges of the textboxes to apply custom styling. However, using box-shadow has no im ...

htmlcssasp.net

Experience the thrill of success with a timed animation using Sweet Alert on the powerful Ionic framework

I'm currently working with the ionic framework to develop a mobile application. I'd like to incorporate Sweet Alert for displaying success messages. You can find Sweet Alert at . My goal is to include a timer in the success message. swal("Good ...

angularjscssionic-frameworkbootstrappingsweetalert

Error Encountered: Angular - Despite successful $http.delete request, the operation does not actually take

I am currently facing an issue with deleting a customer in my Angular + PHP application. Although the application returns success without any errors, it fails to delete the customer from the database. Here is the code snippet of my Angular controller: ...

phphtmlajaxangularjsdatabase

Working with PHP to transfer toggle switch information to JSON

I'm currently experimenting with a combination of HTML, JavaScript, and PHP on a single page. My goal is to update a JSON file with either 0 or 1 based on the toggle switch state change. I seem to be close to achieving this functionality, but upon rel ...

javascriptphpjqueryhtmljson

Passing Data Between Blazor App Pages Using .NET Core

Recently, I began learning how to create websites using the Blazor template. I'm having trouble figuring out how to pass data from one page to another. It's quite different compared to .NET CORE MVC web applications and I haven't been able t ...

htmlasp.net-coreasp.net-core-2.0blazor

HTML form submission with a grid of multiple choice options

I have created my own multiple choice grid: <div style="overflow-x:auto;"> <table class="w-100"> <tr> <td class="border"></td> <td class="border">Yes</td> <td class="border">No</ ...

javascripthtmljquery

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

Introduction Utilizing Bootstrap 5 (included with webpack 5), I am implementing the grid system and collapse function to design the homepage of this website, featuring 2 sidebars that collapse into a top bar. On mobile devices, the navigation collapses a ...

javascripthtmlbootstrap-5

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

While we are familiar with pseudo-classes like :before and :after, have you ever wondered why there is no nav ul li a:left or :right? Do you think it's achievable? I'm open to using HTML5, CSS3, and JavaScript to make it happen. ...

javascripthtmlcss

Develop a unique Kotlin/JS WebComponent featuring custom content

I am trying to create a custom tag using Kotlin that includes default content. While the example I found works well, I am having trouble adding default content (such as an input element) inside the custom tag. After attempting various approaches, I have o ...

javascripthtmlkotlinweb-componentkotlin-multiplatform

Change the value of a boolean cell within my database table

I have a task where I need to dynamically update the status of the show_msg parameter based on user actions. When the submit button is pressed, I want to set it as TRUE if the checkbox is checked, and FALSE if not. The main HTML code includes a popup wind ...

javascripthtmlruby-on-railsajax