28172 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner une balise à gauche + une à droite sur la meme ligne

bonjours!
voilà je suis en train de faire mon premier site internet pour des amis qui veulent mettre leur catalogues de disk en ligne.

je chercher a metre le prix sur la meme ligne que le nom de l'album mais je 
veux que le prix soit aligner a droite.

j'ai bidouiller une capture d'ecran pour mieux expliquer :
 http://poivron.org/~saman/imagehosting/forum/Capture-Falafel%20Paradise%20Distro%20do%20it%20yourself%20de%20dijon-liens%20-%20Iceweasel.png.png
 

voici ce que j'ai pour l'instant comme code:

html:
[code]<div class="cologne_centrale">
				<a id="A"></a>
				<h1>A</h1>
				<h2 class="artiste">Aguirre<br /></h2>
				<p class="genre">emo-core <br /></p>
				<p class="album">[CD] Le poids de la fonte</p>
				<p class="prix">7/8€<br /></p>
				<p class="description">Emocore péchu qui rock avec des textes en français.
				</p>
				</div>

css :
body
		{
		background-image:  url(files/background.png) ;
		background-attachment : fixed;
		}

h1	      {
		text-decoration: underline blink; 
		}

p	       {
		text-align: justify ; 
		font-size: 20px ;
		}

.cologne_centrale
	{
	font-family: helvetica; 
	width: 500px;	
	margin-left: auto;
	margin-right: auto;
	}


/* style de la page catalogue */
.alphabet
	{
	display : inline;
	}
.artiste
	{
	display : inline;
	}
.genre
	{
	display : inline;
	}
.album
	{
	display : inline;
	}
.prix
	{
	text-align : right;
	display : inline;
	}
.description
	{
	display : inline;
	}


si il y a plein de display : inline ; suivis d'un retour c'est que je veux pas d'espace entre les ligne et je veux pouvoir apres apliquer des taille de police et autre attribut different à chaque classe.


voilà merci !
Modifié par Saman (08 Sep 2008 - 09:28)
Hello Saman et bienvenue Smiley smile ,

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).

upload/1-code.gif

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

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
Merci pour la mise en page. Smiley smile

Hem... plutôt que de rajouter des <br /> et des display:inline ce serait plus logique de jouer sur le margin des éléments.

Pour faire une ancre accessible il vaut mieux mettre :
<a href="#A" name="A" id="A"></a>


Sinon ton DIV cologne_centrale (ce serait pas plutôt colonne ? Smiley biggol ) a toutes les chances d'être unique et autant que ce soit un id plutôt qu'une class.

Et pour l'alignement tu pourrais utiliser un float. Ce qui donne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen"><!--
body {
	background-image:  url(files/background.png) ;
	background-attachment : fixed;
}
h1 {
	text-decoration: underline blink; 
}
p {
	text-align: justify ; 
	font-size: 20px ;
}
#colonne_centrale {
	font-family: helvetica; 
	width: 500px;	
	margin-left: auto;
	margin-right: auto;
}
#colonne_centrale h2, #colonne_centrale p {
	margin: 0;
}
.album {
	text-align: right;
}
.titre {
	float: left;
}
--></style>
</head>
<body>
<div id="colonne_centrale">
	<a href="#A" name="A" id="A"></a>
	<h1>A</h1>
	<h2 class="artiste">Aguirre</h2>
	<p class="genre">emo-core</p>
	<p class="album"><span class="titre">[CD] Le poids de la fonte </span><span class="prix">7/8€</span></p>
	<p class="description">Emocore péchu qui rock avec des textes en français.</p>
</div>
</body>
</html>

Le mieux serait peut-être de reprendre du début. Un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

Bonne continuation Smiley smile .
Modifié par Heyoan (07 Sep 2008 - 23:08)
merci beaucoups!
et oui en effet je vais continuer d'eplucher les tutos,la fac et mes bouquins !
Sujet clos
Aller à