Why my HTML lists are crushed together ? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

Why my HTML lists are crushed together ?

Hello Ducks, am facing a problem, well I have to finish this for tomorrow, and could you tell me how to fix the ordered and unordered lists ASAP please, cause they are crushed if you test this on your localhost/website. here is the code by the way: HTML CODE: ----------------------------------------------------------------------------------------------------------- <!DOCTYPE html> <html> <head> <style type="text/css"> ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; } li{ float:left } a:link, a:visited{ display:block; font-weight:Bold; color:#FDD023; background-color:#000000; width:120px; text-align:center; padding:4px; text-transform:uppercase; text-decoration:none; } a:hover, a:active{ background-color:#ffff1a; } * { font-size: 100%; font-family: Arial; } </style> </head> <body> <ul> <li><a href="google.com">ACCUEIL</a></li> <li><a href="google.com">AIDE</a></li> <li><a href= "google.com">PYTHON</a></li> <li><a href="google.com">WIDGETS</a></li> <li><a href="google.com">CONTACT</a></li> </ul> <h1>LANGAGE PYTHON</h1> <br> <h2>Qu est ce qu un langage de programmation?</h2> <p>Un Langage de programmation est un langage qui contient des algorithmes et des lignes de codes. Ce dernier la execute ces lignes de codes cree par le programmeur/developpeur et qui sont apres, execute par le programme. Il existe plusieurs types de ces langages. Voici les 5 plus utilises par les programmeurs:</p> <ol> <li>Python.</li> <li>JavaScript.</li> <li>Java.</li> <li>C#.</li> <li>C.</li> </ol> <br> <h2>A quoi sert Python?</h2> <p>Python, est un langage de programmation interprete, multi-paradigme et multiplateformes (cross-platform) cree le 20 fevrier 1991 par Guido van Rossum, sa derniere version est 3.9.2. Van Rossum etai

14th Mar 2021, 8:28 PM
Agt Reda
Agt Reda - avatar
4 Answers
0
li { float: left } This css code is causing the problem, as it applies to every <li> tags. You can either change it or remove it for quick fix.
14th Mar 2021, 9:16 PM
Abir Hasan
Abir Hasan - avatar
0
Here I used class attribute in the <li> tag of unordered list and used CSS selector to use the styling only to that class. https://code.sololearn.com/WBQm9C3gM760/?ref=app
14th Mar 2021, 9:30 PM
Abir Hasan
Abir Hasan - avatar
0
Agt Reda Look at the link above, I fixed the issue without changing navigation bar, using css selector and html class attribute.
15th Mar 2021, 5:20 AM
Abir Hasan
Abir Hasan - avatar
- 1
@Abir Hasan, I can't, if I remove it it will fix the lists, but the navigation bar will not be beautiful, can you tell me how to change it ? (edit it) and to fix everything, please ?
14th Mar 2021, 10:34 PM
Agt Reda
Agt Reda - avatar