Main wrapper function

HTML & CSS
1

Hey guys!

I have the following code in my header.php and am trying to make a navigation bar but when I place more unordered lists , the div class doesn’t look correct, what is the purpose of having a main-wrapper? I guess a div class is just to place a box around certain contents… At the moment, my site looks like this with a div class wrapped around the ul…

1501×582 31.6 KB

This is the code for my header.php


<!DOCTYPE html>
<html>
<head>
   
	<title></title>
	<meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</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">Level 1</a></li>
            <li><a href="level2.php">Level 2</a></li>
            <li><a href="level3.php">Level 3</a></li>
            <li><a href="signup.php">Signup</a></li>
            <li><a href="update.php">Update Profile</a></li>
            <li><a href="reset.php">Reset Password</a></li>
            <li><a href="includes/Moderator.php">Moderator</a></li>
            <li><a href="includes/qa.php">Q/A</a></li>
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="donation.php">Donation</a></li>
            <li><a href="maintenance.php">Maintenance Status</a></li>
            
          </ul>
      
   
         <div class ="nav-login">
             <?php
              session_start();
                if (isset($_SESSION['u_uid'])) {
                   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>';
              }
              
                ?>
             
             
</div>
 </div>

  


   </nav>
         
   
   </header>

However, if I have just one or two ul lists, then it looks fine… or if I get rid of the div class, then it looks okay!

2

Without seeing the accompanying CSS, it’s hard to comment, but I would normally expect a div with the class of “main-wrapper” to be a wrapper for the whole page, or at least for the main content. It seems an odd thing to call a div which is just part of the navigation. My guess would be that you’ve tried to combine code from more than one source without a proper understanding of how it works or what its purpose is. If you don’t understand the purpose of that div, and your site looks better without it, then it’s probably safe to remove it, but be sure you make a backup copy first, just in case.

5 Likes
3

As TechnoBear said above a main-wrapper would usually hold the whole page contents and be a method for controlling the width of the page without having to address specific individual blocks. It would not usually be nested inside a header.

As you haven’t posted any CSS then we are only guessing and you need to clarify why you are adding more uls in the header and what you intended the output to look like?

A link to the live site would make it more easy for us to debug and give pointers.

5 Likes
4

On a side note: I think it had been mentioned to you before in PHP. You can’t have session_start() after there has been any output to the browser. It does not belong in the middle of the html document.

7 Likes
5

Thanks for that… I must have missed it! So, it should go right at the very top of a page? If I have another page called header.php and have linked all the pages to that page, do I still need to have session_start() on everypage if I have one in header.php? thanks!

6

The “headers already sent” discussion would belong in the PHP category not here.

As others have posted, without knowing what CSS goes with that HTML it is difficult if not impossible to offer any helpful fixes.

My take is the navigation links are overflowing the area where you would like them to be contained. As long as their parent element can adjust to the content, they should wrap to new lines and their parent element should “push down” what’s below it resulting in no overlapping.

We need to see what CSS is preventing that from happening.

4 Likes
7

I guess if the items are pushed down and looks weird on a local server, then it will also look weird in a real server?

8

Correct. The real server doesn’t have a way to magically fix things for you.

3 Likes
9

Having a design fit the content takes skill and compromises. Even when the content is static, a designer needs to consider different devices, browsers and user preference settings.

Some sites opt for rigid dimensions that will give some users scroll bars or overflow content that will be hidden or escape its container. Some sites opt for adaptable dimensions. Others use responsive styles.

I’m of the belief that having a good user experience trumps having a design that looks identical for all users. In other words, I would rather have a line of navigation links wrap and take more height for some than for those users to need to horizontal scroll. For narrow view-ports, I would consider swapping the navigation to a slide-out or hamburger.

7 Likes
10

If you find that you have too many menu items to fit your design, there are some other options to consider.
You could group menu items into sub-menus, so you are left with only a few top-level menus that are visible all the time.
But if you still want one big, single level menu, you could have a “hamburger” to toggle the whole menu display.
Some sites put links to less commonly used pages in a footer nav and the most important links in the header nav, that’s another option.
Similar to multi level menus, you could group associated pages and have list pages to route users to specific pages. For example, instead of having a menu item for every level you offer, have just one link to “Levels” or “Course Levels”. Then that page lists and describes each level with a link to the level’s individual page.

Again, this is straying more into the topic of Design/UX rather than actual coding. But you need to make these design decisions based on your content before you start structuring your pages.

7 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.