Demande d'aide à la création

Version imprimable

29/04/2007, 12h16
theplayer2jeux

Demande d'aide à la création

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.

http://img155.imageshack.us/img155/4223/monsitemu0.jpg
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! ;)
29/04/2007, 13h27
francis m

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
29/04/2007, 13h35
theplayer2jeux

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?
29/04/2007, 14h20
francis m

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
29/04/2007, 15h05
theplayer2jeux

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...
30/04/2007, 00h29
francis m

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)
30/04/2007, 08h53
blueice

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... ;)
30/04/2007, 09h34
theplayer2jeux

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?
30/04/2007, 09h41
blueice

Citation:

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

Je vais essayer d'être plus clair :

Voila ce que tu m'a dit :

Citation:

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:

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:

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>

30/04/2007, 11h22
blueice

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

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

Code:

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:

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?

30/04/2007, 12h01
blueice

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/
30/04/2007, 12h15
theplayer2jeux

Merci blueice je comprends mieux mon erreur!
Je vais essayer de continuer comme sa! ;)
30/04/2007, 14h07
francis m

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
30/04/2007, 14h15
blueice

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. :D (Sur son dessin ca fait 27 divs, juste pour des coins arrondis, autant utiliser des tableaux ! :mrgreen:)
30/04/2007, 15h30
theplayer2jeux

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! ;)
30/04/2007, 16h09
blueice

Citation:

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 ? 8O
30/04/2007, 18h23
theplayer2jeux

Il reste un bout d'écran inutilisé ou il faut agrandir sa fenêtre...
01/05/2007, 00h09
Neroptik

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.
10/06/2007, 16h28
theplayer2jeux

Bonjour à tous!
Après une longue période d'absence j'ai réussi à héberger mes pages web ( http://annu2play.neuf.fr )
Le design est fait et le contenu reste à faire...
Le soucis c'est qu'avec Internet Explorer mon tableau de base n'est pas centré...
Alors qu'avec Mozilla tout va bien! J'ai vérifié les standard et mes pages sont valides en html et css...
D'où ce décalage pourrai t il venir?
10/06/2007, 20h17
Kerod
Il faut savoir une chose : text-align est une propriété qui centre le contenu de la balise et non la balise par rapport à son conteneur.

Alors soit tu le fais directement dans le table en mettant le

Code:

align = center

Soit tu le fais en pur CSS comme ceci :
Code:

1 2 3 4 5 6 7 body{ text-align : center; } table { margin: auto; }
10/06/2007, 20h33
theplayer2jeux

Voila j'ai modifié mais il y a toujours encore un petit déséquilibre...
10/06/2007, 21h11
Kerod

J'ai aucun décalage avec IE7 :roll:
10/06/2007, 21h20
theplayer2jeux

désolé je l'ai remis comme y faut ... :S par contre au niveau du menu les cellules sont censé faire 180 px de large mais en font plus car l'image de fond fait bien 180px de large et est un peu répété...
J'ai mis les longueurs dans le CSS et dans le HTML mais rien ne change...
12/06/2007, 20h40
fallais

Et si on met 4 images aux quatre coins avec un div global de dimension 98%98% avec une couleur de fond bleue ? :P
14/06/2007, 14h14
theplayer2jeux

Au niveau du fond sa va mieux mais c'est au niveau du menu que j'ai un problème... en tout cas déja merci pour l'aide que vous m'avez apporté! ^^
23/09/2007, 10h22
theplayer2jeux

Mon Retour ^^

Voila mon site a bien avancé : http://annu2play.neuf.fr

Je ne l'ai pour l'instant que peu référencé car j'ai l'initiative d'acheter un hebergement très prochainement, car neuf n'accepte pas le php et je voudrai mettre un formulaire de contact ainsi que pour bien d'autres raisons...

Je suis allé voir chez ovh (hebergeur que je connaissai de nom) les différents packs et j'hésite entre 2 packs car je ne veut pas trop cher dans mon hebergement la première année : l'option start 1G , l'option start 5G ou encore l'option 60GP.

C'est surtout au niveau de la bande passante...

J'aimerai savoir qu'est ce que vous me conseillerai? et si vous connaissez un meilleur hebergeur...
26/09/2007, 00h58
Kerod
Je te conseillerai d'aller jeter un oeil aux post-it de ce forum : Hébergement

Tu peux regarder par exemple :
- Comparatif des hébergeurs payants : Vos avis
- Les hébergeurs gratuits
Pour toutes autres questions n'hésite pas à créer un nouveau sujet dans ce forum Hébergement ;)
26/09/2007, 22h51
fallais

Je conseille Free :)

Fuseau horaire GMT +2. Il est actuellement 12h19.