Problème de "fixation de blocs"

Message

#1 Message par **Caligo** » ven. 01 janv. 2010, 20:38

Salut,
Je suis actuellement en train de créer le design de la version 2 de mon site "La Cage aux Gobelins" mais voilà t'y pas que j'ai un gros problème!
Lorsque j'effectue un redimensionnement de la fenêtre de mon navigateur internet, les blocs qui constituent ma page d'accueil commencent à voyager par rapport à mon image de fond au lieu d'y rester fixés. Ceci est d'autant plus problématique que l'image en question est une photo dont les différents éléments me servent à représenter les rubriques de mon site (exemple: un micro sur lequel se trouve le bloc "créations audio").
Je ne sais pas comment résoudre ce problème ^^ '

Quelqu'un pourrait-il me donner le "truc" qui m'échappe? Au pire, je mettrai les fichiers html et css à disposition pour que vous y jetiez un oeil
D'avance merci ^^

#2 Message par **Kradukman** » ven. 01 janv. 2010, 20:54

Si tu as un design taille fixe, tu dois préciser pour certaines balises la taille weight et height (je suis pas sur pour l'orthographe, à chercker sur le site du zéro).
Je pense que c'est ça

.
(ou alors, tu utilises l'attribut css "position").

Kak Miortvi Pengvin

C'est plutôt width (largeur) et height (hauteur).
Si je me souviens bien, pour positionner des éléments dans un bloc, il faut jouer sur les marges (margin et padding) que préciseras en pixel pour un design de largeur fixe et/ou en pourcentage pour un design de largeur variable. L'attribut position me semble plus pénible à utiliser pour les souvenir que j'en ai mais il peut faire l'affaire.

#4 Message par **Luneral** » ven. 01 janv. 2010, 21:26

Sinon, si tu as mis un bloc en positionnement absolu, le problème peut venir de là. Pour le corriger, place-les en "relative" à la place de "absolute".

#5 Message par **Kradukman** » ven. 01 janv. 2010, 21:30

Kak: Effectivement

. (et effectivement, c'est plus simple de jouer avec des margin

)

#6 Message par **Caligo** » ven. 01 janv. 2010, 22:16

Merci pour vos réponses. J'ai utilisé le positionnement relatif mais cela ne semble toujours pas vouloir fonctionner.
Voici le css d'un des blocs en question:

#sagas
{
position: relative;
float: left;
width: 250px;
height: 50px;
margin-top: 100px;
margin-left: 170px;
text-align: center;
border: none;
font-family: "Sex Pistols", Comic Sans MS;
font-size: 130%;
color: white;
}

Veuillez excuser mon manque de débrouillardise, je ne suis pas un pro du codage ^^

#7 Message par **Signez** » ven. 01 janv. 2010, 23:37

Un moyen pratique pour nous aider à t'aider, c'est de mettre en ligne quelque part une page où le problème se présente, en remplaçant le texte par du Lorem Ipsum si tu préfères.

Cela nous permettrait de voir directement le souci, et de le corriger avec certains outils bien pratique (Firebug pour Firefox, ou l'Inspecteur d'éléments de Safari et de Chrome).

#8 Message par **Caligo** » sam. 02 janv. 2010, 00:57

Voilà, j'ai remplacé mon ancienne page d'accueil par la nouvelle posant problème:

http://cage-aux-gobelins.franceserv.com/accueil.html

Le problème survient lorsque l'on redimensionne la fenêtre du navigateur et surviendra donc aussi sur certaines tailles d'écran.

EDIT: Si vous pouviez en profiter pour me dire ce que vous en pensez, étant donné que je ne compte pas le mettre tout de suite en circulation, cela me permettrait de le modifier encore un peu

#9 Message par **Caligo** » dim. 03 janv. 2010, 00:14

Sorry pour le repost mais je n'arrive vraiment pas à trouver de solution à mon problème ^^ '

J'espère que ça ne va pas énerver les admin si je remonte ce sujet d'un mois, mais bon je tente quand même de donner mon avis.

Tu pourrais inclure tes textes sur l'image directement. Sous Paint/Gimp/autre, tu mets tes textes sur l'image puis tu en fais ta nouvelle image de fond. Après il faudrait ajouter des "zones cliquables" sur ton image. Genre lorsque l'on cliquera sur la partie de l'image "Partenaire", la zone cliquée sera reconnue et te dirigera vers la page partenaire. En gros ça te fera la même chose mais là tu sera certain que tes textes ne bougeront plus puisqu'ils seront incorporés dans ton image (un petit conseil, met une police de caractère un peu plus attrayante.)

Tu peux trouver facilement des tutos pour faire ça, genre par exemple celui là :

http://www.infetech.com/article.php3?id_article=159

Ca n'est pas la seule solution évidement, mais ça pourra peut-être te faciliter la chose.

#11 Message par **Caligo** » lun. 01 févr. 2010, 19:02

Merci beaucoup :smt007

Utiliser Gimp, voilà une solution à laquelle je n'avais pas pensé mais ça pourrait bien fonctionner, en effet. Je m'y met de ce pas.

Je ne crois pas que les modos t'en voudront de venir en aide à un pauvre codeur novice en détresse ^^

Merci encore

Problème de "fixation de blocs"

Problème de "fixation de blocs"

Qui est en ligne