如何在导航栏上排列文本？

Question

I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK .

I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.

Below is my HTML code, within the codepen is my CSS if needed.

<div id="Navagationbar">
   <ul>
  <li><b><a href="#">HomePage</a></b></li>
  <li><b><a href="#">Portfolio</a></b></li>
  <li><b><a href="#">Contact Us</a></b></li>
  <li><b><center>Liam's Digital Portfolio<center></b></li>
   </ul>
 </div>
     </body>
</html>

Thanks, Liam.

Answer 1

I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:

padding-top: 180px;

Now from your html, remove

  <li><b><center>Liam's Digital Portfolio<center></b></li>

Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:

<h1 class="title">Liam's Digital Portfolio</h1>       

<div id="Navagationbar">
 <ul>
  <li><b><a href="#">HomePage</a></b></li>
  <li><b><a href="#">Portfolio</a></b></li>
  <li><b><a href="#">Contact Us</a></b></li>
 </ul>
</div>

And now we can simply add this to the css

.title{text-align:center;}

With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!

Answer 2

Make the HTML changes as below

        <ul>
          <li><b><a href="#">HomePage</a></b></li>
          <li><b><a href="#">Portfolio</a></b></li>
          <li><b><a href="#">Contact Us</a></b></li>
          <li style="position:absolute;right:45%"><b><a href="#">Liam's Digital Portfolio</a></b></li>
       </ul>

CSS changes as below

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}



    h1 {
    font-family:Arial;
    color:white;
    font-size:10pt;
    text-align:center;
    }

    li a:hover:not(.active) {
    background-color:grey;
}

   #Navagationbar {
   font-family:Arial;
   color:white;
   font-size:10pt;
   text-align:center;

}

   #Navagationbar ul {
   list-style:none;
   float:right;
   margin:0;
   padding:0;

}
   #Navagationbar ul li {
   display:block;
   list-style:none;
   margin:0;
   padding:0;


}

#Navagationbar ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   color:white;;
   text-decoration:none;
   line-height:1.3em;

}
#Navagationbar ul li a:hover {
   color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
   color:white;

}

body {
  margin:0;
}
.page{
  min-height:-590px;
  background:linear-gradient(45deg, #999, #FFF);
}
#footer{
  list-style:none inside none;
  margin:0;
  padding:0;
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  height:50px;
  background-color:#1f1f1f;
  font-size:0;
}
#footer li {
  font-family:Arial;
  float: right;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}
#footer li {
  font-family:Arial;
  float: left;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}


#footer li:last-child {
  border-right:0;
}

    body {
        background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
            position:static;
            height:400px; 
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-size:cover;

        }