CSS does not access the button inside the if

Asked

Viewed 43 times

1

The CSS is working with the button inside the else but it does not work with the button located inside the if. The button inside the if refers to the page with the logged in user and the else with the user loaned that is normally loading the guidelines made in the file . css, I would just like to know why it appears that he " does not read the button within the if "

?php
    session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="main-wrapper">

                <ul>
                    <li>

                        <a href="index.php">Home</a>
                    </li>
                </ul>
                <div class="nav-login">
                    <?php
                        if (isset($_SESSION['u_id'])) {
                            echo '<form action="includes/logout.inc.php" method="POST">
                        <button type="submit" name="submit">Deslogar</button>
                    </form>';
                        }else{
                            echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
                    <form action="includes/login.inc.php" method="POST">
                        <input type="text" name="uid" placeholder="Apelido/e-mail">
                        <input type="password" name="pwd" placeholder="Senha">
                        <button type="submit" name="submit">Entre</button>

                    </form>
                    <a href="singup.php">Cadastre-se</a>';
                        }
                    ?>



                </div>
            </div>
        </nav>
    </header>

Input and button CSS

header .nav-login form input {
    float: left;
    width: 30%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 2%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
    cursor:default;

}
    header .nav-login form input:hover {
    float: left;
    width: 30%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 2%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
    cursor:default;
 }

header .nav-login form button {
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #696969;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
    cursor:pointer;

}

header .nav-login form button:hover {
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
    cursor:pointer;
}

created class only for button and permenece problem, follow the images inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

  • Put the snippet of the css being used.

  • I only posted the button and input snippets I use

  • Oggi take a look at the comment I made in my answer, now that I see that you edited the question

1 answer

0


Guy running the . PHP on the local server worked normal. But only with CSS also to solve, just create a class pro button and not use that way header .nav-login form button

I know it’s not the exact answer because he won’t take the class, I noticed that if you remove the <? CSS already works, but PHP does not. But sometimes this tip already solves your problem if you can create and put a class in <button>

Look how you stayed here running local: inserir a descrição da imagem aqui

Example of my suggestion. (I left some comments on CSS)

OBS: I didn’t touch anything just put the class right on the button and didn’t use the "full path" .nav-login form button now the class .btn-login goes right into the button

.btn-login { /* aqui era: "header .nav-login form button" */
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #696969;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
    cursor:pointer;

}
.btn-login:hover { /* aqui era: "header .nav-login form button:hover" */
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
    cursor:pointer;
}
<form action="includes/logout.inc.php" method="POST">
    <button class="btn-login" type="submit" name="submit">Deslogar</button>
</form>

  • Face really the code that Voce edited works on the outside so I imagine there’s some kind of lock in css, will I have to create a css part?

  • As you saw in my reply CSS the Part solves! However it does not explain why it only picks up inside the else. I took a test and deleted it <?php he takes the CSS...

  • I just saw you edit it. If you created a new class and put it right on the button and it didn’t work is because some other CSS is taking priority in your Class. Between trade class for ID or put the style straight into the type tag style=" " to see if it catches.

  • Problem solved, it was really this priority, I switched the class by ID and went, See how I change to answered? I’m new in the stack. Thank you Ugo helped a lot

  • Just at the top of my answer on two little arrows to the left and below them one " " just click on this icon that the question is marked as accepted. This is good to keep the site organized :) how good it helped!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.