Unable to adjust text in next line in unordered list

HTML-CSS
1

Unable to adjust text in next line in unordered list.
Refer this pen : https://codepen.io/sanjeev1729/pen/YOKrbW

Here i want the third li element to go to next line .
And my color #eee should cover entire aboutme view.

1 Like
2

just clicked your pen and the three bullets are showing up on different lines.

2018-08-19
2018-08-192956×1786 216 KB

also to fix the background do this:

#points{
    position: relative;
    float: left;
    font-size: 17px;
    /*top: 40px;*/
  padding-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
1 Like
3

@hbar1st thankyou for the response , i think you should open the pen like this ,to view the difference.
Attached screen shot.

hbr
hbr1366×522 66.2 KB

1 Like
4

Hello there, kindly can you make clear what you want to achieve with your project please. I can see you are working on personal portfolio.

5

@sanjeev.kumar
One glaring problem I see is that you are labeling multiple elements with the same id name. If you are doing this on purpose, I highly urge you to use a class name instead. That is how you style multiple elements with the same style. Styling by ID is for singular elements. It will also cause problems for front end libraries such as JQuery when you are trying to find an element by ID.

As an aside. I don’t know if you’re familiar with the box model but I feel you are not taking advantage of it. You’re using a lot of relative positioning, which can throw you off if you use it for the majority of your styles. However, this is just an opinion of mine.

1 Like
6

I agree with what @zapcannon99 has said, you can see it yourself,

Try removing the position: relative from #points and give #points a width of 100%

Use classes to style elements mostly, id’s are special attributes that should be used only for purposes, Id’s should be used only once you shouldn’t replicate it, that’s why we use classes.

7

And after a bit of playing, my suggestion would be to move everything in the li style to the li a style. I understand you wanted the li to float right for the navigation bar, but that also affects all other li lists. However, if you move everything to li a you will only target the nav bar menu links to float right. You can leave all other li lists to their default.

8

Thankyou @zapcannon99 @Sujith3021 @mrkoodi for your response. I am working on your suggestions.

3 Likes
9

@Sujith3021 @zapcannon99 @mrkoodi Is it good idea to use position as relative (as i have done in above example) if not then what is the correct way.

1 Like
10

You can use relative, but you need keep track of it.

If you want to do what you originally posted, the easiest way I’ve found is what I laid out already.

Just do this one thing, and you should see improvements. If you want to further improve it, please change id="points" to class="points" and make the appropriate changes in CSS. It’s not kosher to have multiple lines with the same ID.

11

Thank you @zapcannon99 .

1 Like
12

If you use position: relative to all the elements it will disturb the content flow, it will overlap the contents at different sizes, follow the box model, you can control the spaces with those, mostly use when absolute positioning an element, set its parent as relative other than that you can mostly avoid it and prefer margin and padding elements

I see you floated elements, make sure when you float an element it gets removed from the flow of parent and floats above it, so you have to set the float to parent element also, you can use dev tools and hover the elements and see those would not be cleared.

2 Likes