ajuster la position de block <div>

ajuster la position de block <div> - HTML/CSS - Programmation

Marsh Posté le 29-12-2006 à 18:29:51    

Salut,  
Je voudrais placer en bas de ma page 3 liens sur une même ligne:  
un à droite pour retourner à la page précédente  
un au milieu pour aller au sommaire  
un à gauche pour aller à la page suivante.  
Le plus simple serait d'utiliser un tableau, mais je crois que cela n'est pas recommandé. Je me suis donc tourné vers les <div> mais je n'arrive pas à les positionner correctement.  
Quelqu'un pourait-il m'aider?

Reply

Marsh Posté le 29-12-2006 à 18:29:51   

Reply

Marsh Posté le 29-12-2006 à 23:31:30    

<ul class="liensbas">
  <li class="first"><a href="#">lien gauche</a></li>
  <li class="last"><a href="#">lien gauche</a></li>
  <li><a href="#">lien gauche</a></li>
</ul>
 
CSS :  
.liensbas {text-align:center;}
.liensbas .first {float:left;}
.liensbas .last {float:right}
 
 
 ????

Reply

Marsh Posté le 30-12-2006 à 11:50:00    

Un exemple complet en suivant les indications de Gatsu35.

<html>
<head>
<style type="text/css">
.liensbas {text-align:center; list-style-type:none; margin:0;}  
.liensbas .first {float:left;}  
.liensbas .last {float:right}  
</style>
</head>
<body>
Test de 3 blocs alignés
<p>
<ul class="liensbas">  
  <li class="first"><a href="#">lien gauche</a></li>  
  <li class="last"><a href="#">lien droit</a></li>  
  <li><a href="#">milieu</a></li>  
</ul>  
</body>
</html>

Reply

Marsh Posté le 30-12-2006 à 12:42:01    

olivthill a écrit :

Un exemple complet en suivant les indications de Gatsu35.

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .liensbas {text-align:center; list-style-type:none; margin:0;}
  5. .liensbas .first {float:left;}
  6. .liensbas .last {float:right}
  7. </style>
  8. </head>
  9. <body>
  10. Test de 3 blocs alignés
  11. <ul class="liensbas">
  12.   <li class="first"><a href="#">lien gauche</a></li>
  13.   <li class="last"><a href="#">lien droit</a></li>
  14.   <li><a href="#">milieu</a></li>
  15. </ul>
  16. </body>
  17. </html>



Reply

Marsh Posté le 01-01-2007 à 12:24:46    

Merci beaucoup,
ça fonctionne impec. Je n'aurais jamais pensé à utilisé une liste de cette façon.
J'en profite pour vous souhaiter onne année
 :hello:

Reply

Marsh Posté le 01-01-2007 à 16:28:28    

pourquoi c'est pas conseillé de faire ça dans un tableau ?

Reply

Marsh Posté le 04-01-2007 à 07:13:12    

parce qu'un tableau sert à mettre des données dedans et non à faire une mise en page. Utiliser un tableau serait le détourner de son usage.

Reply

Marsh Posté le 04-01-2007 à 10:02:47    

ok, pas faux, j'avais jamais vu les choses sous ce point de vu, c'est interessant :o

Reply

Marsh Posté le 04-01-2007 à 13:35:28    

@Naeco :  
c'est LE grand débat parmi les Web Designers.  
 
Les recommandations W3C et ceux qui les respectent, dont je (tente de) faire partie, abhorrent les tableaux pour la mise en page... alors qu'un (trop) grand nombre de site les utilisent encore à ce dessein ... comme aux glorieux temps du début de l'explosion Internet (1996+)  
 
Si tu veux donc être un codeur sérieux, la SEULE raison pour laquelle tu vas employer un tableau c'est comme serialplayer le dit, pour présenter des données, par exemple issues d'une base de données (usage le plus courant).
 
Sur le dernier site que je suis en train de coder (pour des potes) je tente de faire l'uber geek et de ne plus utiliser aucun mais aucun tableau, eh bien franchement j'ai du mal sur certains points, surtout sur la compatibilité IE/FF avec la gestion des DIVs dans l'espace ... mais je lutte, docteur, je lutte ! :D
 
Plus d'infos sur le sujet :  
http://designorati.com/web-design/ [...] es-so-bad/
(j'adore l'extrait suivant :

Citation :

Believe it or not, when I asked the question to a web designer: “Why are tables bad?’ I couldn’t get a straight answer. The answer I got was: “They are not made for layout.” I said to myself that one could design with tables, so why are they not meant for it?

)  :D
 
http://css-discuss.incutio.com/?page=TablesVsDivs
 
http://www.imarc.net/blog/76/div_vs_table_battle_2k6/
 
 

Reply

Marsh Posté le 05-01-2007 à 10:01:46    

C'est noté, merci d'avoir pris le temps d'expliquer :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed