The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Navigation Bar wont work
peterrpan
post Apr 9 2019, 04:32 PM
Post #1





Group: Members
Posts: 3
Joined: 9-April 19
Member No.: 26,874



Please help me with my error


Attached thumbnail(s)
Attached Image

Attached image(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2019, 04:48 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,313
Joined: 9-August 06
Member No.: 6



Please, post real text, not images of it. Also explain the problem you want help with.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peterrpan
post Apr 9 2019, 04:57 PM
Post #3





Group: Members
Posts: 3
Joined: 9-April 19
Member No.: 26,874



<div class="navbar">
<ul>
<li><a href="https://w3schools.com" class="active">Column 1 <span>Holy Grail</span></a></li>
<li><a href="https://facebook.com">3 Column <span>Column 2 </span></a></li>
<li><a href="https://yahoo.com.com">2 Column <span>Column 3 </span></a></li>
</ul>
</div>


------------------------------------------------------------------------------------
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar li {
display: inline-block;
margin-right: -4px;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

/* Style the links inside the navigation bar */
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2019, 05:33 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,313
Joined: 9-August 06
Member No.: 6



OK. And in what way doesn't it work as you expect?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peterrpan
post Apr 9 2019, 05:36 PM
Post #5





Group: Members
Posts: 3
Joined: 9-April 19
Member No.: 26,874



QUOTE(pandy @ Apr 9 2019, 05:33 PM) *

OK. And in what way doesn't it work as you expect?


IT doesn't have the block behind it nor are the bulliets removed.


Attached image(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2019, 05:51 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,313
Joined: 9-August 06
Member No.: 6



Well, then the real thing differs from what you posted. The only error I see in the CSS is that you lack the closing curly after the last rule, but that's probably a mistake when copy-pasting.

This is what I see.

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd July 2019 - 12:21 AM