Forum:

HTML Pages with CSS and JavaScript

Why is my unordered list not formatted properly?

Ranch Hand

Posts: 204

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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:

<!doctype html>
<html>
    <head>
        
        <meta http-equiv="content-type" content="text/html"; charset="UTF-8">
         
        <meta name="viewpoint" content="width=device-width, inital-scale=1">
        <title>HTML template</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            
            <h1>Basic Website</h1>
            This is a sample website
        </header>
        <nav>
            <ui>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ui>
        </nav>
        <section>    
            <div> This is an example </div>
            
            <div class="content" > Lorem ipsum dolor sit amet, <img src="hot-air-balloons.jpg" > wisi amet rutrum nulla proin odio mauris, aliquet rutrum aliquam nibh amet nascetur 
           commodo, arcu eu in ullamcorper mauris. Arcu bibendum elit. Magna penatibus velit ut wisi nunc, lectus magnis tempus elit, aenean lectus felis urna eu egestas arcu, 
           elit sollicitudin donec fermentum. Natoque semper sodales sed, euismod curabitur scelerisque tempor fringilla quis, gravida id ultrices, commodo convallis laoreet maecenas at. 
           Ut posuere, mauris dapibus suspendisse a ultricies. Tincidunt a sed sapien quisque fames, lacus at vel ante nulla, ut non elit adipiscing pretium, nibh posuere corrupti a nec. 
           Porta aliquam eros nibh, pulvinar rutrum ad, at ac habitasse vitae feugiat. Sed tristique, sed vitae purus est. </div>
            
            <div> Lorem ipsum dolor sit amet, <img src="hot-air-balloons.jpg" > wisi amet rutrum nulla proin odio mauris, aliquet rutrum aliquam nibh amet nascetur commodo, arcu eu 
            in ullamcorper mauris. Arcu bibendum elit. Magna penatibus velit ut wisi nunc, lectus magnis tempus elit, aenean lectus felis urna eu egestas arcu, elit sollicitudin donec fermentum. 
            Natoque semper sodales sed, euismod curabitur scelerisque tempor fringilla quis, gravida id ultrices, commodo convallis laoreet maecenas at. Ut posuere, mauris dapibus suspendisse 
            a ultricies. Tincidunt a sed sapien quisque fames, lacus at vel ante nulla, ut non elit adipiscing pretium, nibh posuere corrupti a nec. Porta aliquam eros nibh, pulvinar rutrum ad, at ac 
            habitasse vitae feugiat. Sed tristique, sed vitae purus est. </div>
        </section>
        <footer>This is a sample footer</footer>
    </body>
</html>

style.css:

Screen-Shot-2022-10-11-at-4.17.08-PM.png

Hanna Roberts

Ranch Hand

Posts: 204

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Here is also what his looked like

Screen-Shot-2022-10-11-at-3.53.34-PM.png

Frank Carver

Sheriff

Posts: 7001

I like...

posted 2 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

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.

Read about me at frankcarver.me ~ LinkedIn ~ Frank's PhD research

Hanna Roberts

Ranch Hand

Posts: 204

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Do you know a good website or video that goes over that approach? or do i just have to search around?

Paul Clapham

Marshal

Posts: 28425

102

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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: 28425

102

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I also found HTML class Attribute which might get you farther along.

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 2 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Hanna Roberts

Ranch Hand

Posts: 204

posted 2 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Thank you for the suggestions, fixing the typo in the tab fixed the error. I will also check out the references you recommended.