Using css for styling a dynamic menu

Question

I have this code for a dynamic menu using php:

menu.php:

<?php
    // Get current page file name
    $page = basename($_SERVER["PHP_SELF"]);
?>
<?php include "templates/header.php"; ?>
<?php include "templates/footer.php"; ?>

templates/header.php:

    <h1>A Library</h1>
<div id="navigation">
    <ul>
        <li><a href="index.php" <?php if ($page == "index.php") echo 'class="current"' ?>>Products</a></li>
        <li><a href="resume.php" <?php if ($page == "resume.php") echo 'class="current"' ?>>Resume</a></li>
        <li><a href="photography.php" <?php if ($page == "photography.php") echo 'class="current"' ?>>Photography</a></li>
        <li><a href="about.php" <?php if ($page == "about.php") echo 'class="current"' ?>>About</a></li>
        <li><a href="contact.php" <?php if ($page == "contact.php") echo 'class="current"' ?>>Contact</a></li>
    </ul>
</div>
 </body>
</html>

templates/footer.php:

</body>
</html>

menu.php and file templates are in the same directory

This code creates a simple and small sized menu.How could i make this a bit better usng css?

I wrote this css code but i have no idea how to connect it with the menu:

#navigation ul li a.current {
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
}

[https://www.w3schools.com/css/css_howto.asp](https://www.w3schools.com/css/css_howto.asp) should help. — Jacob S, May 24 '19 at 16:10
Possible duplicate of [Apply CSS Style to child elements](https://stackoverflow.com/questions/632100/apply-css-style-to-child-elements) — Alessandro Da Rugna, May 24 '19 at 20:38

Auris · Answer 1 · 2019-05-24T16:27:09.887

1

there are multiple ways to include CSS, in your case the simplest way would be to create a lets say style.css and include it in your main template inside the tags: <link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'> this way it will affect all of your dynamically included CSS and it should be class locked for interchangeable components. Example:

<html>
    <head>
        ... other meta tags
        <link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'>
    </head>
    <body>
        your php includes for content
    </body>
 </html>

edited May 24 '19 at 16:27

answered May 24 '19 at 16:18

Auris

1,309
1
9
18

So, this goes inside the header or the menu file? – Epitheoritis 32 May 24 '19 at 16:23
1

this would go above your header and your menu (that is unless your `` tag is inside your header.php. I have updated my answer with the correct structure – Auris May 24 '19 at 16:25
I did as you said but still it wont work.After going to dev options in chrome isaw that it chose this path for the css file:http://localhost/php-beginner-crud-level-1/css/style.css however there is no localhost folder.If i use the whole path instead of css/style.css it still puts the localhost infront.Any idea about how could this be fixed? – Epitheoritis 32 May 24 '19 at 17:18
hi, `localhost` is not a directory, it your host name (in a real environment ir would be `www.some_domain.com` but on your local machine it just refferences to itself (typically your webserver that is running on port 80). your actual path seems to be `php-beginner-crud-level-1/css/style.css` which has to be relative to your index.php file. – Auris May 29 '19 at 09:21

Mohit Kumar · Answer 2 · 2019-05-24T16:22:41.790

0

you should use <link> Tag to include css file with html / php

<head>
<link rel='stylesheet' type='text/css' href='CSS/main.css'>
</head>

edited May 24 '19 at 16:22

answered May 24 '19 at 16:16

Mohit Kumar

952
2
7
18

Sorry for downvote, but you can not put link inside style. Whatever is inside style tags has to be literal css – Auris May 24 '19 at 16:20
sorry it should be head. – Mohit Kumar May 24 '19 at 16:23

Using css for styling a dynamic menu

2 Answers2