• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Liutauras Vilda
  • Paul Clapham
Sheriffs:
  • paul wheaton
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Piet Souris
Bartenders:
  • Mike London

Why is my unordered list not formatted properly?

 
Ranch Hand
Posts: 201
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
So I was following the code of a tutorial and he created a simple menus at the top and when you hover over it, the blocks should change colors. When i tried to do that my page had empty bullet points at the top as shown in my screenshot and when i hover over one the name shows up. I copied his code exactly so im not sure what the issue is. Do you see a problem with it?

index.html:



style.css:

Screen-Shot-2022-10-11-at-4.17.08-PM.png
[Thumbnail for Screen-Shot-2022-10-11-at-4.17.08-PM.png]
 
Hanna Roberts
Ranch Hand
Posts: 201
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Here is also what his looked like
Screen-Shot-2022-10-11-at-3.53.34-PM.png
[Thumbnail for Screen-Shot-2022-10-11-at-3.53.34-PM.png]
 
Sheriff
Posts: 7001
6
Eclipse IDE Python C++ Debian Java Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is an unusual design. It invents new HTML tags, which is fine for CSS, but you are at the mercy of the browser designer as to how they are processed.

This page looks very different in different browsers!

Most browser-tolerant web design these days uses DIV and SPAN tags with classes and then applies the styles to the classes rather than to the tags themselves. This is a much more predictable approach.
 
Hanna Roberts
Ranch Hand
Posts: 201
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Do you know a good website or video that goes over that approach? or do i just have to search around?
 
Marshal
Posts: 27531
88
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That would be just something like



as Frank said. Then your existing CSS would be reasonably suitable, I think. Fixing your <ui> element to be an <ul> element would also help, changing it to be a standard HTML tag for lists and allowing the CSS to act on it.
 
Paul Clapham
Marshal
Posts: 27531
88
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I also found HTML class Attribute which might get you farther along.
 
Sheriff
Posts: 67694
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Frank Carver wrote:This is an unusual design. It invents new HTML tags, which is fine for CSS, but you are at the mercy of the browser designer as to how they are processed.

This page looks very different in different browsers!

Most browser-tolerant web design these days uses DIV and SPAN tags with classes and then applies the styles to the classes rather than to the tags themselves. This is a much more predictable approach.


I will disagree. The nav and section tags used are all part of the semantic HTML 5 additions and their use is highly encouraged over semantic-less divs and spans. I'm assuming that ui is a typo for ul that needs to be corrected.

That said, I'd look askance at any CSS examples/tutorials that still use float in lieu of more modern flexbox approaches.
 
Hanna Roberts
Ranch Hand
Posts: 201
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you for the suggestions, fixing the typo in the tab fixed the error. I will also check out the references you recommended.
 
reply
    Bookmark Topic Watch Topic
  • New Topic