Partage

Box-shadow non-visible après <br>

Sujet résolu

31 décembre 2017 à 19:00:46

Bonjour,

Je suis entrain d'écrire mon code HTML quand je me suis aperçu que le box-shadow n'est pas visible parce qu'il y avait des "br" entre les 2 div. Quand j'enlève les "br" ça fonctionne mais moi j'ai besion de sauts de lignes pour bien séparer les div.

Merci pour vos réponses.

Lucky13

31 décembre 2017 à 19:35:59

Hello,

Dernière intervention de la soirée, réveillon oblige

1 - Poste ton code HTML

2 - <br> ne sert pas à cela, juste au retour à ligne dans un paragraphe <p>

3 - Donc la mise en page se fait intégralement via le CSS ! utilise les marges !

4 - Relire le cours HTML que tu suis, car la tu es sur le mauvais chemin, ta page web sera invalide, non responsive, ni fluide, donc à revoir...

Bonne fête.

-
Edité par Lucky13 31 décembre 2017 à 19:38:24

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ProgramedIp

1 janvier 2018 à 10:16:42

Pardon mais tu parles à quelqu'un qui a suivi 3 cours HTML5 et CSS3, qui a de bonnes bases en JavaScript, PHP et SQL, donc ne me prends pas pour un débutant. Mais merci comme-même, je n'ai pas pensé aux marges.

Lamecarlate

1 janvier 2018 à 10:40:34

Bonjour,

> tu parles à quelqu'un qui a suivi 3 cours HTML5 et CSS3, qui a de bonnes bases en JavaScript, PHP et SQL, donc ne me prends pas pour un débutant

cela, on ne pouvait pas le deviner.

Et le point important demandé par Lucky13, c'est ton code (HTML *et* CSS), toujours pas fourni.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ProgramedIp

1 janvier 2018 à 11:15:49

Ok le voila le code HTML (mais il y en a du PHP) :

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Inscrivez-vous | PrograMed-IP.com</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="../css/inscription.css" type="text/css"/>
    </head>
    <body>
        <?php
            include '../includes/header_nav.html';
            include '../includes/formulaire.inscription.html';
            for($i = 0; $i != 7; $i++){
                echo '';
            }
            echo '</form>';
            for($i = 0; $i != 7; $i++){
                echo '<br/>';
            }
        ?>
        <div id="offres">
            <?php
                /*for($i = 0; $i != 5; $i++){
                    echo '<br/>';
                }*/
            ?>
            <h2>Seconde &eacute;tape : choisissez une offre</h2>
            <div id="free_offer">
                <table>
                    <tr>
                        <td style="width: 200px;">
                        </td>
                        <td style="background-color: orange; border: 1px solid #444; border-top-left-radius: 5px; padding: 10px; border-collapse: collapse; width: 250px; text-align: center;">
                            <h3>Offre gratuite</h3>
                        </td>
                        <td style="background-color: orange; border: 1px solid #444; border-top-right-radius: 5px; padding: 10px; border-collapse: collapse; width: 250px; text-align: center;">
                            <h3>Offre premium</h3>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <script type="text/javascript">
            var menu = document.querySelector('section');
            var form = document.querySelector('#formulaire');
            var onScroll = function(){
                if(menu.getBoundingClientRect().top < 0){
                    menu.classList.add('fixed_menu');
                }
                else{
                    menu.classList.remove('fixed-menu');
                }
            }
            window.addEventListener('scroll', onScroll);
        </script>
    </body>
</html>

Le CSS :

body{
    margin: 0;
    padding: 0;
    font-family:"Segoe UI", "Arial";
    background-color: #fff;
}

/****Tête et menu de navigation****/

.fixed_menu{
    position: fixed;
    top: -10px;
}

section{
    box-shadow: 5px 5px 5px #bbb;
    background-color: #fff;
}

nav{
    margin-left: 40px;
}

nav ul{
    margin: 0px;
    padding: 0px;
}

