How to evenly space out the nav bar

HTML & CSS
1

Hey guys!

I tried to use display:inline-block; padding-right:50px; for my navigation bar but it didn’t space it out evenly:

Here are my codes:

session_start();

?>




<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
   <nav>
      <div class="main-wrapper">
         <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="primer.php">Primer Level</a></li>
            <li><a href="level1.php">Level1</a></li>
            <li><a href="level2.php">Level2</a></li>
            <li><a href="level3.php">Level3</a></li>
         </ul>
         <div class="nav_login">
            <?php
             if (isset($_SESSION['u_id'])) {
                echo '<form action="includes/logout.php" method="POST">
               <button type="submit" name="submit">Logout</button>
               </form>';
             } else {
               echo '<form action="includes/login.php" method="POST">
                     <input type="text" name="uid" placeholder="Username/e-mail">
                     <input type="password" name="password"
                     placeholder="password">
                     <button type="submit" name="submit">Login</button>
                     </form>
                     <a href="signup.php">Sign up</a>';
                  }

            ?>
            


            
         </div>
      </div>
   </nav>
</header>

But my website looks something like this…

1871×92 7.42 KB

2

Hi,

You didn’t give us enough to work with as we would need all the html and css that applies to it. You didn’t give us any specific CSS :slight_smile:

As A start I would do something like this using flex.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.main-wrapper {
	max-width:1280px;
	margin:auto;
	padding:20px;
	background:#f9f9f9;
}
.nav{
	display:flex;
}
.nav ul {
	margin:0 3rem 0 0;
	padding:0;
	list-style:none;
	display:flex;
	flex:1 0 0%;
	justify-content:space-between
}
.nav ul a {
	display:block;
	padding:5px 10px;
}
.nav_login{
	margin-left:auto;
}
</style>
</head>

<body>
<div class="main-wrapper">
  <header>
    <nav class="nav">
      <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="primer.php">Primer Level</a></li>
        <li><a href="level1.php">Level1</a></li>
        <li><a href="level2.php">Level2</a></li>
        <li><a href="level3.php">Level3</a></li>
      </ul>
      <div class="nav_login">
        <form action="includes/login.php" method="POST">
          <input type="text" name="uid" placeholder="Username/e-mail">
          <input type="password" name="password"  placeholder="password">
          <button type="submit" name="submit">Login</button>
        </form>
        <a href="signup.php">Sign up</a> </div>
    </nav>
  </header>
</div>
</body>
</html>

Run that code in your browsers to see how it looks and then modify it to your needs.

3

Sorry about that… My css code is as follows:


/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*My Code*/

.main-wrapper {
    margin: 0 auto;
    width: 1000px;
    
}






a {
   text-decoration: none;

}

body {
    background-color: #ccc;
}

header nav {
    width: 100%;
    height: 60px;
    background-color: #fff;
}

header nav ul {
    float: left;
  
}

header nav ul li {
    float: left;
    list-style:none;
    
}

header nav ul li a{
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    

}

header .nav_login {
   float:right;
}

header .nav_login form{
   float:left;
   padding-top: 15px;
}

header .nav_login form input{
   float:left;
   width: 140px;
   height: 30px;
   padding: 0px 10px;
   margin-right: 10px;
   border:none;
   background-color: #ccc;
   font-family: arial;
   font-size: 14px;
   color: #111;
   line-height: 30px;

}

header .nav_login form button{
   float:left;
   width: 60px;
   height: 30px;
   margin-right: 10px;
   border:none;
   background-color: #f3f3f3;
   font-family: arial;
   font-size: 14px;
   color: #111;
   cursor:pointer;

}

header .nav_login form button:hover{
   background-color: #ccc;

}

header .nav_login a{
    display: block;
    width: 60px;
    height: 60px;
    border:none;
    float:left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor:pointer;
}

.main-container {
    padding-top: 40px;
}

.main-container h2 {
    font-family: arial;
    font-size: 40px;
    color: #111;
    line-height: 50px;
    text-align:center;
}

/*signup.php styling*/

