CODEWITHSUNDEEP
htmlcss
jhammond
jhammond

Reputation: 2076

UL Bullets Showing Outside Frame

I'm having some trouble getting the bullets to show up in an unordered list. If I change the css to display the bullets as inside, they should up, but right next to the text. What my buddy wants is for the bullets to show up on the far left hand side of the frame and for there to be a couple of tabs worth of space between it and the text. I've messed with the margins/border/padding quite a bit. bit can't get the bullets exactly where I want them!

I've included my html and css below.

Thanks! James

The page in question:

http://www.pingdynamic.com/sites/slva/services.html

The CSS:

ul {
list-style-type: circle;
list-style-position: outside;
}

li {
margin-left: 50px;
}

The HTML:

<h2 class="subheading">You Dream It.  We Bring To Life.</h2>
        <br>
        <p>SLVA is proud to offer the following servies:</p>

        <ul>
            <li>Consultation - Let's discuss your goals and ideas and how to achieve them.</li>
            <li>High performance parts, sales and installation.</li>
            <li>Custom body work - From wide-body kits and ground effects to really any custom aesthetic modification you can imagine.</li>
            <li>Custom carbon fiber design, forming and application.</li>
            <li>Custom 3-stage paint work.</li>
            <li>Full fabrication services - We work with all materials (including steel, aluminum, stainless steel) and methods
            (traditional and TIG welding) </li>
            <li>Custom chassis design and modification.</li>
            <li>Custom suspension design, modification and fabrication.</li> 
        </ul>
        </div>

Upvotes: 2

Views: 5796

Answers (4)

user27162422
user27162422

Reputation: 1

<div class="card mt-n4 mx-n4">
                                <div class="bg-warning-subtle">
                                    <div class="card-body pb-0 px-4">
                                        <div class="row mb-3">
                                            <div class="col-md">
                                                <div class="row align-items-center g-3">
                                                    <div class="col-md-auto">
                                                        <div class="avatar-md">
                                                            <div class="avatar-title bg-white rounded-circle">
                                                                <img src="assets/images/brands/slack.png" alt="" class="avatar-xs">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md">
                                                        <div>
                                                            <h4 class="fw-bold">Velzon - Admin & Dashboard</h4>
                                                            <div class="hstack gap-3 flex-wrap">
                                                                <div><i class="ri-building-line align-bottom me-1"></i> Themesbrand</div>
                                                                <div class="vr"></div>
                                                                <div>Create Date : <span class="fw-medium">15 Sep, 2021</span></div>
                                                                <div class="vr"></div>
                                                                <div>Due Date : <span class="fw-medium">29 Dec, 2021</span></div>
                                                                <div class="vr"></div>
                                                                <div class="badge rounded-pill bg-info fs-12">New</div>
                                                                <div class="badge rounded-pill bg-danger fs-12">High</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-auto">
                                                <div class="hstack gap-1 flex-wrap">
                                                    <button type="button" class="btn py-0 fs-16 favourite-btn active">
                                                        <i class="ri-star-fill"></i>
                                                    </button>
                                                    <button type="button" class="btn py-0 fs-16 text-body">
                                                        <i class="ri-share-line"></i>
                                                    </button>
                                                    <button type="button" class="btn py-0 fs-16 text-body">
                                                        <i class="ri-flag-line"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <ul class="nav nav-tabs-custom border-bottom-0" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active fw-semibold" data-bs-toggle="tab" href="#project-overview" role="tab">
                                                    Overview
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link fw-semibold" data-bs-toggle="tab" href="#project-documents" role="tab">
                                                    Documents
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link fw-semibold" data-bs-toggle="tab" href="#project-team" role="tab">
                                                    Team
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- end card body -->
                                </div>
                            </div>

Upvotes: 0

Charlie
Charlie

Reputation: 143

The reason you can't see your bullets, is because you have overflow-x:hidden in line 10 of your style.css - this is being applied to a whole bunch of elements including ul and li.

Try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SVLA</title>
    <style>
        ul {
            list-style-type: circle;
            list-style-position: outside;
            margin-left: 10px;
            overflow: visible;
        }

        li {
            padding-left: 50px;
            overflow: visible;
        }
    </style>
</head>
<body>
    <h2 class="subheading">You Dream It.  We Bring To Life.</h2>
    <br>
    <p>SLVA is proud to offer the following services:</p>
    <ul>
        <li>Consultation - Let's discuss your goals and ideas and how to achieve them.</li>
        <li>High performance parts, sales and installation.</li>
        <li>Custom body work - From wide-body kits and ground effects to really any custom aesthetic modification you can imagine.</li>
    </ul>
</body>

Example: http://cssdesk.com/bgCgj

(I added some extra padding and margins to the ul and li in this example to compensate for the other styles in your page)

Upvotes: 3

user2313440
user2313440

Reputation: 371

Either use a span and relative positioning like @fkim said, or remove the bullet point and use a pseudo-element to put them back in with padding:

ul {
margin: 0;
padding: 0;
}

li {
margin: 0;
list-style-type: none;
}

li:before {
content: "•";
padding-right: 50px;
}

Example: http://cssdesk.com/

Upvotes: -1

Francis Kim
Francis Kim

Reputation: 4285

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4373046</title>
        <style>
            li span { position: relative; left: -10px; }
        </style>
    </head>
    <body>
        <ul>
            <li><span>item 1</span></li>
            <li><span>item 2</span></li>
            <li><span>item 3</span></li>
        </ul>
    </body>
</html>

Source: CSS: Control space between bullet and <li>

Upvotes: -1

Related Questions