Demande d'aide à la création

**theplayer2jeux** · 29/04/2007, 12h16

Bonjour à tous!

J'arpente depuis quelques temps les tutoriaux et autres explications du html et du css.
J'ai certes appris pas mal de chose mais j'aurai besoin d'une aide plus personnalisé pour certains problèmes...

Je vous met en bas de ce message l'image du site que je souhaite réaliser (sans le contenu pour l'instant).
Ce ne sont que des images de fond.

Voici les problèmes auquel je me heurte :

- Comment faire pour redimensionner une image de fond ?

Je vais déja commencer par cette question, on verra le reste plus tard! ^^

Merci d'avance à l'aide que vous pourriez m'apporter.

PS : je crois que je n'ai pas poster au bon endroit... Si c'est le cas pourriez vous déplacer ce sujet? Merci d'avance!

**francis m** · 29/04/2007, 13h27

une image de fond ne peut pas être redimensionnée en html, seulement avec un logiciel d'images (paintshop, photoshop etc)

par contre elle peut être répétée. cela convient pour faire un fond d'une certaine homogénéité, pas pour une photo ou équivanlent

**theplayer2jeux** · 29/04/2007, 13h35

Merci mais pour mon fond bleu a coins arrondis comment puis je faire?
Quels dimensions dois je donner à cette image de fond (avec photofiltre) pour qu elle occupe toute la page web?

**francis m** · 29/04/2007, 14h20

par défnition tu ne connais pas la taille de la page web, puisqu'elle dépend du client : résolution de son écran, est-ce que son navigateur est en plein écran etc

donc il faut 9 images : à chaque coin une image avec l'arrondi, entre chacun de ces coins (donc quatre zones) une ligne/colonne avec repeat x ou , et au milieu un point bleu avec repeat x et y

il y a quelques tutoriels à ce sujet un peu partout

**theplayer2jeux** · 29/04/2007, 15h05

Je vais essayer ça très prochainement et je vous donnerai de mes nouvelles!

Mais je me demande comment cela se passera pour rajouter les autres fonds au dessus...

Rajout : Je viens de faire quelques tutoriaux avec du CSS et j'ai vu comment mettre un coin (une image de fond à la balise body) mais comment en mettre plusieurs? En créant un tableau? Mais on ne peut pas superposer plusieurs tableaux...

**francis m** · 30/04/2007, 00h29

il ne faut pas mettre l'image de fond sur le body

il faut créer 9 divs (ou un tableau de 3*3) et appliquer une image de fond sur chacun div (ou cellule)

**blueice** · 30/04/2007, 08h53

Pour faire des bords ronds pas besoin de tableaux et de pleins de div.
Tu découpes ton cadre en trois petites parties, celle du haut et tu découpes juste en dessous des bords, celle du bas idem et ensuite une image de 1px de haut pour le milieu (si tu utilises un dégradé)
Ensuite tu places l'image en haut - tu répètes l'image du milieu - et enfin tu places l'image du bas...

**theplayer2jeux** · 30/04/2007, 09h34

Blueice, il faut quand même que je fasse 3 div et le problème avec les div que j'ai fait c'est que l'image n'est pas entière et francis si je fais mon image de fond dans un tableau, je ne pourrai pas faire mes fonds de contenu dans un autre tableau c'est bien sa?

**blueice** · 30/04/2007, 09h41

Blueice, il faut quand même que je fasse 3 div et le problème avec les div que j'ai fait c'est que l'image n'est pas entière

pas compris

**theplayer2jeux** · 30/04/2007, 10h16

Je vais essayer d'être plus clair :

Voila ce que tu m'a dit :

tu places l'image en haut - tu répètes l'image du milieu - et enfin tu places l'image du bas...

Ces images tu les met dans quels balises? div?

