CODEWITHSUNDEEP
htmlcss
Ryan
Ryan

Reputation: 151

How to get this div onto a new line

How do I get ARC onto its own line? I put them both in the same div to share a background, but I am having trouble separating the two. My menu bar is perfectly centered until I put in "ARC".

.header{
  background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 80vh;
  display: flex;
  width: 100%;
}


.header ul li{
float: left;
color: white;
list-style: none;
padding: 7px 6px;
margin: 0;
text-align: center;
font-size: 15px;
display: flex;
}

.menu{
  width: 100%;
  text-align: center;
  display: block;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
    <div class="header">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
      <br>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

Upvotes: 0

Views: 124

Answers (3)

user8346283
user8346283

Reputation:

I would change the HTML from this:

 <div class="header">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
      <br>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

To this (solution):

 <div class="header">
    <div id="navbar-wrapper">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
    </div>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

Conclusion: it is better to use for example a div tag to make a new line than br tag as you gain much more control over your page setup and it is easier to style. Keep on good work!

Upvotes: 1

asportnoy
asportnoy

Reputation: 2534

Just applied some of the CSS styles to only the links and that worked. Hope this helps!

.header{
  background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 80vh;
  width: 100%;
}


.header ul li{
float: left;
color: white;
list-style: none;
padding: 7px 6px;
margin: 0;
font-size: 15px;
}

.menu{
text-align: center;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
<div class="header">
      <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>Contact</li>
      </ul>
      <br>
      <div class="title">
        <h1>ARC</h1>
      </div>
    </div>

Upvotes: 1

CodeWizard
CodeWizard

Reputation: 142254

Since your li is float left they will be one next to the other.

add clear:left to the element and it will work.

.header ul li{
    float: left;
    clear: right;
    ...
 }

clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

Upvotes: 1

Related Questions