image de fond centrée dans cellule : comment faire ?

Must3r · Message par **Must3r** » 10 juil. 2006, 14:54

Bonjour !

Je débute sous Nvu, et là je suis stoppé net...

J'aimerais faire une page qui ne fasse pas la totalité de la largeur de la page, avec une image en haut, une autre en bas, et un texte avec une image de fond entre les deux, pour écrire dessus. Je souhaiterais également avoir une couleur de fond sur la totalité de la page affichée, que ça soit sous forme d'image (étirée ou répétée) ou de couleur.

Je sais mettre une image centrée, mais je ne sais pas comment faire pour en mettre une autre, en fond, de façon à écrire par dessus.

En fait la page que je voudrais faire se rapprche de la home de MacGeneration...

Comment est-ce possible sous Nvu d'arriver à ce résultat ? Je suppose qu'en mettant une image de fond dans une cellule c'est possible, mais impossible d'arriver à faire ça...

Merci d'avance !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Message par **Ymai** » 10 juil. 2006, 15:25

Bonjour
A priori, le site ne requiert pas l'utilisation d'un tableau, puisqu'il ne s'agit pas de présenter des données structurées par lignes et colonnes. Il n'est question que de mise en page, me semble-t-il.
Oublions donc cette idée de cellule.

Pour la couleur de fond de la page, il suffit d'attribuer une couleur au bloc <body> dans l'éditeur CSS (ou mieux encore, dans KaZcadeS).
Pour le reste, la structure de la page semble montrer l'existence de trois blocs clairement identifiés: le haut-de-page, le corps de la page et le pied-de-page.

Ce qui nous donnerait une structure du type suivant (les couleurs et les noms des images sont, bien sûr, à changer):

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <style type="text/css">
body {
  background-color: #ffcc33;
}
#conteneur {
  border: 1px solid blue;
  width: 80%;
  margin-left: 10%;
}
#corps {
  border: 1px solid red;
  background-image: url(images/fond.jpg);
}
  </style>
</head>
<body>
<div id="conteneur">
<div id="haut"><img style="width: 34px; height: 34px;" alt="imageHaut" src="images/imageHaut.gif"></div>

<div id="corps">Bla Bla Bla</div>

<div id="pied"><img style="width: 34px; height: 34px;" alt="imageBas" src="images/imageBas.gif"></div>
</div>
</body>
</html>

Eventuellement, l'explication détaillée de la méthode qui permet d'arriver à cela (et même à un peu plus) se trouve à l'adresse http://info.sio2.be/NVU/3

Must3r · Message par **Must3r** » 10 juil. 2006, 16:13

Ouah, à quelques choses près c'est exactement ça, merci beaucoup !

J'ai modifié de façon à ce que tout aille bien, mais j'ai encore un petit souci : je suis en 1280×1024, et tout est bien centré, mais quand je teste en 1024×768, l'ensemble est déporté vers la droite, j'ai essayé de voir dans le code ce qui pouvait faire ça, mais je n'ai pas trouvé...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Message par **Ymai** » 10 juil. 2006, 16:47

A priori, si les dimensions sont bien:
80% pour le conteneur
10% pour la marge gauche (et donc 10% restants pour la marge droite)
la page doit rester centrée.

Must3r · Message par **Must3r** » 10 juil. 2006, 18:29

Ouais, c'est bizarre, j'ai repris ton code "propre", parce que j'avais ajouté des trucs qui auraient pu alourdir le mien, mais c'est pareil, ça ne change rien...

Je suppose que c'est la largeur de mes images de haut et de bas, ainsi que celle du milieu (image de fond) qui fait que ça ne marche pas comme àa devrait...

Je te donne ces mesures, si ça peut faire avancer la chose : 781×153 pour celle du haut, 781×10 pour celle du milieu, et 781×34 pour celle du bas.

Mais le 80/20 (enfin 80/10-10) est bien là, j'ai regardé comment ça faisait si je trouchais un peu, mais ça ne change rien

Sinon je me posais également la question de savoir comment faire pour que cette image de fond ne soit pas répétée, j'ai vu la réponse sur le forum mais impossible de remettre la main dessus...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Mongo Bob · Message par **Mongo Bob** » 10 juil. 2006, 23:16

mais quand je teste en 1024×768, l'ensemble est déporté vers la droite

