Positionement linéaire d'une liste avec texte

Salut
comment en place un texte à gauche d'une liste organiser linéairement de façon ,que le tous soit sur la même ligne.
j'ai essayer mais le texte ce positionne à droite de la liste?(le texte cible est entre les balises <P></P>)

<div id="footer">
<ul id="stay-connected-left"><b>&nbsp;Ceci est le pied de page</b>

<li id="facebook"><a href="http://www.facebook.com/"><img height="32" width="32" border="0" align="top" "title="facebook" alt="facebook" src="facebook.png"/></a></li>	

<li id="tweeter"><a href="http://www.tweeter.com/"><img height="32" width="32" border="0" align="top" title="tweeter" alt="tweeter" src="Twitter.png" /></a></li> 

<li id="linkln"><a href="http://www.linkln.com/"><img height="32" width="32" border="0" align="top" title="linkln" alt="linkln" src="linkln.png" /></a></li> 
</ul> 
		
</div>

Modifié par yotta (12 Apr 2011 - 03:15)

Bonjour,
je pense qu'un peu de lecture ne fera pas de mal.

Structure HTML et rendu CSS des balises : bloc et en-ligne
Initiation au positionnement en CSS
Initiation au positionnement CSS (partie 2)
Guide de survie du positionnement CSS

merci bien,j'ai fais comme suite et ça marche bien:

<div id="footer">

<ul id="stay-connected-left"><p class="float-left">fellow us on</p>
<li id="facebook"><a href="http://www.facebook.com/"><img height="32" width="32" border="0" align="top" "title="facebook" alt="facebook" 
src="facebook.png" /></a></li> 

<li id="tweeter"><a href="http://www.tweeter.com/"><img height="32" width="32" border="0" align="top" title="tweeter" alt="tweeter" 
src="Twitter.png" /></a></li> 

<li id="linkln"><a href="http://www.linkln.com/"><img height="32" width="32" border="0" align="top" title="LinkedIn" alt="LinkedIn" 
src="LinkedIn.png" /></a></li> 

</ul> 

	</div>

CSS

#stay-connected-left .float-left {float:left;margin-top:5px; margin-right:15px}
#stay-connected-left  {list-style: none; }
#stay-connected-left li {float:left;margin-right:5px;}

Rapidement: le code HTML est invalide. Il faudrait mettre le paragraphe AVANT la liste UL. (Une liste ne peut contenir que des items de liste.)

Par ailleurs, ça marche avec float:left, mais tu peux sans doute obtenir un résultat correct avec display:inline également. Dans ce cas il faudra passer en display:inline à la fois ton paragraphe, ta liste et tes items de liste.

Je rajouterai qu'il n'est pas conseillé de nommer une classe "float-left". Si tu veux changer le code CSS pour cet élément, tu es obligé de changer la classe (ou bien tu te retrouves avec des infos contradictoires).

Pour finir, c'est "follow us", pas "fellow us".

merci pour vos remarques instructives fvsch , mais je n'est pas bien compris la dernière

a écrit :
Je rajouterai qu'il n'est pas conseillé de nommer une classe "float-left". Si tu veux changer le code CSS pour cet élément, tu es obligé de changer la classe (ou bien tu te retrouves avec des infos contradictoires).

yotta a écrit :
merci pour vos remarques instructives fvsch , mais je n'est pas bien compris la dernière

Simplement, tu devrais changer le nom donné à la classe de l'élément p :

<p class="float-left">fellow us on</p>

Pour (par exemple) :

<p class="titreSuivre">follow us on</p>

(d'ailleurs, on écrit pas "fellow", mais "follow"... à moins que cela soit un jeu de mot ? Et encore, il n'aurait pas vraiment de sens utilisé de cette manière)

salut
j'ai mis une ligne au pied de page pour faire une séparation entre deux bloque, j'ai essayer de mettre une ligne entre les deux bloques (en jouant sur "margin-top" mais, sans succès).
est ce que vous pouvez me donner un coup de main?
merci

<div id="footer">
	
<p class="followus">follow us on</p>
<ul id="stay-connected-left">
    <li id="facebook"><a href="http://www.facebook.com/"><img height="32" width="32" border="0" align="top" "title="facebook" alt="facebook" src="facebook.png" /></a></li> 
    <li id="tweeter"><a href="http://www.tweeter.com/"><img height="32" width="32" border="0" align="top" title="tweeter" alt="tweeter" src="Twitter.png" /></a></li> 
    <li id="linkln"><a href="http://www.linkln.com/"><img height="32" width="32" border="0" align="top" title="LinkedIn" alt="LinkedIn" src="LinkedIn.png" /></a></li> 
</ul> 

<div id="bottomline">
&copy; 2011 Company Name</br>
</div>

</div>

CSS

#stay-connected-left .followus {float:left;/*margin-top:5px;*/ margin-right:5px}
#stay-connected-left  {list-style: none; margin-top:2px}
#stay-connected-left li {float:left;margin-right:2px;margin-top:5px;}


#bottomline{
  background-color: #FFFFFF;
  border-bottom: 1px solid #B3B3B3;
  font-size: 15px;
  /*height: 45px;*/
/* margin-bottom: 10px;*/
}

yotta a écrit :
est ce que vous pouvez me donner un coup de main?

Sans savoir ce que tu veux faire au juste, non.
Quels éléments doivent apparaitre en haut, en bas, à gauche, à droite, au centre? Avec quelle séparation visuelle? On peut voir une image du design visé?

je veux séparer les images qui représente des liens pour des sites(la partie haut) et la mention "2011 company name" (la partie qui doit ce placer au-dessous de la ligne) avec une ligne.

PS: la partie blanche de l'image représente le pied de page.