nav li{
    list-style-type:none;
}

nav > ul > li{
    float: right;
    position: relative;
}

nav > ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: inline-block;
    text-decoration: none;
}

nav > ul > li > a{
    color: #333;
    margin-right: 10px;
    margin-left: 10px;
}

nav a:hover{
    color: orangered;
}

.don > a{
    color: #00cc00;
}

.don > a:hover{
    color: #006600;
}

.btn{
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
}

#btn-container{
    margin-left: 30px;
    display: inline-block;
}

.sign-in{
    border-radius: 6px;
    border: 1px solid orange;
    background-color: orange;
    color: #fff;
    text-decoration: none;
    height: 33px;
    width: 100px;
}

.sign-up{
    border-radius: 6px;
    border: 1px solid #bbb;
    background-color: #bbb;
    color: #fff;
    text-decoration: none;
    height: 33px;
    width: 80px;
}

.sign-in, .sign-up:visited{
    text-decoration: none;
}

.sign-in:hover{
    background-color: #fff;
    color: orangered;
}

.sign-up:hover{
    background-color: #fff;
    color : #777;
}

.sign-in, .sign-up:visited{
    text-decoration: none;
}

.sign-in:hover{
    background-color: #fff;
    color: orangered;
    text-decoration: none;
}

.sign-up:hover{
    background-color: #fff;
    color : #777;
    text-decoration: none;
}

/****Formulaire****/

#formulaire{
    background-color: #fbfbfb;
    padding-top: 175px;
    padding-bottom: 175px;
    box-shadow: 4px 4px 4px #bbb inset;
}

#prenom, #pseudo, #email, #passwd, #confirm-passwd{
    padding: 6px;
    width: 600px;
    height: 24px;
    border: 1px solid #4169e1;
    border-radius: 5px;
}

input[type=submit]{
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/****Offres****/

#offres{
    width: 100%;
    background-color: #fff;
}

Les pages inclus :

1.le formulaire :

<div id="formulaire" align="center">
    <h2>Premi&egrave;re &eacute;tape : entrez vos donn&eacute;es</h2>
    <form method="POST" action="offres.php">
        <table>
            <tr>
                <td>
                    <label for="prenom">Entrez votre pr&eacute;nom : </label>
                </td>
                <td>
                    <input type="text" name="prenom" id="prenom" placeholder="Votre pr&eacute;nom" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pseudo">Cr&eacute;ez un pseudo : </label>
                </td>
                <td>
                    <input type="text" name="pseudo" id="pseudo" placeholder="m@ark54" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="email">Entrez votre adresse e-mail : </label>
                </td>
                <td>
                    <input type="email" name="email" id="email" placeholder="xyz@exemple.com" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="passwd">Cr&eacute;ez un mot de passe : </label>
                </td>
                <td>
                    <input type="password" name="passwd" id="passwd" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="confirm-passwd">Confirmez votre mot de passe : </label>
                </td>
                <td>
                    <input type="password" name="confirm-passwd" id="confirm-passwd" required/>
                </td>
            </tr>
        </table>
    </form>
</div>

2.Le "header_nav" :

<section style="width: 100%;">
	<div align="center" style="width: 84%; height: 90px; padding: 15px; display: inline-block;" class="header-nav">
		<header style="display: inline-block;">
			<a href="../home-pages/index.php"><img src="../photos/logo-test.png" style="height: 60px; vertical-align: bottom;"/></a>
		</header>
		<nav style="display: inline-block;">
			<ul style="float: right">
				<li class="don"><a href="../home-pages/faire-un-don.php">Faire un don</a></li>
				<li class="abonnement"><a href="https://www.youtube.com/channel/UCI91nQue74DkSjF_7aqln-A?view_as=subscriber">S'abonner</a></li>
				<li class="contact"><a href="../home-pages/contact.php">Contact</a></li>
				<li class="forum"><a href="../forum/index.php">Forum</a></li>
				<li class="cours"><a href="../cours/index.php">Cours</a></li>
			</ul>
		</nav>
		<div id="btn-container">
		    <a role="button" class="sign-in btn">Se connecter</a>
            <a role="button" class="sign-up btn" href="http://localhost:86/inscription/">S'inscrire</a>
        </div>
	</div>
</section>

EDIT: J'ai un nouveau problème (qui devrait etre posté dans la section JavaScript), quand je descends la page et que je remonte, la marge que j'ai mise pour le formulaire diminue largement. Je veux savoir ou est le problème ?

-
Edité par ProgramedIp 1 janvier 2018 à 11:19:50

Lucky13

1 janvier 2018 à 11:27:37

Hello,

Réveil difficile mais bon je vais tenter d'être clair (ou pas)

Je ne doute ps de tes compétences, mais nous sommes en 2018 et je vois:

- align="center" dans le HTML ???

- Mise en page de ton formulaire à l'aide de tableau ? la aussi ce n'est pas approprié, ce sont pas des données tabulaires. Et de nos jours le CSS offres tous les types d'outils pour faciliter son implémentation

- un appel à une feuille de style externe, mais aussi du CSS inclusif dans le HTML, bref on sépare le html du cs du js, etc... sans contexte particulier.

- Mais il y a du PHP : ce langage génère un document HTML renvoyé au client, donc le code source HTML du navigateur est disponible, à poster...

-
Edité par Lucky13 1 janvier 2018 à 11:29:50

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ProgramedIp

1 janvier 2018 à 12:51:33

Je ne vois pas le problème d'utiliser un tableau pour le formulaire, et pour le "align=center", je l'utilise car toute les façons de centrer un élément en CSS que j'ai trouvée ne marchaient pas avec moi. Et c'est quoi le problème de mettre l'attribut "style", je l'utilise simplement pour ne pas devoir attribuer des classes et des id chaque élément que je crée, surtout quand j'ai plusieurs éléments de même type. C'est seulement pour l'edit rapide.

Merci pour vos réponses.

Le problème que j'ai posté dernièrement a été réglé, mais on revient au problème du début (avec un peut de changements), le script js que j'ai posté servait à fixer le menu lorsque l'on scroll, le problème est que l'ombre n'apparait que lorsque je scroll. Auriez-vous des solutions ?

Si tu veux le code sans PHP, le voilà :

<!DOCTYPE html>
<html>
    <head>
        <title>Inscrivez-vous | PrograMed-IP.com</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="../css/inscription.css" type="text/css"/>
    </head>
    <body>
        <section style="width: 100%;">
	<div align="center" style="width: 84%; height: 90px; padding: 15px; display: inline-block;" class="header-nav">
		<header style="display: inline-block;">
			<a href="../home-pages/index.php"><img src="../photos/logo-test.png" style="height: 60px; vertical-align: bottom;"/></a>
		</header>
		<nav style="display: inline-block;">
			<ul style="float: right">
				<li class="don"><a href="../home-pages/faire-un-don.php">Faire un don</a></li>
				<li class="abonnement"><a href="https://www.youtube.com/channel/UCI91nQue74DkSjF_7aqln-A?view_as=subscriber">S'abonner</a></li>
				<li class="contact"><a href="../home-pages/contact.php">Contact</a></li>
				<li class="forum"><a href="../forum/index.php">Forum</a></li>
				<li class="cours"><a href="../cours/index.php">Cours</a></li>
			</ul>
		</nav>
		<div id="btn-container">
		    <a role="button" class="sign-in btn">Se connecter</a>
            <a role="button" class="sign-up btn" href="http://localhost:86/inscription/">S'inscrire</a>
        </div>
	</div>
