[Résolu]Alignement <DIV>

Bonjour tout le monde,

Voila je vous expose mon probleme : avec un ami on voudrais creer notre propre blog...pour se faire on a une partie en PHP et l'autre en CSS.. c'est la premiere fois que l'on fait du CSS et on a eu beau chercher on a pa trouver de solution claires...

Voila donc
Code Html :

<div class="article">

				
	<div class="nom_date"><div class="nom_art">Nom Article</div><div class="date">10/10/2006 10:30:12</div></div>
				

		<div class="texte">
		<p>Lorem ipsum dolor....
            </div>
</div>              

Code CSS :

.article
	{
	padding: 5px;
	background-color: #cbc3a6;
	width: 650px;
		  
	border: 1px solid #a29669;
	position: relative;
	left: 50%;
	margin-left: -325px;
	}
	
.nom_date
	{
	border: 1px solid #000000;
	}
	
.nom_art
	{
	background-color: #a29669;
	width: 70px;
	height: 30px;

	}
.date
	{
	background-color: #efebdf;
	width: 160px;
	height: 30px;

	}
.texte
	{
	font-size: 15px;
	font-family: arial;
	text-align: justify;
		
	}

voila, donc je m'explique la boite nom_date doit contenir nom_art et date mais je souhaiterais les mettre sur la meme ligne ( nom_art a gauche l'autre a droite ) mais j'ai tt essayer et tt lu pour y parvenir mais en vain ... FLOAT…. MARGIN … etc
J’espere que ce seras asser clair
Merci d’avance
Et si vous voulez me contacter pour mieu m’expliquer , MSN : noctiss@gmail.com
Modifié par Noctiss (07 Mar 2006 - 17:11)

avec un float ca doit pouvoir se faire, imperatif implementer le fllottant en 1er dans le code html

Excuse moi Jp94 mais je ne sais comment implenter le float ds le code Html

voila un dérivé de se que j'ai tester :

Code CSS:

.nom_date
	{
	border: 1px solid #000000;
	}
	
.nom_art
	{
	position:relative;
	background-color: #a29669;
	width: 70px;
	height: 30px;
	float:left;
	}
.date
	{
	position:relative;
	background-color: #efebdf;
	width: 160px;
	height: 30px;
	float:right;
	}

et en fin de compte les deux boite sortent de la boite 'nom_date'...
Merci

reprends le premier code css que tu as mis sur le post et modifie

.nom_art

	{

	background-color: #a29669;

	width: 70px;

	height: 30px;

float:left; 
margin-right:50px;

	}

j'ai miis un margin histoire de ne pas les coller

Voila quand je met comme tu as dit

.nom_art



	{

 

	background-color: #a29669;



	width: 70px;



	height: 30px;



        float:right; 

        margin-right:50px;



	}

et j'obtient pas ce que je veux

quand je le met pour la classe .date

Modifié par Noctiss (07 Mar 2006 - 16:30)

Hello,

Voici une autre méthode qui te permet d'aligner à gauche ton bloc nom_art et à droite ton bloc date :

.nom_date
	{
	border: 1px solid #000000;
	height: 30px;
	}
.nom_art
	{
	background-color: #a29669;
	width: 80px;
	height: 30px;
	float:left; 
	}
.date
	{
	background-color: #efebdf;
	width: 160px;
	height: 30px;
	float: right;
	}

Le height: 30px; est très important car sans lui le bloc .nom_date n'aurait pas de hauteur vu que les éléments nom_art et date n'interfèrent plus sur sa hauteur car ils sont désormais sortis du flux.

J'éspère que cela fonctionnera correctement
Modifié par ymhotepa (07 Mar 2006 - 16:43)

voila ce que j'obtiens avec ton code.
j'ai ajoute un <p> en dessous pour etirer un sur explorer qui n'affiche pas les hauteurshttp://www.jp949.info/sand_fichiers/index.htmlici[code]

Désolé, mais c'est normal que cela ne fonctionne pas puisque tu n'as pas du tout utilisé ce que je t'ai donné . Je ne peut donc pas t'aidé plus si tu utilises une autre méthode. Je pense que tu devrais lire ce que les autres te réponde avant de te lancer tête baissée dans le code.

Merci a tout le monde, j'ai réussi grace a jp94 mais je te remerci aussi ymhotepa... vous m'avez bien aidé je peux grace a vous continuer

bonne fin de journée a vous !!!