I am trying to make an Alphabetical (A through Z) Nav bar for a project. In addition to the Alphabetical Nav bar there is some Text: "Book Title:". So the final product should look like this:
Book Title: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
With my code I could only achieve this result with the following HTML code that puts the additional text "Book Title:" inside of the nav bar and ul tags and I hear that this is discouraged.
'''
<body>
<nav>
<ul>
Book Title:
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</nav>
</body>
'''
'''
/* Navigation Styles */
nav li{
list-style-type:none;
padding-left:30px;
display: inline-block;
margin: 0;
padding: 45px;
}
nav>ul{
padding-left:0; /* makes the nav alphabetical bar align left without any padding. */
margin: 0;
padding: 0;
}
nav>ul>li{
padding-left:10px;
display: inline; /* makes all the alphabetical letter into one line when they were on separate lines
before. */
}
'''
@Community, how can I make a CSS code modification of a one lined Nav Bar that has additional text in front of it all on the same line without putting the additional text "Book Title:" inside of the EDIT: nav tags?
So this for HTML would be the ideal solution but what is the CSS code to make the additional text connect with the nav bar without having the additional text "Book Tile:" inside of the nav tags?
'''
<body>
Book Title:
<nav>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</nav>
</body>
'''
Any help will be appreciated - thanks!
I figured it out with using the span tag. While I did not get "Book Title:" out of the nav tags, I did however actually provide "Book Title:" with a more compatible tag that maintained the solution format of keeping "Book Title:" on the same line:
Book Title: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Thanks to everyone who reached out and this was a great first experience. Here's to many more solutions and hopefully I can return the favor and help you solve a problem someday! :)
HTML:
'''
<body>
<nav>
<span>Book Title:</span>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</nav>
</body>
'''
CSS:
'''
/* Navigation Styles */
nav li{
list-style-type:none;
padding-left:0px;
display: inline; /* makes all the alphabetical letters into one line when they were on
separate lines before. */
margin: 0;
padding: 55px; /* Controls spacing between a-z */
}
nav ul{
padding-left:0;
margin: 0;
padding: 0;
display: inline-block;
}
nav ul li{
padding-left:0px;
display: inline;
}
'''
Thanks again!