Discussion :

[ROUGEXIII]

Bonjour,

Je réalise une bannière pour mon site HTML + CSS

Une image vaut mieux que des mots voilà ce que je souhaite obtenir:


Pour l'instant je le mieux que je suis arrivé à obtenir c'est le texte "blablabla" centré verticalement par rapport à l'image mais pas centré horizontalement par rapport à la page-image.

Voilà votre aide est la bienvenue,
Merci.

[Atomya Rise]

Bonjour,

Ce serait bien si tu pouvais nous mettre ce que tu as déjà fais... Cela permettrais en même temps de savoir ce que tu utilises pour définir la largeur de ton contenu.. (contenu fixe ou pas)

[ROUGEXIII]

Bonjour,

Ce serait bien si tu pouvais nous mettre ce que tu as déjà fais... Cela permettrais en même temps de savoir ce que tu utilises pour définir la largeur de ton contenu.. (contenu fixe ou pas)

Bonjour,
Alors voilà:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="logo-titre"><img src="Images/Logo.png" alt="" />
<span>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</span>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.logo-titre img, .logo-titre span
	{
	vertical-align: middle;
	display: inline-block;
	}
 
.logo-titre span
	{
	padding-left: 1%;
	text-align: center;
	}

Je préfère que ce ne soit pas fixe (avec des %)

Merci!

[Atomya Rise]

Si c'est en pourcentage, alors... heuuu... je n'ai qu'une solution pour le moment qui me viens à l'esprit

Les tableaux

Un tableau avec une largeur à 100%, possédant 1 seules cellule et 2 colonnes.
Le tableau aura un width de 100% mais une hauteur fixe selon la hauteur de ton image.
La première colonne avec une largeur fixe qui contiendra ton image, et la deuxième colonne qui possédera un align="center" et un valign="middle"...

C'est moche, mais bon... le soucis est que faire des choses qui ne sont pas fixe sont difficile à gérer selon les différente taille d'écran car 20% sur un écran en 22 pouces sera complétement différent sur un écran en 17 pouces....

[ROUGEXIII]

Si c'est en pourcentage, alors... heuuu... je n'ai qu'une solution pour le moment qui me viens à l'esprit

Les tableaux

Un tableau avec une largeur à 100%, possédant 1 seules cellule et 2 colonnes.
Le tableau aura un width de 100% mais une hauteur fixe selon la hauteur de ton image.
La première colonne avec une largeur fixe qui contiendra ton image, et la deuxième colonne qui possédera un align="center" et un valign="middle"...

C'est moche, mais bon... le soucis est que faire des choses qui ne sont pas fixe sont difficile à gérer selon les différente taille d'écran car 20% sur un écran en 22 pouces sera complétement différent sur un écran en 17 pouces....

Ben écoute si il n'y a pas mieux pourquoi pas!
Sinon je pensais aussi le faire avec des float block?
Les tableaux c'est simple ou ça va faire beaucoup de code?
Tu ferais deux colonnes avec la première cellule contenant l'image de taille fixe et dans la deuxième le texte?

Dans mon code je ne comprends pas pourquoi il ne prend pas le text-align.... Une idée?

[Atomya Rise]

Dans ton code, ton text-align: center ne fonctionne pas, car tu ne définis pas de width à ton span...

Ensuite, d'après ton schéma le texte que tu veux y mettre est très court, un titre je suppose ?

Si oui, alors les floats ne changerons rien, tu aura toujours un soucis au niveau de la largeur selon les différents type d'écran.

voici ce que j'aurais fais :

Sur un 22 pouces: http://www.developpez.net/forums/att...1&d=1315128217

Sur un 11 pouces : http://www.developpez.net/forums/att...1&d=1315128224

Ce qui donne ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<table cellspacing="0" cellpadding="0" border="1" align="center" width="100%" height="90px">
		<tr>
			<td width="218px" height="90px"><img src="logo.gif" border="0"></td>
			<td align="center">blabla blablabla blabla bla<br />blablabla blabla bla</td>
		</tr>
	</table>

Tout simplement. Là j'ai ajouté un border au tableau afin que tu te visualise mieux la chose....