IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Besoin d'aide sur extensibilité d'un design


Sujet :

CSS

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut extensibilité d'un design
    Bonjour tout le monde !
    J'ai un petit problème de compréhension concernant l'extension d'un kit extensible.
    Voilà, sur la page html, j'ai le corps du de la page, qui comprends le haut du corps, le corps central sur lequel il y aura du texte et des images et enfin la partie basse du corps.
    Comme ceci :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="corps">
     
             <div class="corps-haut">
            </div>    
     
            <div class="corps-central">
                    </div>
     
                     <div class="corps-bas"> 
            </div>  
    </div>
    Donc moi tous ce qu'il y a d'écrit et des images se trouvent dans le
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div class="corps-central">
                    </div>
    Son code css est :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    #corps
    {
       float: left;
    }
     
    .corps-haut
    {
       width: 958px;
       height: 30px;
       margin-left: 22px; 
       margin-top: 0px;
       background-image: url("images/corps/corps-haut1.jpg");
       background-repeat: no-repeat;
       margin-bottom: 0px;
      }  
     
     
      .corps-central
    {
       width: 958px;
       /* ici je ne mets pas de height pour que l'image du corps-central1 se répète verticalement automatiquement avec le repeat-y */
       margin-left: 22px; 
       margin-top:0px;
       background-image: url("images/corps/corps-central1.jpg");
       background-repeat: repeat-y;
       margin-bottom: 0px;
      }  
     
      .corps-bas
    {
       width: 958px;
       height: 24px;
       margin-left: 22px; /
       padding-top: 0px;
       background-image: url("images/corps/corps-bas1.jpg");
       background-repeat: no-repeat;
       margin-bottom: 0px;
      }
    Mais l'image du corps-central1.jpg ne s'étend pas automatiquement verticalement.
    Je ne mets pas de height pour que l'image du corps-central1 se répète verticalement automatiquement avec le repeat-y, mais il ne se répète pas.
    J'ai mis 4 boites contenant du texte et images dans le corps, mais on dirai qu'il s'affiche sur le corps mais pas dans le corps. C'est pour celà que je vois que le corps ne s'étend pas.
    Je vous laisse regarder ce que çà donne sur mon site.
    Ici pour voir sur mon site
    Etes-vous êtes d'accord avec mon code html et CSS, pour qu'il soit dans le corps et non s'aficher sur le corps.
    Pour voir mon fichier CSS : Ici le fichier CSS en entier
    Pouvez vous me corriger et m'aider à corriger ce soucis.
    Merci à vous.

  2. #2
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Bonjour,
    ajoutes un overflow:hidden (ou un overflow:auto) à ton corps-central.
    Explication ici.

    PS: je te conseil de trouver un hébergement qui n'impose pas le bandeau pub Ifrance en haut de page, ça fait pas très propre et ça fera fuir un certain nombre de visiteurs

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Merci Erwan31 !
    1/ çà marche nickel !!!
    j'ai rajouté le overflow : auto;
    ce qui donne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
      .corps-central
    {
       overflow: auto;
       width: 958px;
       margin-left: 22px; 
       margin-top:0px;
       background-image: url("images/corps/corps-central1.jpg");
       background-repeat: repeat-y;
       margin-bottom: 0px;
      }
    2/ Oui, en fait tu as raison, pour l'hébergeur, le truc, c'est que j'e me suis inscrit sur iFRANCE juste pour faire un test. Pour faire des essai, le temps de m'inscrire chez FREE pour l'hébergeur.

    MERCI bien !

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Bonjour à tous !
    Ce problème d'extension résolu, j'ai cependant un soucis avec une boite à texte ou photos.
    Le problème ne se pose pas avec FIREFOX. Mais avec INTERNET Explorer, il y a un gros décalage.
    Dans mon site j'ai trois boites qui sont alignés horizontalement.
    Une boite est composé de trois parties. Une partie bordure haute de la boite, une partie centrale et une partie bordure basse de la boite.
    J'ai un soucis avec la bordure haute et basse uniquement de la première boite qui se décale vers la droite et qui du coup décale les autres boites qui se trouvent à coté.
    Je vous laisse le lien de mon site pour voir ce que çà fait sous les deux navigateurs : ICI pour voir sous IEXPLORER
    Je vous laisse également le code HTML de cette boite :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div class="corps-central"> 
    				<div id="boite1">
    					<div class="boite1_haut"> 
    					</div> 
    					<div class="boite1_centre"> 
    						<img src="images/corps/images-box-photo/om-stade-velodrome10.jpg" class="stade-velodrome" alt="stade-velodrome" title="stade-velodrome"/>
    						<p class="paragraphe1"> 
    						La victoire face à Lorient a regonflé le moral des Olympiens. Cette semaine, ils se préparent pour affronter,
    						dimanche, l’Olympique Lyonnais. Un match de prestige en pleine course-poursuite pour la troisième
    						place du championnat.<br>
    						Eric Gerets a confirmé mercredi le forfait de Mathieu Valbuena pour la réception dimanche de Lyon au Vélodrome.
    						</p>
    					</div> 
    					<div class="boite1_bas"> 
    					</div> 
    				</div>
    </div>

    Voici le code CSS de la boite qui contient l'image et du texte :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    #boite1
    {
       float: left;
    }
     
      .boite1_haut
      {
       width: 350px;
       height: 44px;
       margin-left: 23px; 
       margin-top: 0px;
       background-image: url("images/corps/box-photo-blanc-haut.jpg");
       background-repeat: no-repeat;
     }  
     
      .boite1_centre
      {
       width: 350px;
       margin-left: 23px; 
       margin-top: 0px;
       background-image: url("images/corps/box-photo-blanc-centre.jpg");
       background-repeat: repeat-y;
     }  
     
      .boite1_bas
        {
       width: 350px;
       height: 44px;
       margin-left: 23px;
       margin-top: 0px;
       background-image: url("images/corps/box-photo-blanc-bas.jpg");
       background-repeat: no-repeat;
     }  
     
    .stade-velodrome
    {
       float: left;
       margin-top: 0px;
       margin-left: 16px;
       width: 317px;
       height: 255px;
       border: 3px solid #8e0101;
       }
     
     
      .paragraphe1
    {
       text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
       font-size: 0.7em ;
       text-align: justify; /* Texte justifié pour mieux voir la largeur du block */ 
       padding-left: 18px;
       padding-top: 265px;
       padding-right: 18px;
     
     }
    Merci de me diriger afin de corriger ce décalage qui se fait uniquement sous IEXPLORER.
    on m'a auparavant parlé de changer d'hébergeur mais est ce que c'est vraiment çà, car comme je le disais, sous FIREFOX y pas de soucis.
    Merci

  5. #5
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par °°° Zen-Spirit °°° Voir le message
    on m'a auparavant parlé de changer d'hébergeur mais est ce que c'est vraiment çà, car comme je le disais, sous FIREFOX y pas de soucis.
    Oui, ton hébergeur représente un réel souci pour internet explorer à cause du scripte qu'il insère automatiquement sur ta page avant le doctype. Lorsque le doctype n'est pas la première chose déclarée sur IE, il ne passe pas en mode standard et est en mode quirks.

    Cela a pour conséquences qu'il applique le modèle de boîte microsoft (padding et border compris dans le width) au lieu du standard mais aussi qu'il interprète mal les css (le centrage à l'aide du margin auto ne fonctionne pas, par exemple).

    Si tu veux qu'IE interprète au mieux tes css il doit être en mode standard (enfin, presque ) et tu dois donc changer d'hébergeur.

    Après il n'est pas impossible qu'il reste quelques différences à gérer, même si IE est en mode presque standard; ce que tu peux observer lorsque tu regardes ta page en local (donc sans le script avant le doctype).
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Salut Candygirl !
    Merci d'avoir répondu et de m'avoir exposer le soucis de l'hébergeur.
    j'ai bien pris note.
    C'était un hébergeur provisoire pour faire des tests en attendant d'avoir un autre hébergeur sans PUB.
    Je constate que ce n'est pas le bon hébergeur pour faire des test.
    En tout cas merci pour les explications qui sont très précises.

    Sinon, mis à part ce soucis là, j'ai un autre soucis, voilà, je viens de créer un lien sur une image qui au clic sur cette image va ouvrir un autre site, mais le soucis, c'est que depuis que j'ai mis le lien sur cette image, il m'affiche un cadre bleu et un cadre mauve autour de l'image.
    Je voudrai enlever ce cadre, mais je ne sais pas comment faire.
    ++

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Je viens vous dire de laisser tomber. J'ai fais une erreur de frappe.
    En fait j'avais déja fait le "border: none;" avant de poster mais, çà n'avait rien changer tout simplement parce que j'allais mal noter le nom de la class, d'ailleurs vous pouvez le voir dans le code que j'ai mis au dessus,
    ".footbal" et "football". Il manquait un "l".

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. besoin d'aide sur trigger
    Par devalender dans le forum SQL
    Réponses: 2
    Dernier message: 18/07/2004, 22h28
  2. [D7] Besoin d'aide sur un PChar
    Par bobby-b dans le forum Langage
    Réponses: 6
    Dernier message: 30/06/2004, 16h42
  3. Filemaker ... besoin d'aide sur les Plugin
    Par joange dans le forum Autres SGBD
    Réponses: 3
    Dernier message: 22/04/2004, 10h16
  4. [intermedia] besoin d'aide sur script PL/SQL
    Par SteelBox dans le forum PL/SQL
    Réponses: 8
    Dernier message: 05/01/2004, 19h59
  5. [CR] besoin d'aide sur les formules
    Par GuillaumeDSA dans le forum Formules
    Réponses: 4
    Dernier message: 10/07/2003, 12h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo