28234 sujets

CSS et mise en forme, CSS3

[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
upload/5468-ScreenShot0.png
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 Smiley cligne
Modifié par ymhotepa (07 Mar 2006 - 16:43)
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é Smiley decu . 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 Smiley ravi

bonne fin de journée a vous !!!
Sujet clos
Aller à