[PROBLEME] Problème de création d'éléments CSS

14 mai 2018 à 7:18:18

Bonjour à tous, je suis en train de créer des esquisses de pages web simples où je dois faire apparaître des boîtes de couleur, je vous donne mon code et le rendu que je suis sensé avoir, il n'est pas complet, j'ai fait apparaitre en théorie que la première boite de couleur (les dimensions et le placements ne sont pas encore les bons) mais elle n'apparaît pas...

Je vous remercie pour votre aide

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<title>JDR - Room : Ressources</title>
		<link rel="stylesheet" href="4_page_aide_et_liens_externes.css" />
    </head>

    <body>
		<div class="Boite_principale">
		
			<section>
			
				<article class="1e_lien"></article>
				<aside class="image_1e_lien"></aside>
				
				<article class="2e_lien"></article>
				<aside class="image_2e_lien"></aside>
				
				<article class="3e_lien"></article>
				<aside class="image_3e_lien"></aside>
				
				<article class="4e_lien"></article>
				<aside class="image_4e_lien"></aside>
				
			</section>
			
		</div>
    </body>
</html>

/* Fiche de style */
body
{
    display: flex;
    background: url(Images/feuille-de-papier-froissee.jpg);
}

.Boite_principale
{
    background-image: url('Images/livre_2.png');
    margin: auto;
    background-repeat: no-repeat;
    height: 550px;
    width: 791px;
}

.1e_lien
{
    background-color: Aqua;
    height: 500px;
    width: 320px;
    margin: 50px 0px 0px 20px;
}

.image_1e_lien
{
    background-color: Black;
}

.2e_lien
{
    background-color: Blue;
}

.image_2e_lien
{
    background-color: Fuchsia;
}

.3e_lien
{
    background-color: Gray;
}

.image_3e_lien
{
    background-color: Green;
}

.4e_lien
{
    background-color: Lime;
}

.image_4e_lien

{
    background-color: Maroon;
}

Zoki_Marciano

14 mai 2018 à 7:21:12

Quand tu survoles une case de droite une image doit apparaître dans la case voisine de gauche? Dans ce cas tu fais ça avec un hover ou eventuellement avec du JS.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

NathanPinto

14 mai 2018 à 7:29:44

Non tout doit apparaitre tel quel, toutes les boites sur la page, pour l'instant la seule sensée apparaitre est celle en haut à droite, mais il n'y a rien, seulement mais images :/

Zoki_Marciano

14 mai 2018 à 7:44:54

Tout doit s'afficher tu veux dire?

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

NathanPinto

14 mai 2018 à 7:50:46

Oui c'est ça, j'ai coder le reste des éléments pour avoir au moins les dimensions et les positions, j'ai seulement la partie de droite qui s'affiche, ça donne ceci :

Pour ce code la :

/* Fiche de style */
body
{
    display: flex;
    background: url(Images/feuille-de-papier-froissee.jpg);
}

.Boite_principale
{
    background-image: url('Images/livre_2.png');
    margin: auto;
    background-repeat: no-repeat;
    height: 550px;
    width: 791px;
}

.1e_lien
{
    background-color: Aqua;
    height: 40px;
    width: 110px;
    margin: 120px 0px 0px 150px;
}

.image_1e_lien
{
    background-color: Black;
	height: 50px;
    width: 95px;
    margin: 125px 0px 0px 550px;
}

.2e_lien
{
    background-color: Blue;
	height: 40px;
    width: 110px;
    margin: 35px 0px 0px 150px;
}

.image_2e_lien
{
    background-color: Fuchsia;
	height: 50px;
    width: 95px;
    margin: 35px 0px 0px 550px;
}

.3e_lien
{
    background-color: Gray;
	height: 40px;
    width: 110px;
    margin: 35px 0px 0px 150px;
}

.image_3e_lien
{
    background-color: Green;
	height: 50px;
    width: 95px;
    margin: 35px 0px 0px 550px;
}

.4e_lien
{
    background-color: Lime;
	height: 40px;
    width: 110px;
    margin: 35px 0px 0px 150px;
}

.image_4e_lien

{
    background-color: Maroon;
	height: 50px;
    width: 95px;
    margin: 35px 0px 0px 550px;
}

-
Edité par NathanPinto 14 mai 2018 à 8:03:55

philiga

14 mai 2018 à 10:16:02

Bonjour,
Lignes 17, 33, 49 & 65, ta syntaxe des class est interdite : tu ne peux pas commencer par un chiffre.
Change .1e_lien par .lien1 par exemple.

-
Edité par philiga 14 mai 2018 à 10:16:48

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Zoki_Marciano

14 mai 2018 à 12:28:00

pas d espace dans le nommage soit en camelCase ou kebab-case ou ma_class.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

NathanPinto

16 mai 2018 à 8:55:54

Super merci beaucoup mon problème est résolu, je ne connais pas encore toutes les règles de syntaxe c'est très intéressant j'en prends note.