Problème format de page

isabelleavanzini Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -  
isabelleavanzini Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
J'ai créé un site, sur mon ordinateur la taille est parfaite mais sur d'autres c'est complètement désordonné ou tout simplement décalé.
J'ai utilisé beaucoup de " position: absolute;
left: 718px;
top: 470px; "
Et j'ai bien suivi (je crois) le cours "Comment faire une page ayant la même hauteur que le navigateur ?" du site du zero à cette adresse "http://www.siteduzero.com/tutoriel-3-145147-comment-faire-une-page-ayant-la-meme-hauteur-que-le-navigateur.html".

Mais je ne vois toujours pas quelle est le problème.
Merci d'avance.

2 réponses

  1.
    Lord Zero Messages postés 487 Statut Membre 115
     
    place ton code ici ainsi que le css
    Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
    0
  2. isabelleavanzini Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
     
    CODE HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="google-site-verification" content="Ra3QXFis5KYutj_iZgLfWz6qM5P4U3o_zcLrwN0VYMI" />
    <title>IsabelleAvanzini</title>
    <link href="WEBSITE.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <script type="text/javascript" src="menu.js"></script>

    <div id="en_tete">
    <img src="../Images/BANNIERE.png" href="WEBSITE.html"/><!-- Ici on mettra la bannière -->
    </div>

    <div id="menufr">
    <ul id="menu">
    <li class="bouton_gauche"><a href="index.html">Accueil</a></li>
    <li class="bouton_gauche"><a href="BIO.html"> Biographie </a> </li>
    <li class="bouton_gauche"><a href="">Médiathèque</a>
    <ul>
    <li><a href="IMA.html">Images</a></li>
    <li><a href="VID.html">Vidéos</a></li>
    </ul>
    </li>
    <li class="bouton_droite"><a href="GAL.html">Galerie Achat</a>
    </li>
    <li class="bouton_droite"><a href="CONT.html">Contactez-moi</a></li>

    </ul>
    <!-- Ici on mettra le menu -->
    </div>

    <div id="corps">
    <iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisabelleavanzini.com&lt%3B%3Fphp echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe> <iframe id= "co" allowtransparency = "true" frameborder = "0" scrolling = "no"
    src = "http://platform.twitter.com/widgets/tweet_button.html"
    le style = "width: 130px; height: 50px;" > </iframe>

    <h1>Actualité</h1> <script id="script" class="script"language="JavaScript" type="text/javascript">
    <!--
    //chemin vers les images
    src = ["../Images/VOYr.jpg", "../Images/LUMV.jpg", "../Images/SYM.jpg", "../Images/AFRI.jpg"]

    //temp de chaque image
    duration = 3;

    //ne rien toucher en dessous
    ads=[]; ct=0;
    function switchAd() {
    var n=(ct+1)%src.length;
    if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
    document["Ajout_Image"].src = ads[ct=n].src;
    }
    ads[n=(ct+1)%src.length] = new Image;
    ads[n].src = src[n];
    setTimeout("switchAd()",duration*1000);
    }
    function liens(){
    location.href = url[ct];
    } onload = function(){
    if (document.images)
    switchAd();
    }
    //-->
    </script>

    <div id="script" alt="script" align="">
    <a onmouseover="status=url[ct];return true;" onmouseout="status=''">
    <img class="Ajout_Image" name="Ajout_Image" src="../Images/VOYr.jpg" border="0" id="Ajout_Image"></a>
    </div>
    <ul id="CAKY">
    <p>- 12 Juin 2011 - fest. des arts au jardin Faramine - expo et <br/>lecture poétique en cie de Saadi Younis Bahri (français et arabe) sur <br/>le thème "JARDINS" <br/>("au coeur du jardin d'IsA") - Entrée gratuite au sein du jardin mais<br/> "au chapeau" pour les artistes en animation<br/>

    Regardez la vidéo sur Daylimotion <a href="https://www.dailymotion.com/video/xi17we">ICI</a>. <br/>
    - Tournée lectures poétiques et musicales en région centre.<br/>
    - AMBOISE du 2 au 17/06/2012 Salon d'Art "les écritures d'IsA".<br/>
    - Proposition : Stage d'été inscriptions 0238440260 - <br/>Stage pour tous les âges au <br/>jardin ou bords de Loire afin d'échanger et partager entre générations en <br/>juillet ou août 2011. (travail sur la couleur et la matière)<br/>
    </ul>
    <ul id="CAK">
    - Ateliers d'IsA en centres de loisirs (St Ay et Meung sur Loire) <br/>préparation Festival des Arts au Jardin 2012 avec les enfants <br/>inscrits aux ateliers.<br/>
    - Projet : Salon méditerranéen de la poésie Montpellier 2012 en <br/>cie de Salih calligraphe<br/>
    - Réalisation d'un livre poétique d'artistes traduit <br/>en arabe par Saadi Younis Bahri et calligraphié par Salih.
    </ul>
    </div>

    <div id="pied_de_page">
    Copyright © 2011-2012 Isabelle Avanzini . Tous droits réservés | Une création Grégory Avanzini
    </div>

    </body>

    </html>

    CODE CSS:
    body{
    margin: 0px;
    padding: 0px;
    outline: 0px;
    background-image: url("../Images/ARRIERE2.png");
    }

    #en_tete, menufr, corps, pied_de_page{
    background-color : rgb(178, 26, 99);
    height: 100%;
    width: 100%;
    }
    menufr{
    background-color : #f5f5f5;
    }
    #menu, #menu ul /* Liste */
    {
    padding : 0; /* pas de marge intérieure */
    margin : 0; /* ni extérieure */
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 21px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */
    }

    #menu /* Ensemble du menu */
    {
    font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
    position: absolute;
    left: 4px;
    top: 165px;
    border : 3px solid black;
    }

    #menu a /* Contenu des listes */
    {
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */
    background : #f5f5f5; /* couleur de fond */
    color : black; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 144px; /* largeur */
    }

    #menu li /* Elements des listes */
    {
    float : left;
    /* pour IE qui ne reconnaît pas "transparent" */
    border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
    }

    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li
    {
    border-right: 1px solid black ; /* on met une bordure transparente à droite de chaque élément */
    }

    #menu li ul /* Sous-listes */
    {
    position: absolute; /* Position absolue */
    width: 144px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
    background-color : #f5f5f5;
    }

    #menu li ul li /* Éléments de sous-listes */
    {
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    background-color : #f5f5f5; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
    }

    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li ul li
    {
    border : 1px solid black;
    border-top : 1px solid black;

    }

    #menu li ul ul
    {
    margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-left: 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */

    }

    /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
    html>body #menu li ul ul
    {
    border-left : 1px solid black ; /* on met une bordure transparente sur la gauche de chaque élément */
    }

    iframe
    {
    float : right;
    position: absolute;
    left: 718px;
    top: 470px;
    }

    p{
    text-align : left;
    padding : 20px;
    font-size : large;
    font :"Trebuchet MS", "Arial Black", Arial, Verdana, serif;
    }
    h1{
    text-align : left;
    padding : 10px;
    position: absolute;
    left: 100px;
    top: 190px;
    }

    h7{
    padding : 5px;
    text-decoration: underline;
    }

    #pied_de_page{
    color : black;
    text-align : center;
    background-color : rgb(182, 40, 99);
    position: absolute;
    left: 370px;
    top: 650px;
    }
    a:visited
    {
    color : black;
    }
    a{
    color : black;
    }

    a:hover
    {
    color: rgb(232, 162, 43)
    }
    ul#menu a:hover{
    color : rgb(232, 162, 43)
    }

    iframe#co{
    float : right;
    position: absolute;
    left: 610px;
    top: 470px;
    }

    .Ajout_Image{
    position: absolute;
    left: 1164px;
    top: 212px;
    }
    ul#CAK{
    font-size : large;
    position: absolute;
    left: 570px;
    top: 287px;
    }
    ul#CAKY{
    font-size : large;
    position: absolute;
    left: 0px;
    top: 250px;
    }
    #menu li:hover ul, #nav li.sfhover ul {
    left: auto;
    }
    0

Discussions similaires

Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses