28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley smile

voilà j'explique mon petit souci (je ne maîtrise pas bien les placements en CSS, malgré les tutoriaux je ne trouve pas de solution).

Le problème en fait, est que je n'arrive pas à placer verticalement mes balises <p>. On dirait qu'elles sont "collées" sur le haut du <div> qui les contient.

J'ai essayé d'appliquer un margin-top, aucun résultat, un padding sur le haut du div, déforme le div en question ..

Donc voilà concrètement, le problème est visible sur le footer, et sur le menu vertical, le texte se colle en haut et je n'arrive pas à le placer.

http://www.japanride.com

Voici le code du footer :

<div id="pied"><p class="footer">Japanride© 2007-2008 Antonin "addesign" D. Tous droits réservés.</p></div>


p.footer
{
	font-family: Arial, "Trebuchet MS", Georgia, serif;
	font-size: 0.8em;
    color:#68686a;
	text-align:center;
	}


#pied {
height: 45px;
background-color: #141519;
}



Merci d'avance Smiley cligne
Modifié par addesign (24 Aug 2008 - 23:32)
Ajoute padding-top:50px; dans ton bloc d'instructions css pour le footer, ça devrait fonctionner Smiley cligne
Modifié par Karadomine (24 Aug 2008 - 20:46)
Merci mais çà fonctionne pas Smiley confus

j'ai mis le site à jour pour voir la différence
http://www.japanride.com

En fait le padding n'agit pas comme il faut, ici il agrandit le div de 50px vers le haut, c'est pas ce que je veux Smiley ohwell


[EDIT] En mettant le paragraphe en position:absolute; j'arrive à le placer correctement, mais je ne peux plus utiliser le text-align:center;
Il doit bien y avoir un moyen de placer son texte autrement non ? Smiley confus
Modifié par addesign (24 Aug 2008 - 20:58)
Non, ça agrandit pas ton div de 50 pixels vers le haut, ça "pousse" le contenu de ton paragraphe de 50 pixels vers le bas. Choisis une autre valeur, peut-être 20 pixels au lieu de 50. La taille de ton div est fixée donc tant que la taille de padding+écriture ne dépasse pas de la taille que tu as donnée au div ça marchera. Ah oui, par défaut la balise <p> a des marges, ajoute aussi la ligne margin:0; pour les supprimer, que ça ne vienne pas perturber ton calcul de taille.

Si ça ne fonctionne pas là par contre je sèche.
Modifié par Karadomine (24 Aug 2008 - 22:30)