Nav bar positioning :/


#1

My text in my nav bar are not centered i have the button and the two other links next to the button that are surposed to be centered with the button but instead are higher than it,

Code -->

HTML :

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
    
    <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link type="text/css" rel="stylesheet" href="css/stylesheet.css">	
  <link rel='stylesheet' href='css/style.css'> 
  </head>
  <body>

  <!-- Header -->  
    <div class="header">
      <div class="container">
      	<div class="menu">
              <ul>
                <li class="btn btn-default">
                  <a href="https://s3.amazonaws.com/codecademy-content/projects/newsroom/index.html" class="Color">Text</a>
                </li>
                <li>
                  <a href="https://s3.amazonaws.com/codecademy-content/projects/newsroom/index.html">Text</a>
                </li>
                <li>
                  <a href="https://s3.amazonaws.com/codecademy-content/projects/newsroom/index.html">Text</a>
                </li>
              </ul>
        </div>
      </div>

CSS :

html, body {
  margin: 0;
  padding: 0;
  background-color: #eee;
  width: 100%;
}

.container {
  width: 100%;
}

.header {
  background-color: rgba(255,255,255,0.5);
  background-image: URL("https://hd.unsplash.com/photo-1470399332216-237209aa628e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 600px;
}

.heading {
  padding-top: 150px;
  padding-left: 300px;
}

.header h1 {
  color: #eee;
  width: 70%;
  font-family: Montserrat;
  font-weight: 600;
  text-align: center;
}

.menu ul {
  padding: 0px;
  margin: 0px;
  text-align: right;
}

.menu .btn {
  background-color: #333;
  border-radius: 0px;
  padding: 8px 30px;
  color: #eee;
  text-align: center;
}

.menu .btn .Color {
  color: #eee;
}

.menu li {
  display: inline-block;
  margin-left: 13px;
  margin-right: 30px;
  margin-top: 25px;
  margin-bottom: 15px;
}

.menu a {
  font-family: Oswald;
  text-decoration: none;
  font-size: 18px;
  color: #A9A9A9;
}

#2

.menu ul {
  padding: 0px;
  margin: 0px;
  text-align: right;   // do center
}

#3

sorry had to go to bed different time zones, yea still of a bit to the top, i;v tried everthing have no idea what is going wrong.


#4

what do you mean still a bit to the top, we can't look inside your head.

Use class names (x is too much down/to the top compared to y, element is not perfectly horizontal/vertically center inside other element/class-name), be specific in what you need. Make sure we have the latest version of your code


#5

um yea sorry, y axis is too much too the top of the two text next to the main button text, that's still my latest code have not done anything.


#6

the y-alignment seems fine?


#7

hmm yea looks like what i want there, why is mine not showing up the same why? im using google should i switch to firefox?


#8

i might have might the change @rcodeman suggested (text-align: center)

Again, i can't see what you are seeing. Screenshot?


#9

For some reason i can't print screen like :confused:


#10

can you post a new version of your code (both html and css)? Yours is obviously different, given all my buttons say text, and yours say something different.

Small difference can have massive impact...


#11

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
    
    <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link type="text/css" rel="stylesheet" href="css/stylesheet.css">	
  <link rel='stylesheet' href='css/style.css'> 
  </head>
  <body>

  <!-- Header -->  
    <div class="header">
      <div class="container">
      	<div class="menu">
              <ul>
                <li class="btn btn-default">
                  <a href="https://s3.amazonaws.com/codecademy-content/projects/newsroom/index.html" class="Color">About Me</a>
                </li>
                <li>
                  <a href="https://s3.amazonaws.com/codecademy-content/projects/newsroom/index.html">Projects</a>
                </li>
                <li>
                  <a href="https://s3.amazonaws.com/codecademy-content/projects/newsroom/index.html">Contact</a>
                </li>
              </ul>
        </div>
      </div>
  
  <!-- Hero image -->
    <div class="heading">
      <div class="container">
        <div class="col-md-12">
         <h1>Text Text Text</h1>
        </div>
      </div>
    </div>
  </div>

html, body {
  margin: 0;
  padding: 0;
  background-color: #eee;
  width: 100%;
}

.container {
  width: 100%;
}

.header {
  background-color: rgba(255,255,255,0.5);
  background-image: URL("https://hd.unsplash.com/photo-1470399332216-237209aa628e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 600px;
}

.heading {
  padding-top: 150px;
  padding-left: 300px;
}

.header h1 {
  color: #eee;
  width: 70%;
  font-family: Montserrat;
  font-weight: 600;
  text-align: center;
}

.menu ul {
  padding: 0px;
  margin: 0px;
  text-align: right;   // do center
}


.menu .btn {
  background-color: #333;
  border-radius: 0px;
  padding: 8px 30px;
  color: #eee;
  text-align: center;
}

.menu .btn .Color {
  color: #eee;
}

.menu li {
  display: inline-block;
  margin-left: 13px;
  margin-right: 30px;
  margin-top: 25px;
  margin-bottom: 15px;
}

.menu a {
  font-family: Oswald;
  text-decoration: none;
  font-size: 18px;
  color: #A9A9A9;
}

#12

Atfirst tell me what do you want actually???


#13

That is weird, i am unable to reproduce the problem. I put your code in a bin, do you have the same problem there?


#14

no it's all ok there O.o :confused: its it my text editor (sublime text)??


#15

no, it is not. I was so stupid not to include bootstrap. Hold on, now i have reproduced the problem


#16

look how much stuff the .btn class contains in bootstrap:

So, i narrowed down the problem. Now you can fiddle with it to find the exact problem


#17

should i had some of that stuff?


#18

some of it, yes, but the problem is in vertical-align: middle, you could simple overwrite it by adding:

body .btn { vertical-align: unset; }

i think, see documentation


#19

I see thank you so much for your time and patience :slight_smile: really appreciate it