CodeIgniter Forums
[SOLVED] <div> starting in header template and ending in footer template - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forum-5.html)
+--- Forum: General Help (https://forum.codeigniter.com/forum-24.html)
+--- Thread: [SOLVED] <div> starting in header template and ending in footer template (/thread-71216.html)

Pages: 1 2


[SOLVED] <div> starting in header template and ending in footer template - misterSerious - 07-19-2018

So I know that the header template should look like so, 
Code:
<html>
       <head>
               <title>CodeIgniter Tutorial</title>
       </head>
       <body>

               <h1><?php echo $title; ?></h1>

and then the footer can be,
Code:
              <em>&copy; 2015</em>
       </body>
</html>

this is clear. My trouble, however, is when I wrap the content of body (minus the scripts) in a div like so,
Code:
<!--header template-->
<html>
     <head>
          <title>CodeIgniter Tutorial</title>
     </head>
     <body>
          <div>
                <h1><?php echo $title; ?></h1>


<!--footer template-->

               <em>&copy; 2015</em>
           </div>

          <div>
          </div>

     </body>
</html>

it doesn't take! The page rendered has the first closing <div> positioned after the second closing <div> segment. Can anyone tell me how to get the page rendered like I want it to?


RE: &lt;div&gt; starting in header template and ending in footer template - InsiteFX - 07-20-2018

Make it like this:

header.php
Code:
<!DOCTYPE html>
<html lang="en">

<head>
   <title>CodeIgniter Tutorial</title>
</head>

<body>

template.php
Code:
<div class"page-wrapper">

   <?php echo $contents; ?>

</div>


footer.php
Code:
   <em>&copy; 2015</em>

</body>
</html>



RE: <div> starting in header template and ending in footer template - misterSerious - 07-20-2018

I would do it this way but it just isn't what I want.

The div works in tandem with a fullscreen overlay (on mobile) and helps me apply a certain behaviour to the body of the page while the menu is activating.


RE: <div> starting in header template and ending in footer template - InsiteFX - 07-20-2018

Then you may need to css files one for desktop and the other for mobile.


RE: <div> starting in header template and ending in footer template - misterSerious - 07-20-2018

I do not see how this suggestion will solve the problem, can you provide a little more details?

What I really need is for the div with the overlay outside the div surrounding rest of the page content. LOL, this is crazy.


RE: &lt;div&gt; starting in header template and ending in footer template - Pertti - 07-21-2018

Was the original question that you didn't want to start a DIV in one view and close it in another?

I'll use "header/start" and "footer/end" views, it might be a bit tricky to debug, but don't think it's necessarily too bad.

Your other option is to have views withing views:
Code:
<html>
<head>
</head>
<body>
    <?php $this->load->view('layout') ?>
</body>
</html>

Code:
<div>
    <?php $this->load->view('another') ?>
</div>
<div>
</div>

And so forth.


RE: <div> starting in header template and ending in footer template - Pertti - 07-21-2018

Or if it's something dynamic, you could trigger it from controller:
PHP Code:
public funciton index()
{
    
$this->data['showDiv'] = true;
    
$this->load->view('header'$this->data);
    
$this->load->view('content'$this->data);
    
$this->load->view('footer'$this->data);


Code:
<!--footer template-->
               <em>&copy; 2015</em>
           </div>

          <?php if (isset($showDiv) && $showDiv) : ?>
              <div>
              </div>
          <?php endif ?>

     </body>
</html>



RE: &lt;div&gt; starting in header template and ending in footer template - misterSerious - 07-21-2018

(07-20-2018, 08:43 AM)InsiteFX Wrote: Then you may need to css files one for desktop and the other for mobile.

(07-21-2018, 01:24 AM)Pertti Wrote: Was the original question that you didn't want to start a DIV in one view and close it in another?

I'll use "header/start" and "footer/end" views, it might be a bit tricky to debug, but don't think it's necessarily too bad.

Your other option is to have views withing views:
Code:
<html>
<head>
</head>
<body>
   <?php $this->load->view('layout') ?>
</body>
</html>

Code:
<div>
   <?php $this->load->view('another') ?>
</div>
<div>
</div>

And so forth.

I did, in fact, want the opening div to be in the header template and the closing div to be in the footer template. The idea is for the content of the page (navbar to footer) to be wrapped in a div and then have a second div with an overlay. I would like to add a separate effect to the main content when the overlay is activated. Codeigniter cannot see the closing div so it doesn't work as I expect and the wrapper extends beyond the second div containing the overlay.

The second suggestion appears to be an overkill IMHO.


RE: <div> starting in header template and ending in footer template - John_Betong - 07-21-2018

@misterSerios
>>> The second suggestion appears to be an overkill IMHO.

It is far easier to use the second method because it makes chasing bugs so much easier... especially when there are dozens of include files and variables which any one might be the problem which affects page rendering.

It is easier to isolate problems by keeping the opening and closing divs, remming the included file or variable then testing with
https://validator.w3.org

Once the page validates, incrementally add the remmed PHP files or variables. Continue until the page fails, fix the bug, rinse and repeat.


RE: <div> starting in header template and ending in footer template - Pertti - 07-22-2018

(07-21-2018, 06:22 PM)John_Betong Wrote: It is far easier to use the second method because it makes chasing bugs so much easier... especially when there are dozens of include files and variables which any one might be the problem which affects page rendering.

Exactly.

While I've been using the start / end in two separate files mostly, because rogue extra or missing </div> is such a pain in ass to figure out, I'm almost certain I will start converting my code into view within a view approach sooner rather than later.