28172 sujets

CSS et mise en forme, CSS3

Problème de mise en forme

Bonsoir à tout le monde,

J'ai un problème de positionnement de texte dans une div, sur lequel je galère.

Je vous mets une image, j'ai du mal à l'expliquer :

upload/25983-0.gif

j'ai mis des flêches pour indiquer le positionnement que j'aimerais avoir.

En gros, je voudrais que mon texte le plus long soit centré dans ma div, et que les autres textes soient calés sur celui-ci ( au niveau du positionnement horizontal ) si j'ai une seule colonne.

Si j'ai plusieurs colonnes comme dans l'image où j'en ai 2, même combat, sauf que j'aurais une largeur de 50% à appliquer sur mes colonnes.

Je vous livre le code avec une div contenant 2 colonnes, et une autre div contenant une seule colonne.

Merci d'avance.

<!doctype html>
<html>
<head>
	<title>test</title>
	<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style>	

* 	{
	padding:0;
	margin:0;
}
	
body {
	width: 100%
}

span  {
	font: 20px comic sans ms;
	color: #aa0000; 
	float: left;
}

</style>

</head>

<body > 

<script language="Javascript">
</script>

<form>

	<div id="centrage" style="position:absolute;border:2px solid red;z-index:20;width:60%;height:30%;left:20%;top:10%">
	
		<div style="height:20%">
		</div>
		<span id="sp1" style="text-align:center;width:50%">1° span</span>
		<span style="text-align:center;width:50%">Deuxième span</span>
		</br>
		<span style="text-align:center;width:50%">Troisième span</span>
		<span style="text-align:center;width:50%">4 span</span>	
	</div>	

	<div id="centrage2" style="position:absolute;border:2px solid red;z-index:20;width:60%;height:30%;left:20%;top:50%">
	
		<div style="height:20%">
		</div>
		<span id="sp5" style="text-align:center">Premier span</span>
		<span style="text-align:center">Second span qui sera pas aligné</span>
	</div>	

</form>
</body>
</html>

Modifié par boonzar (02 Jan 2010 - 23:29)
L'élément span est un élément en ligne (si tu ne sais pas ce que ça veut dire, je te conseille de lire ce tutoriel) : les dimensions définies (comme la largeur) n'y ont aucun effet, à moins de définir la propriété CSS display à block ou à inline-block.
Salut Victor,

Oui, je sais ce qu'est un élément en ligne. J'ai mis des spans, mais j'ai fais pas mal d'essai avec des paragraphes par exemple, et cela sans succès.


Je vous passe aussi mon bout de css que j'utilise :

span {
font: 20px comic sans ms;
color: #aa0000;
float: left;
}

Le problème principal est déjà, que je ne sais quel élément est le plus adapté pour résoudre mon problème, ni quel attribut à utiliser si besoin au niveau du css.

Merci
Modifié par boonzar (02 Jan 2010 - 15:39)
boonzar a écrit :
quel attribut à utiliser si besoin au niveau du css

En CSS, on ne parle pas d'attributs, mais de propriétés. Smiley cligne
Salut,

Au passage, en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Et utilisant des DIV à la place des span ?

A quoi correspond la DIV vide ? 

<div style="height:20%"></div>


Si j'ai bien compris tu as 2 colonne et tu veux que 2 paragraphes soit indenté ? (désolé pas trouvé mieux pour le terme).

Un truc du genre 


<div class="col1">
   <p style="padding-left:20px;">1er paragraphe</p>
   <p>2ème paragraphe</p>
</div>

<div class="col2">
   <p>3eme paragraphe</p>
   <p style="padding-left:20px;">4ème paragraphe</p>
</div>


Pour le colonnage je te laisse consulter les tutos :
Ici,là et encore ici

Je ne mets que des liens internes à Alsa mais Google t'en fourniras bien d'autres
Modifié par Maki (07 Jan 2010 - 13:42)
Sujet clos
Aller à