Sujet Précédent Sujet Suivant

Mise en page incorrecte

Fermé
Diego987 - Modifié le 24 avril 2020 à 12:16
 Diego987 - 24 avril 2020 à 18:41
Bonjour,
Je suivais un tutoriel pas à pas et lors d'un manip avec "élément" des outils du développeur de google, mon code qui fonctionnait parfaitement bien ne fonction qu' à moitier maintenant. Sauriez-vous ou ce serait glissé une petite erreur?
Voici le code html : 
<!DOCTYPT html>
<html>
    <head>
        <title>Top 5 des Meilleur Actrices</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="script.js"></script>
        <link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1>Top 5 des Meilleur Actrices</h1>
        </header>
        <section id="main-menu">
            <ul>
                <li>
                    <div id="part1" class="images">
                        <div class="bw"></div>
                        <div class="color"></div>
                    </div>
                    <div class="description">
                        <h2>Scarlette<br>Johanson</h2>
                        <h3>Ses meilleurs films</h3>
                        <p>Lucy</p>
                        <p>The Island</p>
                        <p>Lost in Translation</p>
                    </div>
                </li>
                <li>
                    <div id="part2" class="images">
                        <div class="bw"></div>
                        <div class="color"></div>
                    </div>
                    <div class="description">
                        <h2>Natalie<br>Portman</h2>
                        <h3>Ses meilleurs films</h3>
                        <p>Black Swan</p>
                        <p>Star Wars</p>
                        <p>Leon</p>
                    </div>
                </li>
                <li>
                    <div id="part3" class="images">
                        <div class="bw"></div>
                        <div class="color"></div>
                    </div>
                    <div class="description">
                        <h2>Jessica<br>Alba</h2>
                        <h3>Ses meilleurs films</h3>
                        <p>Awake</p>
                        <p>Sin City</p>
                        <p>Fantastic Four</p>
                    </div>
                </li>
                <li>
                    <div id="part4" class="images">
                        <div class="bw"></div>
                        <div class="color"></div>
                    </div>
                    <div class="description">
                        <h2>Rachel<br>McAdams</h2>
                        <h3>Ses meilleurs films</h3>
                        <p>The Notebook</p>
                        <p>The Vow</p>
                        <p>The Time Travaler's Wife</p>
                    </div>
                </li>
                <li>
                    <div id="part5" class="images">
                        <div class="bw"></div>
                        <div class="color"></div>
                    </div>
                    <div class="description">
                        <h2>Marion<br>Cotillard</h2>
                        <h3>Ses meilleurs films</h3>
                        <p>Jeu d'enfant</p>
                        <p>Les Petits Mouchoirs</p>
                        <p>Inception</p>
                    </div>
                </li> 
           </ul>
       </section>
   </body>
</html>


et le code css : 
$
{
    margin: 0;
    padding: 0;
}
ul,ol
{
    list-style: none;
}
body
{
    background: #bfbfbf url("images/im1.jpg") repeat-x;
    font-family: Arial, sans-serif;
}
header
{
    padding: 30px 0;
}
header h1
{
    font-size: 40px;
    text-align: center;
    font-family: 'Limelight', sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #000;
}

/*main menu*/
#main-menu ul
{
    width: 980px;
    height: 500px;
    margin: 0 auto;
    padding-top: 148px;
}
#main-menu ul li
{
    float: left;
    width: 140px;
    height: 500px;
    overflow: hidden;
    position: : relative;
}
.bw
{
    position: absolute;
    left: 0px;
    width: 140px;
    height: 500px;
    cursor: pointer;
    background: url('images/im2.jpg') no-repeat;
    opacity: 0.7;
}
.color
{
    position: absolute;
    left: 140px;
    width: 140px;
    height: 500px;
    cursor: pointer;
    background: url('images/im3.jpg') no-repeat;
}
#part2 div
{
    background-position: -140px 0px;
}
#part3 div
{
    background-position: -280px 0px;
}
#part4 div
{
    background-position: -420px 0px;
}
#part5 div
{
    background-position: -560px 0px;
}
.description
{
    position: absolute;
    left: 140px;
    width: 240px;
    height: 460px;
    padding: 20px;
    background: #fff;
}
.description h2
{
    padding-top: 20px;
    font-size: 30px;
    font-family: 'Limelight', sans-serif;
    text-align: center;
    color: #333;
    text-transform: uppercase;
}
.description h3
{
    margin-top: 30px;
    padding-top: 10px;
    font-size: 26px;
    font-family: 'Lobster', sans-serif;
    background: #d70000;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    border-radius: 5px;
}
.description p
{
    padding-top: 35px;
    font-size: 22px;
    font-family: 'Lobster', sans-serif;
    color: #000;
    text-align: center;
}