</section><div id="formulaire" align="center">
    <h2>Premi&egrave;re &eacute;tape : entrez vos donn&eacute;es</h2>
    <form method="POST" action="offres.php">
        <table>
            <tr>
                <td>
                    <label for="prenom">Entrez votre pr&eacute;nom : </label>
                </td>
                <td>
                    <input type="text" name="prenom" id="prenom" placeholder="Votre pr&eacute;nom" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pseudo">Cr&eacute;ez un pseudo : </label>
                </td>
                <td>
                    <input type="text" name="pseudo" id="pseudo" placeholder="m@ark54" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="email">Entrez votre adresse e-mail : </label>
                </td>
                <td>
                    <input type="email" name="email" id="email" placeholder="xyz@exemple.com" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="passwd">Cr&eacute;ez un mot de passe : </label>
                </td>
                <td>
                    <input type="password" name="passwd" id="passwd" required/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="confirm-passwd">Confirmez votre mot de passe : </label>
                </td>
                <td>
                    <input type="password" name="confirm-passwd" id="confirm-passwd" required/>
                </td>
            </tr>
        </table>
    </form>
</div></form><br/><br/><br/><br/><br/><br/><br/>        <div id="offres">
                        <h2>Seconde &eacute;tape : choisissez une offre</h2>
            <div id="free_offer">
                <table>
                    <tr>
                        <td style="width: 200px;">
                        </td>
                        <td style="background-color: orange; border: 1px solid #444; border-top-left-radius: 5px; padding: 10px; border-collapse: collapse; width: 250px; text-align: center;">
                            <h3>Offre gratuite</h3>
                        </td>
                        <td style="background-color: orange; border: 1px solid #444; border-top-right-radius: 5px; padding: 10px; border-collapse: collapse; width: 250px; text-align: center;">
                            <h3>Offre premium</h3>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <script type="text/javascript" src="../js/fix_menu.js"></script>
    </body>
</html>

J'ai utilisé ici un autre fichier pour le js.

Je crois que vous aurez besoin du fichier js, le voilà:

function fix_menu(){

    var scrollY = function (){
        var supportPageOffset = window.pageXOffset !== undefined;
        var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
        return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
    }
    var element = document.querySelector('section');
    var rect = element.getBoundingClientRect();
    var top = rect.top + scrollY();
    var width = rect.width;
    var fake = document.createElement('div');
    fake.style.width = rect.width + "px";
    fake.style.height = rect.height + "px";
    var onScroll = function(){
        var hasScrollClass = element.classList.contains('fixed_menu');
        if (scrollY() > top && !hasScrollClass) {
            element.classList.add('fixed_menu');
            element.style.width = rect.width + "px";
            element.parentNode.insertBefore(fake, element);
        } else if (scrollY() < top && hasScrollClass) {
            element.classList.remove('fixed_menu');
            element.parentNode.removeChild(fake);
        }
    }
    var onResize = function (){
        element.style.width = "auto";
        element.classList.remove('fixed_menu');
        fake.style.display = "none";
        rect = element.getBoundingClientRect;
        top = rect.top + scrollY ();
        fake.style.width = rect.width + "px";
        fake.style.height = rect.height + "px";
        fake.style.display = "block";
        onScroll();
    }
    window.addEventListener('scroll', onScroll);
    window.addEventListener('resize', onResize);
}
fix_menu();

-
Edité par ProgramedIp 1 janvier 2018 à 12:58:48

Lamecarlate

1 janvier 2018 à 13:52:43

> Je ne vois pas le problème d'utiliser un tableau pour le formulaire,

Ben… dans ce cas, tu as mal lu - ou tu as oublié - ce que disent les (bons) cours de HTML. Un tableau n'est pas fait pour de la mise en page. C'est pour des données à double entrée et c'est marre. Là, c'est comme manger de la soupe avec une louche : ça marche, hein, mais c'est juste pas adapté. Et ce serait plus pertinent avec une cuillère.

> et pour le "align=center", je l'utilise car toute les façons de centrer un élément en CSS que j'ai trouvée ne marchaient pas avec moi.

