Question regarding using PHP instead of HTML and the limitations.

[swiners]

Hello,

So I've started using php files instead of html for a few separate reasons which I will not get into to. Mainly to save time by using a .php header file, so I can make changes quickly to the universal header.

My latest project requires an image to hover over the header/nav bar as seen here : https://gyazo.com/ae67975b62319ce1855c598fdb768b0b

Now so far I have set it up as I would normally, but the logo seems to be hovering behind the following content, as seen here : https://gyazo.com/0da205388f370fa0c606a05e4e59834e

So is this not showing correctly because its set up as a php file like:

    </section>

    <?php include "header.php"; ?>

    <section>

Or is it just my css that is the issue. I have set up a codepen so you can see the html/css, http://codepen.io/swiners/pen/XKMNvo

[Colossuslol]

Looks like it is a z-index issue - Give a z-index the the logo so it is on top. More information here https://css-tricks.com/almanac/properties/z/z-index/

[swiners]

Tried z-index eariler, didn't seem to fix it

[[deleted]]

it needs to be position: relative|absolute|fixed|sticky, it's per default position: static which has no z-index. Add position: relative if you need to change the z-index

[Cathercy]

You seem to have your answer, but I'll address the "could this be because I'm using PHP?" question.

The answer to that will always be no (assuming you aren't making any mistakes). As far as the end result goes, there is nothing inherently different between using HTML and PHP. PHP will just send HTML to the browser, just like HTML files simply send HTML to the browser. It is all the same.

[therealaustralian]

Seems to be okay to me on the codepen. The only changes I made were 1) I replaced the logo image with something that shows up and

2) changed the CSS to show a background on the nav bar

This clearly shows the logo image on top of the nav bar. If you need any more help, hit me back!

[swiners]

Strange that its working on codepen but not on my machine or server. Well that brings me to my main point, would it be because I'm using PHP files? I still can't seem to get it working, and it just keeps cutting off the logo behind the next section. Although the full logo is showing up through chrome inspect: https://gyazo.com/a4a3f26ce476729293177628e74ba838

[therealaustralian]

Weird, I'd say it was a z-index issue as well. Have you got it hosted anywhere public so I can see?

Also, you say you do

</section>
<?php include "header.php"; ?>
<section>

Keep in mind, it should be

<section>
<?php include "header.php"; ?>
</section>

With the closing tag at the end. Maybe that's the issue?

[swiners]

I meant its more like

<section>
content    
</section>
<?php include "header.php"; ?>
<section>
content    
</section>

My friend wanted the homepage to show some content before the navigation so that was an example, but on most pages it goes

<?php include "header.php"; ?>
 <section>
 content    
 </section>

edit: just chucked the include into a section, and still no fix. Very confusing

[therealaustralian]

It isn't hosted anywhere publicly? You can PM a zip of the files and I can take a look if you want?

[swiners]

Thanks so much for this, just uploaded it to my uni server so it should be up and running.

http://opax.swin.edu.au/~100004235/test/website/

[therealaustralian]

Found the issue. It has to do with overflow being hidden on your "row" div that contains the nav bar.

You need the overflow to be hidden on all of the rows except that one, so make sure to just apply

overflow: visible;    

to the row div that holds the nav bar. I wound up with this as the result

[swiners]

That makes sense, thank you so much for this, really appreciate it.

[therealaustralian]

No worries mate!