positionner mon site

avoir le contenu de mon site centré toujours

Sujet résolu

22 août 2019 à 19:11:29

bonjour

je sais que le positionnement en CSS est un sujet qui a ete traité dans le cours mais j'ai beau essayer de faire je n'y arrive pas,je veus que les div cadres qui donnent un aspect cachier d'ecolier,soit centré dans la div cadre general,ceci peut etre facile a faire,mais il faut que cela reste vrais dans tous les cas,et la div cadre general soit toujours centré dans le format de l'écran du client quel qu'il soit .

le format de reference etant la div cadre general,qui doit remplir l'ecran en offrant un cadre centré pour les div cadres ...j'espere que vous avez compris mon but.

<!DOCTYPE html>
<html>
     <head>
	      <meta charset="utf-8" />
		  <link rel="stylesheet" href="test.css" />
		  <title>test</title>
	 </head>
	 <body >
	     <div id="cadre-general">
	     <div id="cadre01"></div><div id="cadre02"></div><div id="cadre03"></div><div id="cadre04"></div>
		 <div id="cadre05"></div><div id="cadre06"></div><div id="cadre07"></div><div id="cadre08"></div>
	     <div id="cadre1"></div>
		 <p id="tete">Css probleme</p>
		 </div>
</body>
</html>

code html

body{background-color:black;}
#cadre01{width:980px;height:600px;position:absolute;top:2px;left:18px;background-color:rgb(180,200,160);}
#cadre02{width:980px;height:600px;position:absolute;top:3px;left:17px;background-color:black;}
#cadre03{width:980px;height:600px;position:absolute;top:4px;left:16px;background-color:white;}
#cadre04{width:980px;height:600px;position:absolute;top:5px;left:15px;background-color:black;}
#cadre05{width:980px;height:600px;position:absolute;top:6px;left:14px;background-color:white;}
#cadre06{width:980px;height:600px;position:absolute;top:7px;left:13px;background-color:black;}
#cadre07{width:980px;height:600px;position:absolute;top:8px;left:12px;background-color:white;}
#cadre08{width:980px;height:600px;position:absolute;top:9px;left:11px;background-color:black;}
#cadre1{width:980px;height:600px;position:absolute;top:10px;left:10px;background-color:red;}
	p{font-size:72px;color:black;position:absolute;top:200px;left:200px;}
#cadre-general{.....}

code CSS

le lien ci dessous et une page reference de mes page.

merci.

GuillaumeBo1

22 août 2019 à 22:48:32

Bonsoir, commence par supprimer tes position: absolute; qui t’empêcherons de centrer

Un homme azerty en vaut deux.

Kicraft

22 août 2019 à 23:32:39

Bonsoir, je ne comprend pas ce que tu veut faire, tu pourrais mettre un screen d’exemple ou un schéma ?

Mais en tout cas le fait d’utiliser des position absolutes:

1 - n’est pas du tout adapté

2 - t’empêchera de centrer comme dit plus haut

3 - te force a faire des styles pour chaque cadres

boukhali

23 août 2019 à 10:52:59

bonjour

http://alkhalili-kb.com/contact.html

mes pages sont conçues de cette façon toutes,ce qui donne l'aspect d'un cachier d'ecolier.ce que je veus c'est que la div cadre general contienne ce cachier centré en son sein,et elle rempli l'écran de l'utilisateur.

Kicraft

23 août 2019 à 12:06:02

J'ai fait une fonction javascript qui crée cet effet:

index.js

function createPageStyle(number, gap, size, colors){
    var container = document.querySelector('#cadre-content');
    const html = container.innerHTML;
    container.innerHTML = ''
    var currentGap = {
        top: 0,
        left: number
    }
    for (let i = 0; i <= number; i++) {
        var backgroundColor;
        switch (i) {
            case 0:
                backgroundColor = colors.firstColor;
                break;
            case number:
                backgroundColor = colors.lastColor;
                break;
            default:
                backgroundColor = (i%2 == 0) ? colors.peerColor: colors.oddColor;
                break;
        }
        var e = document.createElement('div');
        e.style.position = 'absolute';
        e.style.backgroundColor = backgroundColor;
        e.style.width = size.width + 'px';
        e.style.height = size.height + 'px';
        e.style.top = currentGap.top + 'px';
        e.style.left = currentGap.left + 'px';
        if(i == number){
            e.innerHTML = html;
            container.style.width = (size.width + currentGap.left) + 'px';
            container.style.height = (size.height + currentGap.top) + 'px';
        }
        container.appendChild(e)
        currentGap.top += gap
        currentGap.left -= gap
    }
}

ton html:

<body>
    <div id="cadre-general">
      <div id="cadre-content">
          <p id="tete">Css probleme</p>
      </div>     
    </div>
    <script>
      createPageStyle(10, 1, {
        width: 980,
        height: 600
      }, {
        firstColor: 'rgb(180,200,160)',
        peerColor: 'black',
        oddColor: 'white',
        lastColor: 'red'
      })
    </script>
  </body>

et ton css:

body{
    background-color:black;
}

p{
    font-size:72px;
    color:black;
    position:absolute;
    top:200px;
    left:200px;
}

#cadre-content{
    position: relative;
    margin: 0 auto;
}

Voilà t'as juste a tout copier coller et c'est fait (tu peut changer les couleurs, les tailles, les écarts et le nombre de cadres dans les paramètres de la fonction dans le html)

-
Edité par Kicraft 23 août 2019 à 13:45:17

boukhali

24 août 2019 à 10:50:28

bonjour

meme si je prefere les solutions ou je participe dans la solution comme cela je comprend mieux,mais cette fois ci j'accepte volontier de tester ce code.

merci.

Kicraft

26 août 2019 à 0:25:20

Ok, dit moi si sa marche ou si il y a une problème.

boukhali

2 septembre 2019 à 13:11:29

bonjour

j'ai tester cette fonction elle donne un rendu similaire a ce que je veus merci beaucoup mis a part une legere lacune pour moi je ne sais pa s si cette fonction peut etre implémentée,de façon a ce que le parametre number dans les arguments peut dans le switch recevoir comme valeur un fond image

principalement dans sa valeur final ç-a-d lorsque number = 10,cadre-content reçoit un fond image non une couleur.

{

...

case 10:

backgroundImage='image.jpg'

}

merci.

Kicraft

2 septembre 2019 à 19:44:10

Salut, tu peut essayer de remplacer:

e.style.backgroundColor

par:

e.style.background

et dans l'appel de la fonction depuis l'html, remplacer:

lastColor: 'red'

par:

lastColor: 'url("../img/example.jpg") cover'

(cover c'est en example, plus d'info: https://developer.mozilla.org/fr/docs/Web/CSS/background

https://developer.mozilla.org/fr/docs/Web/CSS/background-size)

boukhali

3 septembre 2019 à 17:21:45

bonjour

je vais voir.

merci.

boukhali

16 septembre 2019 à 12:30:56

bonjour

il semblerait que le resultat que je veus est lui meme obtenu,en attendant que quelque chose me contre-dise.c'est parfait merci monsieur,merci les zeros non j'ai l'impression qu'il n'ya plus de zeros ici...

bonne journée a vous.

Kicraft

16 septembre 2019 à 19:57:00

Avec plaisir