Alors tu as mal cherché, désolée d'être aussi crue. Il y a des tas de méthodes. Et pour info, cet attribut est déprécié depuis 1999 (c'est pas une blague), et à vrai dire je ne comprends même pas que les navigateurs continuent de l'implémenter.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ProgramedIp

2 janvier 2018 à 10:12:48

Lamecarlate a écrit:

Alors tu as mal cherché, désolée d'être aussi crue. Il y a des tas de méthodes. Et pour info, cet attribut est déprécié depuis 1999 (c'est pas une blague), et à vrai dire je ne comprends même pas que les navigateurs continuent de l'implémenter.

Eh bien, si tu me dis que j'ai mal cherché, alors donne moi une méthode pour le faire. Et puisque les navigateurs continuent à l'intégrer et que beaucoup de gens l'utilisent, ça signifie qu'il est encore utilisable.

Lamecarlate a écrit:

Ben… dans ce cas, tu as mal lu - ou tu as oublié - ce que disent les (bons) cours de HTML. Un tableau n'est pas fait pour de la mise en page. C'est pour des données à double entrée et c'est marre. Là, c'est comme manger de la soupe avec une louche : ça marche, hein, mais c'est juste pas adapté. Et ce serait plus pertinent avec une cuillère.

Moi j'utilise cette méthode car c'est la plus facile et elle est utilisée beaucoup d'après ce que je sais. Je te renvoie sur ce lien.

Lamecarlate

2 janvier 2018 à 11:19:44

Eh bien, si tu me dis que j'ai mal cherché, alors donne moi une méthode pour le faire. Et puisque les navigateurs continuent à l'intégrer et que beaucoup de gens l'utilisent, ça signifie qu'il est encore utilisable.

https://duckduckgo.com/?q=centrer+en+css&t=canonical&ia=web

Et je pense que je sais pourquoi les navigateurs continuent à l'intégrer : pour éviter de casser des sites qui ont 20-25 ans. Ce n'est pas une raison pour le faire sur des sites récents.

Moi j'utilise cette méthode car c'est la plus facile et elle est utilisée beaucoup d'après ce que je sais. Je te renvoie sur ce lien.

Je n'ai pas 35 minutes pour regarder une vidéo, désolée. Et encore une fois : ce n'est pas parce que c'est "facile" ou "fonctionnel" que c'est la bonne méthode. Merci de ne pas contribuer à un web non accessible, non sémantique, merci de ne pas rester bloqué en 1995.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Lucky13

2 janvier 2018 à 11:31:51

Hello,

C'est comme partout, il y bonnes et moyennes vidéos sur youtube, il faut filtrer. J'ai regardé, il ne s'embête pas sur le HTML pour se concentrer sur la partie plus difficile , le JS.

Passe ton code au validateur w3c en ligne -> https://validator.w3.org/

Tout comme <center> -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Pour la mise en place via le tableau, il faut choisir des exemples récents. Maintennat tu peux passer par inline-block, dislay: table ou flexbox. Pour moi ta méthode est un vrai casse tête, et se sera bien pire par la suite de ton projet...

Mais bon libre à toi de décider...

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

ProgramedIp

2 janvier 2018 à 19:08:47

OK, passons à autre chose. J'ai un problème avec les input de type "radio", quand j'essaye de les désélectionner, ça ne marche pas, et je peux aussi les sélectionner en même temps.

Voici les code des inputs (j'utilise un tableau parce que c'est vraiment un tableau, il y a des données) :

<td>
    <label for="free">Choisir cette offre</label>
    <input type="radio" name="free" id="free"/>
</td>
<td>
    <label for="premium">Choisir cette offre</label>
    <input type="radio" name="premium" id="premium"/>
</td>

Lamecarlate

2 janvier 2018 à 19:11:08

Les radios d'un même groupe doivent avoir l'attribut "name" de même valeur. Ici ça pourrait être "offre".

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ProgramedIp

3 janvier 2018 à 10:17:29

Merci pour ta réponse.