28173 sujets

CSS et mise en forme, CSS3

Voici mon début de site : http://cpepette.ifrance.com/
Prenez la page CONTACT
Et là vous voyez que vers la fin au niveau de "contact webmaster" c'est décalé vers la gauche sans aucune raison ! ou bien plutôt quelquechose m'échappe !!
Merci de votre aide car dure dure de tourner en rond !
Bonjour à toi...

Difficile de déterminer ton problème en se basant sur une page encore plus bordélique que mon appartement (en partie à cause de ton hébergeur, visiblement).
Modifié par Julien Royer (22 Jan 2007 - 18:53)
Tu m'as fait peur je croyais que ça venait de moi ! Désolé c'est juste un hébergeur en attendant !! Pas moyen tout de même de me sauver d'une prise de tête ( peut-être ridicule)!
Snif
cpepette a écrit :
Tu m'as fait peur je croyais que ça venait de moi ! Désolé c'est juste un hébergeur en attendant !!
Je n'ai pas dit que ça ne venait pas de toi, j'ai dit qu'il était difficile de se prononcer étant donné la tête de ta page...

Fais des tests en local avec la page Web épurée (sans le code inséré par ton hébergeur), et tu verras bien si le problème vient de là.
C'est bien sur ce que j'ai fait en premier et ce décalage est toujours là ! Pour moi cela vient de quelquechose qu'y m'échappe dans mon code ! mais quoi ?
La structuraion de ton code manque enormément de robustesse.
Cela vient d'un text-align :center :

Correction à apporter:


#contact_photo p{
font-size:14px;
text-align:right;
margin-right:150px;
color:black;
font-family:"Trebuchet MS";
}


Et inclure ton duo texte/image dans des paragraphes peut t'éviter
de mauvaises surprises et du coup tu n'a plus besoin des <br>
qui ne sont pas fait pour ça.

<div id="contact_photo">
<p>Pour laisser un message au <a href="mailto:president@pachandball.fr?&amp;subject=renseignement%20venant%20du%20site%20internet">président du club</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="contact_data/contact_president.gif" alt="Jean-Paul DEVANNE" height="128" width="111"></p>
<p>Pour laisser un message au <a href="mailto:secretaire@pachandball.fr?&amp;subject=renseignement%20venant%20du%20site%20internet">secrétaire du club</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="contact_data/contact_secretaire.gif" alt="Didier BLANCHARD" height="128" width="111"></p>
<p>Pour laisser un message à l' <a href="mailto:entraineur@pachandball.fr?&amp;subject=renseignement%20venant%20du%20site%20internet%20du%20pac%20handball">entraîneur du club</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="contact_data/contact_entraineur.gif" alt="Jean-René RAGON" height="128" width="111"></p>
<p>Pour laisser un message au <a href="mailto:contact@pachandball.fr?&amp;subject=renseignement%20venant%20du%20site%20internet">webmaster du club</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="contact_data/webmaster.gif" alt="Céline BLANDIN" width="111" height="128"></p>
</div>

Modifié par Hermann (22 Jan 2007 - 20:14)
Que veux-tu dire par robustesse ?
Ce que tu me dit à l'air de fonctionner mais je comprends pas pourquoi mon
text-align:center;
ne marchait pas ! En tout cas merci !!
Par robustesse j'entends faire référence à un code
qui a plus de chance d'être affiché de la même manière
quelque soit le navigateur et quelque soit les modifications apportée
au code html ou CSS. Autrement dis un code favorisant
ce qu'on appelle l'intorépabilité.
Le text-align center centre les élément inline (en-ligne) qui se trouvent à
l'intèrieure du bloc mais ne peut garantir une homogénéité
du placement horizontal des ces efants inline puisque cela dépend
de la largeur de l'image et du texte additionné dans ton cas...
Modifié par Hermann (22 Jan 2007 - 20:49)
Salut,
déjà tu devrais mettre ta feuille de style dans un fichier à part car ici les déclarations de styles se baladent sur chaque page, si tu dois faire une modif, il faudra la répercuter sur toutes les pages, en plus dans tes pages les déclarations de styles diffèrent déjà d'une page à l'autre. C'est vrai que c'est un peu le bazar, dans la page contact par exemple, tu te réfère à un style identifié "centre", or il n'existe pas dans les déclarations. Les balises HTML du style <br> peuvent aisément être remplacées par une mise en forme adéquate, etc.
Tu devrais peut-être exposer clairement le type de présentation que tu souhaite mettre en place.
J'ai bien sur réfléchis à tout ça ! Vous m'avez convaincu par rapport à une feuille de style !
Par contre pour mon problème de décalage à gauche :
a écrit :
#contact_photo p{
font-size:14px;
text-align:right;
margin-right:150px;
color:black;
font-family:"Trebuchet MS";
}

Sur cette page ( page contact) le
float:right
fonctionne !
Sur d'autres pages comme celle des liens, il faut quand même que je centre mon écris, donc je suis toujours bloqué !

Mon site : http://cpepette.ifrance.com/
Modifié par cpepette (24 Jan 2007 - 21:09)
Salut,
tu devrais déjà faire du ménage, ça ne fait pas de mal de temps en temps et ça rendrait le code plus claire.
Par exemple:
- les <br> qui se baladent un peu partout,
- les border=0 sur quasiment toutes les images. Tu peux simplement mettre:
img {border:0 none;}

dans la feuille de style et ça s'appliquera à toutes les images de tes documents
- les div avec même identifiant dans le même document
- div utilisés dans l'HTML mais pas déclarés ("centre" par exemple)
etc...
Et réfléchir davantage à la structure que tu veux adopter pour tes pages.
Peut-être revoir les bases de CSS (il y a des tutos sympas sur le site, avec des exemples, ainsi que des modèles de structures de pages).