Le résultat normal met en jeu les 5 actrices. Je n'ai l'image que l'image de Marion Cotillard qui s'affiche sans comprendre pourquoi alors que j'avais les 5 avant?????
Merci d'avance.


Configuration: Macintosh / Chrome 81.0.4044.113

Message modifié par la modération
Pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE
A voir également:

4 réponses

Réponse 1 / 4
Quimboiseur
Modifié le 24 avril 2020 à 14:36
Salut,
première ligne de votre fichier HTML il y a une faute.
Essayez déjà de corriger cela en écrivant: 
<!DOCTYPE html>

au lieu de DOCTYPT.
Le Doctype d'un document (comme une page web) indique la norme dans laquelle il est écrit et permet donc son décryptage correct.
Bien que pas vraiment obligatoire en théorie il doit être indiqué afin que les navigateurs interprètent correctement vos contenus HTML.

Étant du contenu illustratif les images devraient être dans le HTML(via la balise pour les images correctement remplie) et non dans le CSS qui les indiquent en tant qu'élément décoratif et non comme un contenu potentiel.
Dans le CSS que vous indiquez il y a 3 images qui sont indiquées(si j'ai bien lu votre code où elles sont utilisées en tant qu'images de fond avec la propriétés "background").

Voir le manuel technique de HTML et CSS:
pour le Doctype:
https://www.w3schools.com/tags/tag_doctype.asp
la propriété CSS (raccourci) background:
https://www.w3schools.com/cssref/css3_pr_background.asp
inclure une image en HTML:
https://www.w3schools.com/tags/tag_img.asp

Vérifiez également vos chemins d'accès(URL) si une image ne s'affiche pas et bien sûr que l'élément censé la contenir à bien les dimensions nécessaires si vous utilisez l'image de fond CSS.
1
Réponse 2 / 4
Diego987
24 avril 2020 à 15:02
Merci, mais ça ne suffi pas pour changer le reste.
0
Quimboiseur
Modifié le 24 avril 2020 à 16:15
quoi donc ne suffit pas?
Avez vous corrigé le reste du HTML et CSS? Ajouté les images voulues? vérifiez les URL si elles ne s'affichent pas et vérifié que les éléments containers ont bien un contenu adapté aux dimensions?
Tout est dans les liens il n'y a plus qu'à vous remonter les manches et faire.
A l'avenir il peut être bien de garder une version sauvegardé avant de faire des modifications hasardeuses.
Cela permet d'éviter ce genre de problèmes.
0
Réponse 3 / 4
Diego987
Modifié le 24 avril 2020 à 17:48
Oui c'est ça j'y penserai. Car je viens de refaire tout le tuto et c'est codé exactement pareil et ça ne marche pas. Dommage!
Par ailleurs savez-vous s'il y a un historique des sauvegardes dans bracket? Merci
0
Réponse 4 / 4
Diego987
24 avril 2020 à 18:41
Merci pour votre réponse mais je crois qu'en fait l'erreur viens de ce que le code css/html n'apparait plus ou que partiellement dans elements de (F12) du navigateur google. Tout en sachant que le code est intacte dans bracket, savez vous comment le retrouver dans elements quand quelque chose a été modifier par mégarde?
Merci
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses