Partage
  • Partager sur Facebook
  • Partager sur Twitter

TP probléme d'affichage de mon css

    5 juin 2018 à 16:30:15

    VOICI MON PROBLÈME!!!

    je suis en train de faire le tp pour m’entraîner. (c'est ma premiére page web que je fait) jusque la tout ce passé bien jus qu’a que je regarde la compatibilité avec différents navigateurs. Tous s'affiche correctement sur chrome,opéra,firefox,internet explorer et edge mais pas sur safari.

    de ce fait je me suis renseigner à propos des webkit, je les ais mis dans mon css mais rien affaire ça ne veut pas correctement s'afficher.

    SI QUELQU'UN AURAIT L'AMABILITER DE M'AIDER CE SERAIT AVEC PLAISIR!   

    je vous laisse ce que j'ai effectuer pour me donner un renseignement 

    @font-face

    {

        font-family: 'BallparkWeiner';

        src: url('polices/ballpark.eot');

        src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),

             url('polices/ballpark.woff') format('woff'),

             url('polices/ballpark.ttf') format('truetype'),

             url('polices/ballpark.svg#BallparkWeiner') format('svg');

        font-weight: normal;

        font-style: normal;

    }


    @font-face

    {

        font-family: 'Dayrom';

        src: url('polices/dayrom.eot');

        src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),

             url('polices/dayrom.woff') format('woff'),

             url('polices/dayrom.ttf') format('truetype'),

             url('polices/dayrom.svg#Dayrom') format('svg');

        font-weight: normal;

        font-style: normal;

    }


    body

    {

        background:url("images/fond_jaune.png");

        font-family:Trebuchet MS,Arial, sans-serif;   

    }

    header h1,section h1,footer h1,nav a

    {

        text-transform:uppercase;


    }

    #page

    {

        width:80%;

        margin:auto;

    }


    header

    {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-orient:horizontal;

        -webkit-box-direction:normal;

            -ms-flex-direction:row;

                flex-direction:row;

        -webkit-box-pack:justify;

            -ms-flex-pack:justify;

                justify-content:space-between;

        -webkit-box-align:end;

            -ms-flex-align:end;

                align-items:flex-end;

        background:url(images/separateur.png)repeat-x bottom;

    }

    header h1

    {

        font-family:BallparkWeiner,Arial,sans-serif;

        font-weight:bold;

        font-size:1,5em;

        margin-bottom:0;

    }

    header h2

    {

        font-family:Dayrom,Arial,sans-serif;

        font-weight:normal;

        margin-top:0;

    }


    header img

    {

        width:70px;

        height:70px;

    }

    #tete

    {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -webkit-box-orient:vertical;

      -webkit-box-direction:normal;

          -ms-flex-direction:column;

              flex-direction:column;

      -webkit-box-pack:justify;

          -ms-flex-pack:justify;

              justify-content:space-between;

      -webkit-box-align:baseline;

          -ms-flex-align:baseline;

              align-items:baseline; 

    }


    nav ul

    {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -webkit-box-orient:horizontal;

      -webkit-box-direction:normal;

          -ms-flex-direction:row;

              flex-direction:row;


    }

    nav li

    {

        list-style-type:none;

        margin-left:30px;

        font-size:1.5em;


    }

    nav a

    {

        text-decoration:none;

        color:black;

        text-shadow:2px 2px 10px black; 

    }

    nav a:hover

    {

        text-decoration:underline;

        color:red;

    }



    ainsi que mon code html

    <!DOCTYPE html>

    <html>

        <head>

           <meta charset="utf-8"/>

           <link rel="stylesheet"href="tpbis.css"/>

           <title>projet 2</title>

        </head>

        <body>

        <div id=page> 


            <header>

            <div id=tete>

                <h1>

                <img src="images/zozor_logo.png"alt="logo de zozor"/>

                zozor

                </h1>

                <h2>

                carnets de voyage

                </h2>

                    </div>

                <nav>

                <ul>

                <li><a href="#">accueil</a></li>

                <li><a href="#">blog</a></li>

                <li><a href="#">cv</a></li>

                <li><a href="#">contact</a></li>

                        </ul>

                </nav>


            </header>




            <div>

            <p>retour sur mes vacances au étas-unis...</p>

            <p><img src="images/fleche.png"alt="logo d'une fleche"/></p>

            </div>




            <section>


            <article>

                 <h1>

                 <img src="images/ico_epingle.png"alt="image d'une épingle"/>

                 je suis un grand voyageur

                 </h1>

                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>


                 <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>


                 <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>


            </article>


            <aside>

               <img src="images/bulle.png"alt="logo d'une bulle"/>


               <h1>

                  à propos de l'auteur

                  <img src="images/zozor_classe.png"alt="image de zozor avec des lunettes"/>

               </h1>   


               <p>Laisse-moi le temps de me présenter&nbsp;: je m'appelle Zozor, je suis né un 23 novembre 2005.</p>


               <p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>


               <p><img src="images/facebook.png"alt="logo de facebook"/>

                 <img src="images/twitter.png"alt="logo de twitter"/>

                 <img src="images/vimeo.png"alt="logo de vimeo"/>

                 <img src="images/flickr.png"alt="logo de flickr"/>

                 <img src="images/rss.png"alt="logo de rss"/>

               </p>      

            </aside>


            </section>




                <footer>

                <img src="images/ico_top.png"alt="logo d'un icone"/>


                <div>

                <h1>

                mon dernier tweet

                </h1>

                <p>hiii haaaaaaan!</p>


                <p>le 12 mai à 23h12</p>

                </div>


                <div>

                <h1>

                mes photos

                </h1>

                <p><img src="images/photo1.jpg"alt="image de la photo 1"/>

                    <img src="images/photo2.jpg"alt="image de la photo 2"/>

                    <img src="images/photo3.jpg"alt="image de la photo 3"/>

                    <img src="images/photo4.jpg"alt="image de la photo 4"/>

                </p>   

                </div>


                <div>

                <h1>

                mes amis

                </h1>

                <ul><li><a href="#">Pupi le lapin</a></li>

                                <li><a href="#">Mr Baobab</a></li>

                                <li><a href="#">Kaiwaii</a></li>

                                <li><a href="#">Perceval.eu</a></li>

                         </ul>

                         <ul>

                                <li><a href="#">Belette</a></li>

                                <li><a href="#">Le concombre masqué</a></li>

                                <li><a href="#">Ptit prince</a></li>

                                <li><a href="#">Mr Fan</a></li>

                         </ul>       


                </div>


                </footer>




        </div>

        </body>

    </html>    

    • Partager sur Facebook
    • Partager sur Twitter
      5 juin 2018 à 16:35:49

      Bonjour,

      Merci d'utiliser la mise en forme de code Image

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Image de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

      • Partager sur Facebook
      • Partager sur Twitter

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

        5 juin 2018 à 16:41:22 - Message modéré pour le motif suivant : Le flood est strictement interdit


        TP probléme d'affichage de mon css

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown