CODEWITHSUNDEEP
htmlcss
CollegeStruggles
CollegeStruggles

Reputation: 21

How to put the h1 element on the same line as the navigation bar

I tried putting it on the same line by using the float: left element on the h1 and float: right on the nav, but it keeps putting the h1 below or above the nav. I am trying to set up a website so that the top line can read the name of the company and the links to the different pages through the navigation bar. Is there something to do with it? Here is some of my code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Virginia Delights</title>
<meta charset="utf-8">
<link href="Delights.css" rel="stylesheet">
</head>

<body>
    <div id="container">

<header>
<nav>

    <a href="index.html">Home</a> &nbsp;
    <a href="about.html">About</a> &nbsp;
    <a href="mission.html">Mission</a> &nbsp;
    <a href="staff.html">Staff</a> &nbsp;
    <a href="donate.html">Donate</a> &nbsp;
    <a href="contact.html">Contact</a>


</nav>

<h1>Virginia Delights</h1>
</header>


<img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="200" width="200"> 



<footer>

Copyright &copy; 2020 Virginia Delight
</footer>

    </div>


</body>

</html>



nav { text-align:right;
    float: right;
    margin: 0;
    font-size:1.3em;
    text-shadow:3px 3px 3px gray;}

header {width: 100%;}

nav a {text-decoration: none;
        color: white;
}


h1 {float: left;
     height: 100px;
     width: 700px;
     font-size: 2em;
     padding-left:150px;
     padding-right:150px;
     border-radius:20px;
     padding-top:0.5px;
     margin-left:auto;
     margin-right:auto;
     text-shadow:3px 3px 3px gray;
     color:white;}

Upvotes: 0

Views: 2343

Answers (2)

Johannes
Johannes

Reputation: 67799

It's not clear where you want your logo image, but all in all you can use display: flex; on the container (header) and add justify-content: space-between, plus the settings used below.

Note: I changed some of your width settings to fit everything in to one line in the snippet here, I erased the float settings, and I changed the order of elements in the HTML code because that really didn't seem logical in your code, considering the way you want it to appear.

header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
}

nav {
  margin: 0;
  font-size: 1.3em;
  text-shadow: 3px 3px 3px gray;
}

nav a {
  text-decoration: none;
  color: white;
}

h1 {
  height: 100px;
  font-size: 2em;
  border-radius: 20px;
  padding-top: 0.5px;
  text-shadow: 3px 3px 3px gray;
  color: white;
}
<div id="container">
  <header>
    <img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="100" width="100"> 
    <h1>Virginia Delights</h1>
    <nav>
      <a href="index.html">Home</a> &nbsp;
      <a href="about.html">About</a> &nbsp;
      <a href="mission.html">Mission</a> &nbsp;
      <a href="staff.html">Staff</a> &nbsp;
      <a href="donate.html">Donate</a> &nbsp;
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <footer>
    Copyright &copy; 2020 Virginia Delight
  </footer>
</div>

Upvotes: 2

ousecTic
ousecTic

Reputation: 1925

We can't really tell until you show us your css, otherwise here is some good old fashion css and html I would do with your html.

Remember you want to make everything semantic so I would recommend making your navbar like this

        <header>
            <div class="container">
                <h1 id="logo">Virginia Delight</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="staff.html">Staff</a></li>
                        <li><a href="mission.html">Mission</a></li>
                        <li><a href="staff.html">Staff</a></li>
                        <li><a href="donate.html">Donate</a></li>
                        </li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>

As for the CSS you just need to float the id="logo" to the left and the nav to the right

header {
    background-color: <Whatever color>;
    min-height: 100px;
    color: <Whatever color>;
}

header #logo {
    float: left;
    margin-top: 30px;
}

header nav {
    float: right;
    margin-top: 40px;
}

header li {
    list-style-type: none;
    display: inline;
    margin-left:30px;
}

header a {
text-decoration: none;
color: <Whatever color>;
}

Upvotes: 1

Related Questions