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

Is it possible to create .html files using the provided list of words?

Button group malfunctions on smaller screens

Determine a comparative measurement using specific numerical values

Generate a fresh DOM element when a particular height threshold is achieved, utilizing a portion of the previous DOM element's content

My HTML file seems to be ignoring the styles in my CSS file. What could be causing this issue?

Swap out a portion of HTML content with the value from an input using JavaScript

Tips for expanding an md-nav-item in Angular Material

html body extends beyond the negative position of the element

What are my choices for showcasing hierarchical information?

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Converting Scalable Vector Graphics to Hypertext Markup Language and

The hamburger menu is only functional for a single link

What is the proper way to add comments within CSS code inline?

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

Setting up the Bootstrap grid structure

What is the highest value that AutoCompleteExtender can reach?

What is the best way to retrieve multiple image file names using JavaScript?

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I'm looking to adjust the position of an image inside a div without affecting the position of the entire div

methods for transferring javascript variables to modal