The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Menu Bar Help, HTML Menu Bar Help
rkulawiak1
post Feb 27 2020, 08:08 AM
Post #1





Group: Members
Posts: 1
Joined: 27-February 20
Member No.: 27,210



Hello,
Student just learning HTML trying to do a basic web page. Having an issue with making a menu bar, would like to have a basic menu horizontal across the screen and can not seem to get the code correct. Can you please advise?

<Nav>
<ul>
<nav class="banner">

<li><a href="#">INDEX</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">FAVORITES</a></li>
<ul/>





<link rel="stylesheet" type="text/css" href="style.css">

</nav>


(Second File Stylesheet)

@charset "UTF-8";
article, aside, footer, header, main, nav, section {
display: block;
}

Html, body, h1, h2, h3, ul, li, a, p,
article, aside, footer, header, main, nav, section {
padding:0;
margin:0:
}

.banner {
background-color:orange;
color:black;
padding: 20px 30px;
}



This post has been edited by rkulawiak1: Feb 27 2020, 08:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 27 2020, 10:49 AM
Post #2


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

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



QUOTE
CODE
<Nav>
     <ul>
    <nav class="banner">
              
           <li><a href="#">INDEX</a></li>
           <li><a href="#">ABOUT</a></li>
           <li><a href="#">FAVORITES</a></li>
           <ul/>
    
            
            
                
            
     <link rel="stylesheet" type="text/css" href="style.css">
    
     </nav>


You have two NAV but have closed only one of them. <nav class="banner"> is between UL and LI. You can have nothing there. Lists and tables are kind of thermos bottle concepts. They consists of several layers and nothing can go between the layers. Everything needs to be in LI, or TD and TH for tables.
You should remove that <nav class="banner"> and give the class to the NAV you have before the list instead. And the link to the style sheet should be in head.

One way to get a horizontal bar is to float the LIs left. You also need to remove the dots and play a little with margins and padding.
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: 10th April 2020 - 02:46 PM