CSS + résolution ecran...

Discussion dans 'Administration d'un site Web' créé par Grantome, 29 Avril 2004.

  1. Grantome
    Grantome WRInaute passionné
    Inscrit:
    16 Janvier 2004
    Messages:
    2 243
    J'aime reçus:
    0
    Salut,

    Voilà mon pb.

    Je souhaite faire un cadre avec au centre un contenu.
    Le tout doit pouvoir se redimensionner selon la résolution d'écran du visiteur.

    La feuille est divisé en 9.

    1 2 3
    4 5 6
    7 8 9

    les parties 1 3 7 et 9 sont des images fixe, se sont les angle du cadre.
    les parties 2 4 6 et 8 sont des images qui doivent se répéter en fonstion de la largeur et de la hauteur de la page, se sont les bords du cadre.
    la partie 5 et mon contenu.

    Mon pb, et que soit j'arrive à coder pour faire varier les partie 2 et 8 (en largeur), soit j'arrive à coder pour faire varier les partie 4 et 6 (en hauteur).

    Evidement, j'ai déjà parcouru le web en long et en travers, fait les site alsacecreations, openweb, etc... Mais rien trouvé pour mon soucis.

    Sibelus, au secour...
     
  2. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    je veux bien t'aider mais il me faut un dessin ou une URL ;)
     
  3. Grantome
    Grantome WRInaute passionné
    Inscrit:
    16 Janvier 2004
    Messages:
    2 243
    J'aime reçus:
    0
    ...

    Ahhhh, pas d'URL, c'est du local...

    Voici le code:
    CSS
    Code:
    html,body
    {
    background-image:url(./images/fond.jpg);
    margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
    }
    
    #hautgauche {
    position: absolute;
    left:0;
    width:189;
    height:44;
    background-image:url(./images/parchemin1.gif);
    }
    
    #hautcentre {
    margin-left: 189px;
    margin-right: 203px;
    height:44;
    background-image:url(./images/parchemin2.gif);
    }
    
    #hautdroite {
    position: absolute;
    right:0;
    background-image:url(./images/parchemin3.gif);
    width:203;
    height:44;
    }
    
    #gauche {
    position: absolute;
    left:0;
    background-image:url(./images/parchemin4.gif);
    width:51;
    height:81;
    }
    
    #centre {
    background-color:#efe7d6;
    margin-left: 51px;
    margin-right: 42px;
    }
    
    #droite {
    position: absolute;
    right:0;
    background-image:url(./images/parchemin5.gif);
    width:42;
    height:81;
    }
    
    #basgauche {
    position: absolute;
    left:0;
    background-image:url(./images/parchemin6.gif);
    width:189;
    height:40;
    }
    
    #bascentre {
    margin-left: 189px;
    margin-right: 203px;
    height:40px;
    background-image:url(./images/parchemin7.gif);
    }
    
    #basdroite {
    position: absolute;
    right:0;
    background-image:url(./images/parchemin8.gif);
    width:203;
    height:40;
    }
    
    Et le HTML
    Code:
    <head>
    		<link href="./aaa.css" rel="stylesheet" type="text/css"> 
    </head>
    
    <body>
    	<div>
    	  <div id="hautgauche"></div>
    	  
    	  <div id="hautdroite"></div>
    	  
      	<div id="hautcentre"></div>
    	</div>
    	<div>
    	  <div id="gauche"></div>
    	  
    	  <div id="droite"></div>
    	  
      	<div id="centre">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    		ccccccccccccccccccccccccccccccccccccccccccccccccc
    		dddddddddddddddddddddddddddddddddddddddddddddd</div>
    	</div>
    	<div>
    	  <div id="basgauche"></div>
    	  
    	  <div id="basdroite"></div>
    	  
      	<div id="bascentre"></div>
    	</div>
    </body>
    </html>
    
    Je te mets un screen se soir si tu veux.
     
  4. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    oui je veux bien un screen qui explique ce que tu veux ^^
     
  5. Grantome
    Grantome WRInaute passionné
    Inscrit:
    16 Janvier 2004
    Messages:
    2 243
    J'aime reçus:
    0
    ...

    Voilà

    h**p://60gp.ovh.net/~raikkone/screen.jpg
     
  6. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    merci
    et pour l'explication ? par ce que je n'ai rien compris au post
     
  7. Grantome
    Grantome WRInaute passionné
    Inscrit:
    16 Janvier 2004
    Messages:
    2 243
    J'aime reçus:
    0
    ...

    Héhhé

    Le pb se situe sur les ID gauche et droit

    Bon, l'image entre les 2 coin du parchemin varie bien en largeur, mais pas en hauteur.

    Tu va me dire, normal, il y a un height de mis, mais en le retirant, en le mettant en auto, ou en plaçant un background-repeat, ça ne change rien.
     
  8. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    et pourquoi ne pas uploader le site pour qu'on le voit "tourner" ? :S
    par ce que là c'est très dur !
     
  9. Grantome
    Grantome WRInaute passionné
    Inscrit:
    16 Janvier 2004
    Messages:
    2 243
    J'aime reçus:
    0
    ...

    Pffffff, suis un peu truffe parfois............ mais bon...

    h**p://60gp.ovh.net/~raikkone/aaa.html
     
  10. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    chez moi en largeur ça marche
    en hauteur ça marche
    mais bien sur avec moins de texte ça se redimensionne plus
    alors il faut quoi ?
     
  11. Grantome
    Grantome WRInaute passionné
    Inscrit:
    16 Janvier 2004
    Messages:
    2 243
    J'aime reçus:
    0
    ...

    Les bordures gauche et droite du parchemin marche ???

    Tu peut faire un screen ?

    T'as quel nav ?
     
Chargement...
Similar Threads - CSS résolution ecran Forum Date
Résolution d'écran et css Développement d'un site Web ou d'une appli mobile 17 Février 2009
Adapter un site suivant la résolution de l'écran en CSS Développement d'un site Web ou d'une appli mobile 2 Mai 2006
Script qui charge un css suivant résolution de l'internaute? Développement d'un site Web ou d'une appli mobile 1 Septembre 2008
css: garder 3 boîtes sur la même ligne qq soit la résolution Développement d'un site Web ou d'une appli mobile 13 Mars 2006
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019