Création base de site

Version imprimable

16/07/2008, 16h29
solorac

Création base de site

Bonjour la Communauté,

Je m'attaque à la création d'un site et je débute en css.
je voudrais sur l'ensemble de mes pages avoir un corps de 750px (image : "corps.png", et sur les côtés G et D une image identique (image : "sides.jpg").

Je pense qu'il faut que je me serve de float "left" et "right", mais je voudrais que ma page s'adapte à tous les écrans, donc je ne veux pas mettre de valeurs absolues.

Je précise que cette page me servira à l'ensemble de mon site.

Merci pour votre aide.
16/07/2008, 16h47
romain_ci

position relative et non absolute.
Et oui il faut bien utiliser les floats pour positionner tes div ou autre !
16/07/2008, 23h13
Dryss51

Tu peux utiliser les % au lieu de définir des tailles. Cela te permettra d'afficher la taille des images en fontion de la taille de l'ecran.

Le probleme est que cela peut devenir moche avec des trop petite résolution ou de résolutions trop grande.

La position absolute créera des barres de défilement si la taille de la page n'est pas celle de la fenetre du navigateur.

La position relative créera des cheveauchement si la fenetre du navigateur est trop petite.

Tu pourras après avoir ecrit une bonne grosse page css d'adapter à la taille de tous les fenetre de tous les navigateurs.Mais cela prend du temps...

Pour éviter tous ces problèmes, tu peux utilisé du javascript qui s'adaptera automatiquement à la taille de la fenetre.

Sinon tu as des standards qui on était défini gràce à des études. Le standard est d'ailleur passé à 1024x768 est commence à tendre vers du 1280x1024.

Cordialement
17/07/2008, 07h17
Dude1205

Salut,
pour eviter que ca devienne trop moche dans des resolutions extremes, tu peux aussi jouer avec des min-width et max-width pour que ca reste dans des proportions raisonnables et mettre juste du fond d'ecran autour.
Les propriétés min et max sont pas supportées par tous les navigateurs mais je me souviens qu'il y a un moyen de simuler le meme comportement.
17/07/2008, 10h09
solorac

Merci pour vos réponses.
Mais plus simplement existerait-il un moyen pour mettre un background de fond et un autre par dessus (qui représenterait le centre du site où je peux publier), le background de fond étant les colonnes à droite et gauche. Mon image centrale étant un format png avec du transparent.

Pouvez-vous m'orienter sur une partie de code ?

Merci pour votre aide
17/07/2008, 10h19
romain_ci

Perso avec un petit dessin ca serai plus explicite !
Pour les .png attention IE6 ne les supporte pas... 33% des gens utilisent encore la version 6, il ne faut donc pas passer à coté !
17/07/2008, 11h13
solorac

Voili, voilà,

J'espère que cela plus explicite.

J'essaierais bien un truc dans ce genre la :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
body {
    background-color:#XXXXXX; /* le code du vert que tu veux mettre au 
                                               fond                                              */
}
 
#idDuDivAuCentre {
    margin:auto;                      /* Pour centrer horizontalement */
    margin-top:25px;                /* Le petit decalage en haut     */
    background-image: url("chemin de ton image");
    width:750px;                      /* 80% ou 90% si tu veux un truc qui 
                                               s'adapte à la resolution */
}

ou un truc comme ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
body {
    background-color:#XXXXXX; /* le code hexadecimal que tu veux mettre au fond */
}
 
#DivDuCentre {
    position: relative; /*Pour la position*/
    margin-left: auto; /*Pour centrer*/
    margin-right: auto; /*idem*/
    width: XXXpx; /*la largeur de ton div*/
    height: XXXpx; /*La hauteur*/
    text-align: left; /* Texte aligner sur la gauche*/
    background-image: url("chemin de ton image");
    background-repeat: no-repeat;
}

:king:

17/07/2008, 14h04
solorac

Merci pour votre aide.
Je vais teste cela et vous tiens informé.
17/07/2008, 15h19
solorac

C'est très bien, cela me plait beaucoup.
Merci pour votre aide encore une fois.
21/07/2008, 07h24
tim974

Si tu souhaites avoir le même affichage sous FF et IE :

Une feuille de style universelle

Et pour contrôler le tout : Bien commencer son design, éviter les prises de tête

:bug:
21/07/2008, 11h58
Invité

PNG sous IE

Pour le PNG sous IE, il existe une solution que j'utilise sur tous mes sites.

Tu ajoutes ce code dans <head></head>:

Citation:



Et tu ajoutes ce fichier (click droit > enregistrer la cible sous) dans le répertoire principal de ton site.

Le tour est joué.
21/07/2008, 18h00
romain_ci

ouai c'est vrai ! c'est vrai !
Mais est tu sur que cela marche dans tout les cas ?

Essaye de mettre un png en background image ;)