[Résolu] Position absolute+ display inline + IE = bug

lu les gens, voila je voudrais mettre cote à cote 2 <div> et pour ce faire j'utilise la propriété display: inline.

Je voudrais que ma balise de droite soit collée à droite de mon conteneur, alors je lui ai mis un attribut position: absolute et un right:0 pour qu'elle soit bien positionnée.

Aucun probleme sous firefox mais sous IE il se passe quelque chose d'etrange.
Le contenu de ma balise de droite est un texte et les mots sont tous mis à la ligne, comme une liste si vous voulez.

.signature{
		text-align: left;
		font-size: 0.8em;
		color: #A6A6A6;
		display: inline;
		}
		
		.titre_droite{
		text-align: right;
		color: #ff4606;
		display: inline;
		font-size: 0.8em;
		position: absolute;
		right: 275px;
		}

merci pour votre aide
Modifié par Sk4pis0 (28 Jul 2006 - 10:33)

up

svp j'ai besoin d'aide là

Bonjour,

Un élément en position absolue ne peut pas être en display:inline. L'un neutralise l'autre.

Ce montage semble d'autre part un peu curieux. Mais pour en dire plus, il faut que tu mettes une url, ou à défaut, suffisamment de code HTML et de code CSS pour avoir le contexte.

Sk4pis0 a écrit :
svp j'ai besoin d'aide là

Hello,

Dans ce cas, comme l'indiquent les Règles que tu as acceptées en t'inscrivant, mieux vaut mettre toutes les chances de ton côté :

Règle 13 a écrit :
Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème. La règle est simple : il faut toujours donner un maximum de détails pour être sûr d'avoir une chance que les autres comprennent et aident.

Modifié par Raphael (21 Jul 2006 - 11:23)

(autant pour moi Raphael mais j'avait tout mis en ligne, désolé)

ha c'est une info interessante que tu me donnes là l'ami.

voici une url pour que vous comprenniez mieux.

http://skalpl.free.fr/test/

ce que je veux c'est faire cohabiter les deux div qui se trouve dans les chapo des news. concretement, il s'agit d'avoir a gauche l'auteur de la news avec la date et à droite, le numéro de la news.

j'espere que vous voyez ce que je veux dire.
Modifié par Sk4pis0 (24 Jul 2006 - 09:01)

up

Bonjour,

Un vieil article de Mark Newhouse traduit par les pompeurs te dira tout ce qu'il faut. Faire une recherche sur http://pompage.net/articles .

En effet, le tuto sur les balises float m'a aidé à faire ce que je voulais, c'est assez complexe pour comprendre le mécanisme, surtout l'attribut clear: both que j'ai jamais utilisé.

Sinon vous remarquerez que j'ai un léger décalage vers la droite du titre de la news entre IE et firefox. j'ai pourtant mis mes balises avec des padding: 0 et margin : 0.

Si vous pouviez m'aider à ce niveau.

le code de la page est :

<div class=\"chapo\">
		<div class=\"spacer\"></div>
		<div class=\"row\">
			<span class=\"left\">
				
				<span class=\"icone\"><img src=\" img/icon/".$rubrik.".jpg\"/></span>
				
				<div class=\"titre_contenu\"><a href=\"index.php?rub=commentaires&id_news=$id_news\">".$titre."</a></div>
				
				<div class=\"signature\">» <font color=\"#ff4606\"><b>".$nom."</b></font> ".$date."</div>
				
			</span>

			<span class=\"right\"># ".$nb_n."</span>
		</div>
		<div class=\"spacer\"></div>
	</div>

et le css des différent élément:

.chapo{
		padding: 2px;
		background: #2E3742 ;
		border-bottom: 1px solid #090C10;
		clear: both;
		}

.row {
		clear: both;
		}
 
		div.spacer {
	 	clear: both;
		}
	 
		div.row span.left {
	 	float: left;
	 	text-align: left;
		}

		div.row span.right {
		padding: 15px 10px 0 0;
		color: #ff4606;
		font-size: 0.8em;
	 	float: right;
	 	text-align: right;
	 	}

.titre_contenu{
		color: #fff;
		font-size: 1.3em;
		font-weight: bold;
		padding: 5px 0 0 0;
		margin:0;
		}

.signature{
		text-align: left;
		font-size: 0.8em;
		color: #A6A6A6;
		padding: 0;
		margin:0;
		}

.icone{
		padding:2px 10px 2px 2px;
		float: left;
		margin: 0;
		}

merci d'avance, vous pouvez toujours voir ce que ca donne là : http://skalpl.free.fr/test/

up