Victory! Lesson 8


#1

I am building my resume in lesson 8, Victory, where I have a navigation bar on my header (only for practice). However, it is on the left side. What is the easiest way to bring it to center? I tried "align: center", but it didn't work. Can you please help?


#3

text-align: center will only work center text, you can use margin: auto, even better would be margin: 0 auto;, this way, margin-top and margin-bottom will be 0. auto will automatically give the max amount of margin on the left and right center, causing it to center


#4

I just set my Navbar to "margin:0 auto", but it did't work. Once again, i just want the space on two sides of my navbar to be equal. I set my navbar to "left:37%" and now it seems to be in center, but I am not sure. There must be an easier way to make sure it is totally in the center instead of just looking and guessing the percentage like I did.


#5

is your #header fixed? In that case, you also need to add the following to #header:

#header {
  margin: 0 auto;
  left: 0;
  right: 0;
}

#6

Yes, my "header" is fixed. As you recomanded, I added

margin:0 auto;
left:0;
right:0

But nothing changed.


#7

okay, can i see your code then? All of it, both html and css


#8

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	    <div id="header">
	    <div id="navbar">
	        <ul>
	            <li>Home</li>
	            <li>About Me</li>
	            <li>Contact</li>
	        </ul>
	    </div>
	        
	    </div>
	    
	    
	    <div class="left"></div>
	    <div class="right"><h3>Education</h3><p>I have been learning how to code in Codecademy and I am fully knowledgable about coding. Plus I love making websites. The followings are some of the programs that I have learned so far:</p>
	        <ol>
	            <li>HTML</li>
	            <li>CSS</li>
	        </ol>
	        <h3>Experience</h3>
	        <p>I was a head supervisor in Facebook for five years.</p>
	        </div>
	    <div id="footer"></div>
	</body>    
</html>

div{border-radius:5px;}

#header{height:60px;
        width:97.5%;
        background-color:3c4543;
        z-index:1;
        position:fixed;
        margin:0 auto;
        /*left:0;*/
        /*right:0;*/
}
        
ul {list-style-type:none;
        position:fixed;}
        
ul li {display:inline;
    padding:5px 5px 5px 5px;
    border:2px solid #000000;
    font-family:Futura, Tahoma, sans-serif     ;color:#ffffff;
    border-radius:5px;
    background-color:#cc0323;} 

#navbar{Position:fixed;
        margin-top:14px;
        margin:0 auto;
        
}    
        
        

.left{height:100%;
    width:60px; 
    background-color:acd1b2;
    float:left; margin-top:65px;}

.right{
	width: 93.5%;
	height: 100%;
	background-color: #F4EBC3;
	float:right;
	margin-top: 65px;
}

#footer{height:60px;
    width:97.5%;
    background-color:#3c4543;
    clear:both;}

#9

Is it something like this you're looking for?

codepen

EDIT: not the best method to use, doesn't center properly. Unless you do some other things, use stetims way.


#10

Why do you make everything fixed? You can simple center a unordered using text-align: center like i did here, i also removed bodys margin. Next time, provide your code first time, it would saved us both some time. Also, the bacticks shouldn't be on the same line as your code, it is this:

```
<!DOCTYPE html>

not:

```<!DOCTYPE html>

#11

Thanks, let me work on it.


#12

@benjnev, what did you do to center the unordered list?


#13

margin on the left, and some -margin on the bottom to bring everything up.

minus margins are accepted for aligning things aren't they? or does that only apply to vertical alignments?


#14

@benjnev, minus margins do work but if you build a professional website you don't wants your items to be a few pixels to the right or to the left. You want them in center. I still don't know how to do that. I use "test-align: center" but it didn't work for me.


#15

Well using -margins depends on whether you're trying to center or position something, not great for centering as I see but good for moving things about, if you know where other pieces of content/blocks will sit for that screen size as you know it wont have a conflict with any other elements sitting there. .

also its text-align not test-align

as stetim said

apply text-align: center; to your #navbar


#16

Yes, I meant to type text not test. thank you.

I set navbar to "text-align:center" but it didn't center my navbar. However when I applied "text-align:center" to "ul", it worked perfectly and now navbar is centered
. Thanks you guys.