Tips for formatting list items to display quotes in a scrolling ticker

Question

Tips for formatting list items to display quotes in a scrolling ticker

How to format the <li> element

HTML:

<div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;">
        <ul id="patTestUL">
            <li>
                <div style="padding: 0; margin: 0; width: 98%;">
                <span style="background: #00ff00; width: 20%; text-align: right;"><img src="theImages/leftQuote.png" alt="Quote" style="width: 30px; height: 30px; padding-right: 10px;" /></span>
                <span style="color: #000000; background: #FF0000; width: 76%;">The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</span>
                </div>
            </li>
            <li>
                <div style="padding: 0; margin: 0; width: 98%;">
                <span style="background: #00ff00; width: 20%; text-align: right;"><img src="theImages/leftQuote.png" alt="Quote" style="width: 30px; height: 30px; padding-right: 10px;" /></span>
                <span style="color: #000000; background: #FF0000; width: 76%;">The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</span>
                </div>
            </li>
...
        </ul>
    </div>
</div>

CSS:

    <style>
        #patTestUL li {
             display: flex;
             justify-content: space-evenly;
          }
        .green-bg span {
          background: #00ff00;
          color: white;
          padding: 5px;
        }
        .red-bg span {
          background: #FF0000;
          color: black;
          padding: 5px;
        }
    </style>

This code snippet will now present the green and red sections separated and centered like this:

html css

Answer 1

Answer №1

Include the following CSS properties inside the span that contains text:

display:inline-block;
vertical-align:top;

Check out the highest priority li element in this example: http://jsfiddle.net/Sarah_M/RK29B/

Furthermore, it is recommended to steer clear of excessive inline styles as they can complicate code maintenance.

Answer 2

Include the following CSS properties inside the span that contains text:

display:inline-block;
vertical-align:top;

Check out the highest priority li element in this example: http://jsfiddle.net/Sarah_M/RK29B/

Furthermore, it is recommended to steer clear of excessive inline styles as they can complicate code maintenance.

Answer 3

Answer №2

Are you wondering if something like this will be effective?

Here is the HTML code:

<div id="patTest">
    <ul id="patTestUL">
        <li>
            <span class="quote">
                    <div class="image"></div>
            </span>
            <span class="box"></span>
        </li>
        <li>
            <span class="quote">
                    <div class="image"></div>
            </span>
            <span class="box"></span>
        </li>
    </ul>
</div>

And here is the CSS code:

* {
    padding: 0;
    margin: 0;
    list-style: none;
}
#patTest {
    width: 95%; 
    text-align: center;
}
li {
    width: 98%;
}
li > * {
    display: block;
    float: left;
    margin-left: 2%;
    margin-bottom: 10px;
}
.image {
    width: 30px; 
    height: 30px; 
    padding-right: 10px;
}
.quote {
    background: #00ff00; 
    width: 20%; 
    text-align: right;
}
.box {
    color: #000000; 
    background: #FF0000; 
    width: 76%;
    height: 50px;
}

To see it in action, click on this link: http://jsfiddle.net/5pkL5/1/

I only added the new classes from the CSS to the HTML for this demonstration. Just incorporate those into your elements as well.

The key to making everything function smoothly lies in using "float: left", "margin-left: 2%", and "margin-bottom: 10px". These properties ensure that the quotes and boxes align properly with each other and create the desired spacing.

Answer 4

Are you wondering if something like this will be effective?

Here is the HTML code:

<div id="patTest">
    <ul id="patTestUL">
        <li>
            <span class="quote">
                    <div class="image"></div>
            </span>
            <span class="box"></span>
        </li>
        <li>
            <span class="quote">
                    <div class="image"></div>
            </span>
            <span class="box"></span>
        </li>
    </ul>
</div>

And here is the CSS code:

* {
    padding: 0;
    margin: 0;
    list-style: none;
}
#patTest {
    width: 95%; 
    text-align: center;
}
li {
    width: 98%;
}
li > * {
    display: block;
    float: left;
    margin-left: 2%;
    margin-bottom: 10px;
}
.image {
    width: 30px; 
    height: 30px; 
    padding-right: 10px;
}
.quote {
    background: #00ff00; 
    width: 20%; 
    text-align: right;
}
.box {
    color: #000000; 
    background: #FF0000; 
    width: 76%;
    height: 50px;
}

To see it in action, click on this link: http://jsfiddle.net/5pkL5/1/

I only added the new classes from the CSS to the HTML for this demonstration. Just incorporate those into your elements as well.

The key to making everything function smoothly lies in using "float: left", "margin-left: 2%", and "margin-bottom: 10px". These properties ensure that the quotes and boxes align properly with each other and create the desired spacing.

Answer 5

Answer №3

Eliminating unnecessary markup from the example revealed that all I needed to do was style the list items.

<div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;">
    <ul id="patTestUL">
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
    </ul>
</div>

#patTestUL li {
    list-style:none; text-align:left;
    position:relative; margin:.5em 0;
    background:red;  border:1px solid black;
}
#patTestUL li::before {
    content:'“'; position:absolute; left:-40px;
    font-size:70px; height:16px; width:34px; line-height:40px;
    background:lime; border:1px solid black;
}

JSFiddle.

If you want to include an image for the bullet, consider using list-style-image. Check out the updated fiddle for more information.

Answer 6

Eliminating unnecessary markup from the example revealed that all I needed to do was style the list items.

<div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;">
    <ul id="patTestUL">
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
        <li>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</li>
    </ul>
</div>

#patTestUL li {
    list-style:none; text-align:left;
    position:relative; margin:.5em 0;
    background:red;  border:1px solid black;
}
#patTestUL li::before {
    content:'“'; position:absolute; left:-40px;
    font-size:70px; height:16px; width:34px; line-height:40px;
    background:lime; border:1px solid black;
}

JSFiddle.

If you want to include an image for the bullet, consider using list-style-image. Check out the updated fiddle for more information.

Tips for formatting list items to display quotes in a scrolling ticker

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing problem with hover:after effect on Internet Explorer 8

What is the correct method of implementing the "OnChange" event to a WooCommerce select element?

Loading identical code in two different div elements

Utilize the class names to assign a distinctive color using mixins in SCSS

What is the best way to set a fixed width for my HTML elements?

The table row's background image splitting into two halves

Initial page load experiencing issues with paroller.js functionality

Loading content dynamically with AJAX and enabling smooth page scrolling

What is the best way to display form input fields depending on the selected value?

Navigating the screen reader with the cursor位

Using NextJs to pass a prop as a className

Struggling with Implementing Modals in Bootstrap 3.3.7

Create a JavaScript button that redirects to a different page within a React application

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

When you hover over the image, the text will disappear

What sets apart the intended usage of the DOM `hidden` from the CSS `visibility` property?

How to achieve divs with see-through text using CSS?

Exploring the World of Html

Begin an unnumbered hierarchical list commencing at 1.2.1

Use a PHP form to send an email with HTML formatting, rather than plain text