CODEWITHSUNDEEP
htmlcssstyles
Shabarinath Volam
Shabarinath Volam

Reputation: 745

User profile status in CSS

I am trying to implement a user profile status bar in my webpage. For this I have done the following:

<ul style="width:250px;background-color:#F5F5F5;">
    <li style="width: 20%;background-color:#abb230;"/>
</ul>

For this code I am getting the result below:

enter image description here

So here I want to remove the bullet to the left of the green bar, and make the green bar flush left.

I have tried doing this:

<ul style="width:250px;background-color:#F5F5F5;list-style:none;">
    <li style="width: 20%;background-color:#abb230;"/>
</ul>

But this makes the entire <ul> element disappear.

Upvotes: 0

Views: 574

Answers (3)

codingrose
codingrose

Reputation: 15699

Try:

ul {
    width: 250px;
    background-color: #F5F5F5;
    list-style-type: none;
    padding: 0;
}
li {
    width: 20%;
    background-color: #abb230;
    height: 20px;
}

DEMO here.

Upvotes: 4

Karan
Karan

Reputation: 36

Have the following styling on the "ul".

list-style:none;

Quick pointer. Avoid so much inline styling. Separate presentation logic from the structure

Upvotes: 1

sam
sam

Reputation: 2486

ul
{
    list-style-type: none;
    list-style-position:inside;
    margin:0;
    padding:0;
}

This would help you

Upvotes: 1

Related Questions