Rajout : Voici mon code pour 2 des coins (méthode de francis mais je crois que c'est le même principe que blueice) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 .hg
{
   background-image: url("coin-hg.png");
   background-repeat: no-repeat;
   background-position: top left;
}
 
.hd
{
   background-image: url("coin-hd.png");
   background-repeat: no-repeat;
   background-position: top right;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Exemple d'utilisation de CSS externe</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" media="screen" type="text/css"
 title="lien" href="lien.css">
</head>
<body>
<div class="hg"></div>
<div class="hd"></div>
</body>
</html>

**blueice** · 30/04/2007, 11h22

Oui mais dans la longueur....
- Haut du cadre avec bords arrondis
- Milieu répété
- Bas du cadre avec bords arrondis

**theplayer2jeux** · 30/04/2007, 11h43

Je met le code que j'ai du concept de blueice mais la page est toujours blanche :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Exemple d'utilisation de CSS externe</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" media="screen" type="text/css"
 title="lien" href="lien.css">
</head>
<body>
<div class="cadrehaut"></div>
<div class="pixelblue"></div>
<div class="cadrebas"></div>
</body>
</html>

Code css :

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
.cadrebas
{
   background-image: url("cadrebas.png");
   background-repeat: no-repeat;
   background-position: bottom;
}
 
.cadrehaut
{
   background-image: url("cadrehaut.png");
   background-repeat: no-repeat;
   background-position: top;
}  
 
.fondblue
{
   background-image: url("pixelblue.png");
   background-repeat: repeat;
   background-position: middle;
}

Où est mon erreur?

**blueice** · 30/04/2007, 12h01

J'avais fait un exemple pour une autre personne le voici :
J'ai découpé son design à l'arrache, mais le principe est là...
http://www.dimension-internet.com/dev/decoupe/

**theplayer2jeux** · 30/04/2007, 12h15

Merci blueice je comprends mieux mon erreur!
Je vais essayer de continuer comme sa!

**francis m** · 30/04/2007, 14h07

juste une petite remarque blueice :

avec 3 divs comme tu proposes ton image est figée en largeur : celle du haut contient les deux arrondis du haut et idem pour le bas

si tu souhaites que ton site s'adapte également à la largeur du client, il faut bien 9 divs

**blueice** · 30/04/2007, 14h15

Tout à fait d'accord, mais s'il doit avoir 9 divs par partie arrondie, c'est un joli bazar en perspective... Donc suivant son dessin un site fixe est préférable.

(Sur son dessin ca fait 27 divs, juste pour des coins arrondis, autant utiliser des tableaux !

)

**theplayer2jeux** · 30/04/2007, 15h30

C'est vrai que la technique de blueice est moins clomplexe mais c'est vrai, peut être, qu'elle est moins belle mais bon je débute et au moins j'aurai vu les 2 systèmes possibles!

Merci beaucoup à vous deux! Je devrai pouvoir heberger mon site d'ici peu de temps et je vous montrerai un petit dysfonctionnement mais rien de grave pour l'instant je continu sa mise en page... A très bientôt!

**blueice** · 30/04/2007, 16h09

C'est vrai que la technique de blueice est moins clomplexe mais c'est vrai, peut être, qu'elle est moins belle mais bon je débute et au moins j'aurai vu les 2 systèmes possibles!

Moins belle en quoi ?

**theplayer2jeux** · 30/04/2007, 18h23

Il reste un bout d'écran inutilisé ou il faut agrandir sa fenêtre...

**Neroptik** · 01/05/2007, 00h09

Perso je ne pense pas que ce soit un critère de beauté, et au passage, je trouve que les sites plein ecran ne sont pas forcement plus esthetique.
L'avantage d'un site a taille fixe, c'est de pourvoir gerer plus facilement l'integration des composants au design general de la page.
Les sites "full size" a peu de contenu quand on a une grande resolution ca fait des pages un peu desertiques.
Donc tout depend ... du type de site, du Design general etc...

Enfin je ne vais pas m'etendre mais je pense que c'est meme un des gros choix du Designer en terme de conception/realisation.

Demande d'aide à la création

HTML

Discussions similaires

Partager

Partager