Et il est probable que si tu testes en 800x600, ça sera pire.
Il faudrait ton code, les images sont trés larges, <800, donc elle devraient pouvoir "passer" même en 800x600, mais tout dépend comment elles sont positionnées. C'est quoi comme images, est-ce qu'elle peuvent être un peu déformées sans dommage, ça dépend de ce qu'elles représentent.
Il est évident que au moins l'image sur laquelle tu veux écrire un texte doit être en fond css du bloc dans lequel tu vas écrire. Tu n'as rien contre les css?

Must3r · Message par **Must3r** » 10 juil. 2006, 23:25

Salut !

Ouais, je viens de tester en 800×600, et évidemment, le « cadre » qui devrait rentrer est bien trop à droite, alors qu'à gauche il subsiste un espace vide...

Les images ne sont pas vraiment faites pour être déformées, enfin voici la page en question, histoire de voir in situ, et aussi le code

Je n'ai rien contre le css, à part que je n'y connais absolument rien, mais tant que c'est faisable et universel, ça me va !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Message par **Ymai** » 11 juil. 2006, 00:06

[edit]Désolé, soucis avec ma connexion. Ma réponse est partie trop tard.[/edit]
La taille des images ne semble pas pouvoir faire problème.
Y aurait-il moyen de voir le code ou une adresse où se trouverait une page?

Pour éviter la répétition des images de fond:
- boîte de dialogue de l'éditeur CSS ou (mieux) de KaZcadeS
- onglet Fond
- Répétition: "Pas de répétition"

Must3r · Message par **Must3r** » 11 juil. 2006, 00:32

Pour la répétition : merci, ça marche !

Et pour le reste, j'ai posté le lien juste au dessus, je n'ai qu'une seule page

Message par **Ymai** » 11 juil. 2006, 07:47

La solution que je proposais au départ ne peut pas fonctionner, puisque c'est l'image supérieure qui dicte la largeur du "corps". On ne peut donc travailler en %
Je n'ai plus, sous la main, la méthode qui permet de centrer un bloc de dimension définie pour toute résolution; mais elle a déjà été précisée ici. Dès que je la retrouve... ou si un autre aimable habitué s'en souvenait avant moi.

Do-IT · Message par **Do-IT** » 11 juil. 2006, 08:07

Ymai a écrit :la méthode qui permet de centrer un bloc de dimension définie pour toute résolution

Pas lu le sujet mais tu parles peut-être de marge auto à gauche et à droite pour ton div.

Mongo Bob · Message par **Mongo Bob** » 11 juil. 2006, 08:57

Ca marche avec un div (un bloc en général) en position non définie (=dans le flux courant) :
donc
marge gauche : auto,
marge droite : auto

Le choix n'est pas préétabli dans NVU (Editeur css ou Styles internes/Propr de la boîte), faut taper à la main "auto".

Message par **Ymai** » 11 juil. 2006, 10:25

Et ça devrait fonctionner dans IE?

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr-be">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <style type="text/css">
body {
background-color: #ffcc33;
}
#conteneur {
margin-left:auto;
margin-right: auto;
border: 1px solid blue;
width: 750px;
}
#corps {
border: 1px solid red;
background-image: url(images/fond.jpg);
}
  </style>
</head>
<body>
<div id="conteneur">
<div id="haut"><img style="width: 34px; height: 34px;"
 alt="imageHaut" src="images/imageHaut.gif"></div>
<div id="corps">Bla Bla Bla</div>
<div id="pied"><img style="width: 34px; height: 34px;"
 alt="imageBas" src="images/imageBas.gif"></div>
</div>
</body>
</html>

Mongo Bob · Message par **Mongo Bob** » 11 juil. 2006, 10:48

Ah! Jusqu'à IE5.5 inclus, c'est vrai... Mais en général, mes préoccupations de compatibilité tous systèmes s'arrêtent à IE6, je teste jamais en-dessous, à tort ou à raison (taux de pénétration IE<6? mmmm....)

Do-IT · Message par **Do-IT** » 11 juil. 2006, 10:53

Code : Tout sélectionner

body {
text-align: center;
background-color: #ffcc33;
}
#conteneur {
margin-left:auto;
margin-right: auto;
border: 1px solid blue;
width: 750px;
text-align: left;
}

C'est pourri mais bon, ... (merci google)

Geckozone

image de fond centrée dans cellule : comment faire ?

image de fond centrée dans cellule : comment faire ?

Qui est en ligne ?