.signup-form {
    width:400px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input{
   width: 90%;
   height: 40px;
   padding: 0px 5%;
   margin-bottom: 4px;
   border:none;
   background-color: #fff;
   font-family: arial;
   font-size: 16px;
   color: #111;
   line-height: 40px;

}

.signup-form button{
   display:block;
   margin: 0 auto;
   width: 30%;
   height: 40px;
   border:none;
   background-color: #222;
   font-family: arial;
   font-size: 16px;
   color: #fff;
   cursor:pointer;

}

.signup-form button:hover{
   background-color: #111;
}

Thanks!

4

If you add that css into the code that I gave you you will see that it is almost there and displays almost perfectly.

1028×102 12.7 KB

Notice that I changed the html a little as your main-wrapper seemed to be out of place and added a class to nav.

You should be able to take it from here and implement it yourself. If you get stuck then shout and once again post the full html and css that you are having a problem with. Try to avoid fixed widths if you are making a responsive site and use max-width as in the code I gave you.

1 Like
5

Hi!

I included the following codes:


.main-wrapper a {
  font-size: 15px;
  padding-left: 20px;
  float: left;
}

but now my top looks something like this

1069×116 5.84 KB

but I can still see that there are a lot of gap on the left side…

6

You don’t need float on the anchor as I gave you a flex example. Floats do not auto fit and are isolated elements that have no alignment properties. If you use float you have to manually do everything and that becomes tedious.

Also do you really want to style every anchor inside your main-wrapper? That will target everything inside main-wrapper which I assume should be your whole page. If main-wrapper isn’t a main page wrapper then you should call it something else as its confusing already

The display flex I applied will space the items out evenly. Just run my code again and see for yourself. There is no need for float when using flex.

You will need to show full code as we can’t keep guessing what you have done or instead set up a codepen demo so that we can see the progress of the page. It takes a couple of minutes to do.

Here’s one that I just set up showing relevant code so far (I haven’t changed your right side form to flex but left it mostly alone).

(You will need to click the ‘Edit on codepen’ link in the top right corner to view to at full width on codepen as I have not applied media queries for smaller screens.)

There’s still a lot of work to do here and you should be thinking in terms of a responsive layout as this is too rigid once screens size shrinks (as you can see) so you need to plan ahead and think where everything can go and fit nicely without having to change too much.

I can’t code it all for you but you do need to get up to speed on the techniques required so practice,practice, practice :slight_smile: (I’m offline for a few hours now so back later)

1 Like
7

Thanks for the assistance but i have been following this tutorial by mmtutus and i like the lessons because he explains well…i i am using my phone so can’t copy the url but it is lesson 45… maybe can you go through that video and help me out? Thanks

8

Can you be a bit clearer about the help you need at this point?

Paul has asked questions which you haven’t answered, and without your code, there’s not much else we can do. Paul has given you code which should produce pretty much the result you’re looking for. If it’s not working as expected for you, then there must be a conflict with something else on the page.

We need the full code that you are using, not code from a tutorial, because there must be something - perhaps just a typo - in your own version that is causing the problems. We also need you to answer Paul’s questions.

10

Thanks… i will try the code later and provide my full codes

1 Like
11

Hey guys!

Thanks for the flex code but I would like to get this working without too much editing if possible as this will enhance my learning on css. I am still having this problem with my main page… it looks like this when I added more menus to my navigation page:

1250×601 15 KB

12

I am trying to add my links to my navigation bar at the top and I just noticed that the more that I add, it will push the login screen to the next line… Here are my codes for my navigation page and css

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

<header>
   <nav>
      <div class="main-wrapper">
         <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="primer.php">Primer Level</a></li>
            <li><a href="level1.php">Level1</a></li>
            <li><a href="level2.php">Level2</a></li>
            <li><a href="level3.php">Level3</a></li>
            <li><a href="level3.php">Admin/Moderator</a></li>
         </ul>
         <div class="nav_login">
            <?php
             if (isset($_SESSION['u_id'])) {
                echo '<form action="includes/logout.php" method="POST">
               <button type="submit" name="submit">Logout</button>
               </form>';
             } else {
               echo '<form action="includes/login.php" method="POST">
                     <input type="text" name="uid" placeholder="Username/e-mail">
                     <input type="password" name="password"
                     placeholder="password">
                     <button type="submit" name="submit">Login</button>
                     </form>
                     <a href="signup.php">Sign up</a>';
                  }

            ?>
            


            
         </div>
      </div>
   </nav>
</header>

This is my CSS code:


.main-wrapper {
    margin: 0 auto;
    width: 1000px;
    
}




.main-wrapper a {
  font-size: 15px;
  padding-right: 20px;
  float: left;
}



a {
   text-decoration: none;

}

body {
    background-color: #ccc;
}

header nav {
    width: 100%;
    height: 60px;
    background-color: #fff;
}

header nav ul {
    float: left;
  
}

header nav ul li {
    float: left;
    list-style:none;
    
}

header nav ul li a{
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    

}

header .nav_login {
   float:right;
}

header .nav_login form{

   float:left;
   padding-top:20px;
}

header .nav_login form input{
   float:left;
   width: 140px;
   height: 30px;
   padding: 0px 10px;
   margin-right: 10px;
   border:none;
   background-color: #ccc;
   font-family: arial;
   font-size: 14px;
   color: #111;
   line-height: 30px;

}

header .nav_login form button{
   float:left;
   width: 60px;
   height: 30px;
   margin-right: 10px;
   border:none;
   background-color: #f3f3f3;
   font-family: arial;
   font-size: 14px;
   color: #111;
   cursor:pointer;

}

header .nav_login form button:hover{
   background-color: #ccc;

}

header .nav_login a{
    display: block;
    width: 60px;
    height: 60px;
    border:none;
    float:left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor:pointer;
}

.main-container {
    padding-top: 40px;
}

.main-container h2 {
    font-family: arial;
    font-size: 40px;
    color: #111;
    line-height: 50px;
    text-align:center;
}

/*signup.php styling*/

.signup-form {
    width:400px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input{
   width: 90%;
   height: 40px;
   padding: 0px 5%;
   margin-bottom: 4px;
   border:none;
   background-color: #fff;
   font-family: arial;
   font-size: 16px;
   color: #111;
   line-height: 40px;

}

.signup-form button{
   display:block;
   margin: 0 auto;
   width: 30%;
   height: 40px;
   border:none;
   background-color: #222;
   font-family: arial;
   font-size: 16px;
   color: #fff;
   cursor:pointer;

}

.signup-form button:hover{
   background-color: #111;
}
14

I’ve temporarily unlisted this topic, because it looks to me like a continuation of your earlier thread here:

How to evenly space out the nav bar

I notice you are still using your old code, rather than the improved flex version which @PaulOB provided you. Have you tried his code?

15

I haven’t tried the flex code yet because I would like to try and understand the code that I am learning from mmtuts first…

16

So our pros have been wasting their time with you?

Sounds to me like you should be contacting mmtuts for assistance. We don’t need to learn their tutorial code for you.

17

The code you have doesn’t behave as you wish. You’ve been given a solution which will solve your problem, but you’re saying you don’t want to use it?

If there is something you don’t understand about the working code, then feel free to ask, but insisting on using your existing code when it’s been explained to you why that’s not the best choice here just seems perverse.

I’m going to merge these two topics, as they’re clearly related.

1 Like
18

Sorry for the confusion guys but the reason why I haven’t used the flex code yet is because I am new to css and don’t want to get myself confused with it. I would appreciate if someone could assist me here while keeping the thing simple for me to grasp… thanks!

19

Our problem is that, as @PaulOB explained, the code you are using with floats is not the best way to approach this. If you are serious about learning CSS, then you need to learn when a particular technique is appropriate, and when a different technique might be a better choice.

You’ll find people are generally willing to offer clear, step-by-step explanations to beginners, but you can understand, I’m sure, that it is frustrating to answer a question for someone only to be told, effectively, “But that’s not the answer I want”.

Tutorials will take you so far, but if you want to adapt or change things, then you need to be willing to learn new techniques.

3 Likes
20

@piano0011,

There are plenty of online courses that teach HTML and CSS, many of them teach current techniques. You may even have a community college nearby with a conscientious instructor. Learning HTML and CSS takes time but it is a worthwhile investment in yourself if you wish to continue writing HTML and CSS. The only “shortcut” to actually learning to code is hiring someone to do it for you. We are glad to help people through learning snags, but our primary charge is to help people through trouble spots, not to teach a newbie from scratch. Study and learn a foundation of HTML and CSS knowledge so you can build on it. That includes studying the merits and demerits behind what you are being told and what you want to achieve. You do not want to waste your time any more than we do. You need that foundation.

2 Likes
21

Unfortunately you seem to be asking a question that can only be solved properly by using different techniques such as flexbox or display:table and table-cell properties. Evenly spacing a menu is not something you can do with floats (unless you use explicit dimensions for which of course you must know the exact number of items).

You can use magic numbers and assume that the maximum number of menu items is as shown in your last current code and in order to make that fit on one line you would need to change the right padding to 10px.

.main-wrapper a{padding-right:10px;}

Of course if you only have a few menu items then they will appear bunched together and not spread out. This is a very rigid approach and prone to break at the first change in the number of menu items or if a user specifies a different font or font-size etc.

On a more important note you only seem to be catering for a fixed width of 1000px and while that may seem fine for practising it is actually a hindrance in learning to build a responsive site. You should always be thinking about what will happen if the menu items are longer than the available line length (or indeed if a user had simply zoomed their text size only). Until you grasp the concepts of responsive design you will continue to build unworkable components or components that may only works for one person under the exact same conditions that you have constructed them for.

There is no easy answer other than learning the underlying philosophy of responsive design and building that fluidity into your layouts from the start. The world wide web is not 1000px wide.

So to answer your question you cannot evenly space your menu items using your current method unless you have a defined number of items and you size each precisely so that their total combined widths matches the width of the available space. This is not an approach that anyone building a site today should use as there are better methods available.

5 Likes
22

Thanks for the detailed explaination and I have tried to add some padding but it still looks like this though and the text is big…

1358×533 19 KB