-1
\$\begingroup\$

I develop a CMS-agnostic PHP formatted HTML-CSS "contact now" panel, sticky in the bottom of a website screen.
The code is tested and works as can be seen from the following image.
I ask a review of the code, primarily about the everything-first CSS.

Sidenote: I format the HTML in PHP because PHP supports include which I use a lot to well organize the code, generally without caring about the output if the code works, especially in a simple project.

Screenshot showing menu at bottom of browser window

Files

main_box.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/main_box/mobile_general_structure.css"></link>
    </head>
    <body>
        <div dir="rtl" class="cacb_main_box">
            <?php
                include './phone_box.php';
                include './email_box.php';
            ?>
        </div>
    </body>
</html>

phone_box.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/phone_box/mobile_general_structure.css"></link>
    </head>
    <body>
        <div class="cacb_phone_box">
            <a class="cacb_phone_link" href="tel:NUMBER">
                <img class="cacb_phone_icon" src="./images/whatsapp.svg"></img>
                <span class="cacb_phone_text">WhatsApp call</span>
            </a>
        </div>
    </body>
</html>

email_box.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/email_box/mobile_general_structure.css"></link>
    </head>
    <body>
        <div class="cacb_email_box">
            <a class="cacb_email_link" href="/contact_form.php">
                <img class="cacb_email_icon" src="./images/email.svg"></img>
                <span class="cacb_email_text">Send an email</span>
            </a>
        </div>
    </body>
</html>

css/main_box/general_mobile_structure.css

.cacb_main_box {
    display: flex;
    flex-direction: row; /* column */
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: auto;
    width: 100%;
    height: 60px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    font-size: 120%;
    font-weight: bold;
    color: #fff;
    background: #2a4b8d;
    text-shadow: 0 1px 0px rgb(0 0 0 / 18%);
}

css/phone_box/general_mobile_structure.css

.cacb_phone_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.cacb_phone_link {
    color: white;
    text-decoration: none; /* Fixes continuing line problem */
}

.cacb_phone_icon {
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

.cacb_phone_text {
    vertical-align: middle;
}

css/email_box/general_mobile_structure.css

.cacb_email_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.cacb_email_link {
    color: white;
    text-decoration: none; /* Fixes continuing line problem */
}

.cacb_email_icon {
    color: white;
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

.cacb_email_text {
    vertical-align: middle;
}
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

The CSS looks good to me, although I would reconsider using z-index: auto;. I assume you want your contact-now panel to always appear on top of other content, even if it is not included as the last element? In that case a high valid for z-index is needed. If you always put your contact-now panel last in the <body> tag, and no other elements have a positive z-index, then z-index: auto; is not needed. See: z-index.

I don't quite understand why you need to repeat the CSS for the phone_box and the email_box?. Those are virtually the same. Having one file will be enough and saves some resources.

Your use of PHP's include() doesn't seem to work out as it should. If you were to look at the source code in your browser, you would see this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/main_box/mobile_general_structure.css"></link>
    </head>
    <body>
        <div dir="rtl" class="cacb_main_box">
            <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/phone_box/mobile_general_structure.css"></link>
    </head>
    <body>
        <div class="cacb_phone_box">
            <a class="cacb_phone_link" href="tel:NUMBER">
                <img class="cacb_phone_icon" src="./images/whatsapp.svg"></img>
                <span class="cacb_phone_text">WhatsApp call</span>
            </a>
        </div>
    </body>
</html><!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/email_box/mobile_general_structure.css"></link>
    </head>
    <body>
        <div class="cacb_email_box">
            <a class="cacb_email_link" href="/contact_form.php">
                <img class="cacb_email_icon" src="./images/email.svg"></img>
                <span class="cacb_email_text">Send an email</span>
            </a>
        </div>
    </body>
</html>        </div>
</body>

This HTML is clearly not well-formed. You should not have nested <!DOCTYPE html> and <html> tags. Yes, it works, but only because your browser is fault tolerant.

Once you've opened the <body> you only need to use content tags. For instance, email_box.php could be like this:

<div class="cacb_email_box">
    <a class="cacb_email_link" href="/contact_form.php">
        <img class="cacb_email_icon" src="./images/email.svg"></img>
        <span class="cacb_email_text">Send an email</span>
    </a>
</div>

And then the HTML looks fine.

Improve this answer
\$\endgroup\$
4
  • \$\begingroup\$ I don't understand why you said "You seem to misunderstand how PHP's include() works", I used it to include other HTML files because HTML doesn't have an include internal function of its own, which is perfectly fine if HTML is putted inside a PHP frame. \$\endgroup\$
    – htmlizer
    Sep 18, 2021 at 7:53
  • \$\begingroup\$ I say that only because you end up with malformed HTML with nested <html> tags. HTML itself does have some sort of "include" tag, see: <iframe>, but please don't use it here, this is not the right use case for it. \$\endgroup\$
    – KIKO Software
    Sep 18, 2021 at 7:59
  • \$\begingroup\$ I think you should change the phrasing of what you said about me in regard to include() because a special use doesn't mean someone doesn't understand how something works (or should work for that matter). \$\endgroup\$
    – htmlizer
    Sep 18, 2021 at 8:03
  • \$\begingroup\$ Sorry, no offense was intended, I'll change the wording. \$\endgroup\$
    – KIKO Software
    Sep 18, 2021 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.