Nav BAar Help!

I can not get my h1 and nav bar to be on the same line!


Css:
.brandingdiv {
text-align: left;
}

#branding {

}

.navdiv {
float: right;
}

ul {
list-style: none;
margin: 0px;
padding: 0px;
}

li {
display: inline;
margin: 0px 20px;
}

#navelements {
text-align: right;
}
HTML:

Parker's 3D

  • Home
  • About
  • Sketchup &#9660
  • Contact
  • Other Websites
1 Like

Could you please provide the html and css code. I will see if I can help you :wink: .

1 Like

There are 2 important types of elements in HTML you need to understand - Block Level and Inline Level elements. div, h1 and p are Block Level, meaning they will “[break] the flow of the content” (create a line break). Inline Level elements, such as the span tag, will “only occupy the space bounded by the tags defining the element”, meaning they will not add such breaks (check out this article to learn more).

TLDR: You need to make your block level tags render as inline level elements so they don’t break the flow of the content:

HTML:

<div>
  <div class="headerdiv">
    <h1>Parker's 3D</h1>
  </div>
  
  <div class="navdiv">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Sketchup &amp;#9660</li>
      <li>Contact</li>
      <li>Other Websites</li>
    </ul>
  </div>
</div>

CSS:

.headerdiv, .headerdiv h1 {
	display:inline;
}

Good luck!

1 Like

Postings on here will render the HTML if you don’t use the “Preformatted Text” option in the toolbar. You can find @chefev’s HTML code by viewing the page source in your browser.