Website Layout Help

Hey guys ! Brand new to the community & appreciate any help/tips.

I am working on a website layout and just want to know what you think would be the ideal way too layout the (footer , header , and left side nav bar, ) in the same spot on every page… They will be on multiple pages , roughly 30-40 .

Should I use php “include” ? & also I am having more trouble then I should figuring out how to make my content respect those 3 objects space. Any thoughts?

Sorry if this question is noobish , I promise I have been studying HTML and CSS constantly and just can’t seem to grasp the layout .

Thank you in advance !

If your site is using PHP then you could use PHP incudes for your headers and footers (and any other common code) to save you copying and pasting the same code 30 or 40 times. And, if the header or footer changes in future you will only need to make the changes once rather than 30 or 40 times.

The only thing is, if you are only just learning HTML and CSS, trying to master PHP as well might be a lot to ask.

Those three object spaces should be part of the whole page structure rather than 3 islands of absolutely placed content. You would use something like flex or grid to lay all your columns and rows out so that they interact with each other without overlapping. (You can still farm out those 3 containers to your php or serverside includes etc and will make no difference to the layout.)

Avoid using absolute positioning for structural content (if that’s what you have done) as it does not interact with other elements because absolute elements are removed from the flow and don’t care about anything except themselves.

This is how I did it when I first started using PHP includes, and probably what drew me into PHP in the first place.
But now I do it in reverse which I find to be more DRY and maintainable.
So what I have is one page template with a <head>, <body> and all the common HTML elements in the body, such as a header, menu, sidebar(s), <main> content holder, footer, etc.
Then the unique content, such as the <title> <meta name="description"..., <h1> and body content are included.
These may or may not by done via includes. Shorter things like the title may use an echo:-

<title><?= $pageTitle ?></title>

More bulky content may be an actual include:-

<main><?php include $pageContent ?></main>

Or you may even have set up a special function to output things:-

<h1><?php $thisPage->output('pageHeading') ?></h1>

And then the actual template may be an include in the script that defines what the page will be, which has already set up values for the variables within the template.

Now if you decide to completely redesign the page layout, move the sidebar from left to right, put the menu before, not after the header, or in any way drastically change the page structure.
You don’t have the edit all those 30/40 pages, adding, removing, changing the the order of, all the includes, but just edit one template file.

Maybe what I describe is a little deep for a beginner, but food for thought.
While having many includes around the unique page content is the more obvious and seemingly simpler method, in the long term I find the other way simpler to maintain once set up.

2 Likes