28173 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer image et texte

Bonjour,

premierement voila mon url temporaire
http://90plan.ovh.net/~allgamee/index.php

J'aimerais que l'image sois juste a coté du texte centrer.

code html :

<div id="banniere">
  <div id="centre">
    <img src="logo.jpg">
      <p class="infosBannieres">
	<p class="titre">
          Online Role-Playing Events Manager
	  <p class="soustitre">
    	    View all events planned for your favorites games at the       same place.
          </p>
	</p>
      </p>
    </div>
</div>

<div id="pied">
</div>


et le css

body 
{	margin: 0;	padding: 0;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:12px;	color:black; }
#centre 
{ height:70px; background-color:#FFFFFF; margin-left: 0px; margin-right: 0px;  
		vertical-align:top; width:100%; margin-left:auto; margin-right:auto; }
#pied { background-color: #FFFFFF; }
img
{display:block; float:left;}
p.infosBannieres
{ }
p.titre
{ font-size:3em; text-align:center;}
p.soustitre
{ font-size:1.5em; text-align:center;}
p
{margin-bottom:0px; margin-top:0px;}


vous savez comment faire ?
Merci
Modifié par sylvain5090 (30 Jan 2007 - 21:40)
Bonjour,

Essaye,

  <div id="centre">
    <img src="logo.jpg">
    <span class="titre">Online Role-Playing Events Manager</span>
    <span class="soustitre">View all events planned for your favorites games at the same place.</span>
    </div>
enfait,

c'est comme si l'image, et les 2 texte, serait un bloc, et ce bloc serait centrer horizontalement.

les 2 texte, devrait etre centrer horizontalement 1 par rapport a l'autre.

bref, si je mest des bloc (hi, p) pour le texte, l'image se retrouve en haut du texte.

si je me des span, l'image est a gauche, mais le 2e texte et pas centrer par rapport au texte seulement, et debute en bas de l'image.
Un point de départ basique, à améliorer :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!-- 
#header {
margin: 0 auto;
width: 50%;
background: url(logo.jpg) no-repeat left center;
padding: 0 0 0 85px;
text-align: center}
-->
</style>
</head>
<body>
<div id="header">
<h1>Online Role-Playing Events Manager</h1>
<p>View all events planned for your favorites games at the same place.</p>
</div>
</body>
</html>
Oui, ca ressemble beaucoup plus a ca.
pour le doctype etc, j'ai tendence a mettre en meme temps que les balises lorsque je suis pres pour le referencement.

je savais pas qu'on pouvait mettre left et center à la fois, dans la propriété background.

par contre, si la taille du texte change ca peut faire etrange a l'affichage.
le logo sera decaler a gauche.

je vais voir si je peux ameliorer la situation.

Merci
sylvain5090 a écrit :
Oui, ca ressemble beaucoup plus a ca.
pour le doctype etc, j'ai tendence a mettre en meme temps que les balises lorsque je suis pres pour le referencement.


Attention, les styles CSS ne sont pas interprétés de la même façon par les navigateurs lorsque le doctype n'est pas présent Smiley cligne

sylvain5090 a écrit :

je savais pas qu'on pouvait mettre left et center à la fois, dans la propriété background.


left = position horizontale, center = position verticale
Modifié par Laurent Denis (30 Jan 2007 - 19:43)
Salut,

si tu veux garder l'image dans le code source html, alors partant de 

<div id="header">

<img src="logo.jpg" alt="" width="" height="" />

<h1>Online Role-Playing Events Manager</h1>

<p>View all events planned for your favorites games at the same place.</p>

</div>


Une css comme :

#header {
text-align:center;
}
#header h1 {
display:inline;
}


devrait convenir je pense.
Modifié par clb56 (30 Jan 2007 - 20:35)
Oui le ick si on garde l'image dans le html, cest que le 2e texte apparait sous l'image, dand ton exemple clb56, le paragraphe n'est pas centrer par rapport au <h1> mais a la page.

donc je vais employer la solution de Laurent, de toute facon, le seul ick a sa solution cest que l'image "decale" du texte selon la grosseur de la police, mais quand tu est rendu a une grosseur de 26 30 caractere pour du texte normal... de plus ca reste lisible.

Merci encore une fois
sylvain5090 a écrit :
Oui le ick si on garde l'image dans le html, cest que le 2e texte apparait sous l'image, dand ton exemple clb56, le paragraphe n'est pas centrer par rapport au <h1> mais a la page.


Ah oui tiens Smiley smile

Mais si on rajoute la largeur de l'image (75px) à gauche du contenu de <p>

#header p {

padding-left:75px;

}


Alors tout rentre dans l'ordre non ?
hehe Smiley cligne

J'ai vraiment pas l'ame d'un graphiste, deja faire un design sur photoshop ou firework ca me prend pas mal de temps, le mettre en css... encore plus.

parfois je me dis "vive les tableaux" Smiley cligne je connais pas de graphiste qui fasse ca en css, ca doit couter pas mal plus cher Smiley cligne
sylvain5090 a écrit :
hehe Smiley cligne

J'ai vraiment pas l'ame d'un graphiste


Ben moi non plus mais comme il parait que l'âme c'est immortel alors je me dis que j'ai tout mon temps...

ça aide...
a écrit :
parfois je me dis "vive les tableaux" Smiley cligne je connais pas de graphiste qui fasse ca en css, ca doit couter pas mal plus cher Smiley cligne

En fait c'est completement l'inverse, le graphisme avec les tableaux c'était horrible! complétement ingérable! des milliers de lignes de td tr table pour rien. Maintenant avec les css ont respire. C'est fluide , c'est joli c'est maniable... et c'est moins cher!
Sujet clos
Aller à