Codage css: positionnement ...

[caballo]

Bonjour ,
je suis en train d'essayer de faire ma page d’accueil à l'aide de CSS
J'ai réussit à faire à peu près ce que je voulais, mais je ne parviens pas à positionner les différents espaces comme je le voudrais. J'ai essayé de les faire bouger avec les propriétés CSS de positionnement ( relative, absolute, etc ...) mais je bloque, impossible de faire ce que je veux, en l’occurrence, agencer les différents bloques de manière à peu près uniforme en les mettant côte à côte et non les uns au dessous des auteres..

si quelqu'un à une idée :

Site : http://horse-wildtest.actifforum.com/

HTML :

Code:


<div class="navigation"><font size="5"><span style="font-family: Book Antiqua;">NAVIGATION </span></font><br><hr>
<br> <div class="bouton">
  <p>
  <a href="#">Règlement</a>
 </p>
</div><div class="bouton">
  <p>
  <a href="#">Histoire</a>
 </p></div><div class="bouton">
  <p>
  <a href="#">Présentez votre cheval</a>
 </p></div><div class="bouton">
  <p>
  <a href="#">Le Guide du RP</a>
 </p></div><div class="bouton">
  <p>
  <a href="#">Info' sur les chaleurs</a>
 </p></div></div>

<div class="img"><img src="http://i42.servimg.com/u/f42/16/62/60/92/perjur13.jpg"><p></p></div>

<br>

<div class="infos"><div style="text-align: right;" class="fondpa2"> <font style="font-family: Book Antiqua;" size="5">INFORMATIONS </font><br><hr>
05.05.11 : Ouverture de Training &amp; Breeding

11.06.11 : Un petit coup de neuf, et plusieurs nouveautées ! Rendez-vous dans la partie MAJ !

30.06.11 : Premier recensement de T&amp;B jusqu'au 07 juillet ! Les nouveaux inscrits, n'oubliez pas d'aller poster dans le suje<br><br><br></div></div>

<div class="topsite"> <font size="5"><span style="font-family: Book Antiqua;">TOP-SITE</span></font><br><hr><br> Un clic toutes les 2 heures pour plus d'amis !<br><br> <a href="http://www.root-top.com/topsite/olinalexe/in.php?ID=2497"><img src="http://img11.hostingpics.net/pics/496436ghj.jpg"><br><span style="color: Black;">• Top Sites de Wild Horses •</span></a></div>

<div class="contexte"><div style="text-align: left;"> <font style="font-family: Book Antiqua;" size="5">CONTEXTE </font><br><hr> <br>Horse-Wild est une terre sauvage, perdue au beau milieu du monde. Depuis des dizaines d'années maintenant, elle est peuplée d'équidés de toutes sortes, qui naissent et vivent sur les différentes terres du domaine. Horse-Wild est composé de quatre territoires libres, ainsi que de trois territoires dominés auquels vous pourrez vous intégrer si le dominant vous accepte. Pour nous rejoindre, inscrivez-vous au forum, puis venez vous présenter en temps que cheval. <br></div></div>

<div class="partenaires"> <font size="5"><span style="font-family: Book Antiqua;">NOS AMIS</span></font><br><hr><br> <marquee behavior="scroll" <img="" src="http://i44.servimg.com/u/f44/16/04/96/67/au_pay10.jpg"> <img src="http://i44.servimg.com/u/f44/16/04/96/67/landai10.png"> <img src="http://i44.servimg.com/u/f44/16/04/96/67/protec10.png"> <img src="http://i44.servimg.com/u/f44/16/04/96/67/5d2gao10.png"> <img src="http://i41.servimg.com/u/f41/11/11/81/88/th/nirvar11.png">
</marquee></div>




CSS :

Code:

.navigation{
background-color: #69634E;
border-left: 2px solid #3B3B32;
border-radius: 10px;
border-right: 2px solid #3B3B32;
padding: 5px;
max-width: 200px;
text align: left;
margin: 5px;
position: absolute;}




.contexte{
background-color: #69634E;
border-left: 2px solid #3B3B32;
border-radius: 10px;
border-right: 2px solid #3B3B32;
padding: 5px;
max-width: 200px;
text align: left;
margin: 5px;
height: 200px;
float: left}


.infos{
background-color: #69634E;
border-left: 2px solid #3B3B32;
border-radius: 20px;
border-right: 2px solid #3B3B32;
margin: 5px;
padding: 5px;
max-width: 200px;
height: 200px;
loat: right}

hr{
color: #3B3B32;
background-color: #3B3B32;
height: 3px;
border: 0;
}

.bouton a {
display:block;
width:150px;
line-height:50px;
text-align:center;
vertical-align:middle;
background:url(http://css.mammouthland.net/images/bouton-noir.png) no-repeat;
color:white;
text-decoration: none !important
}
.bouton a:hover {
background:url(http://css.mammouthland.net/images/bouton-noir-2.png) no-repeat;
font-variant: small-caps
}

.partenaires{
background-color: #69634E;
border-left: 2px solid #3B3B32;
border-radius: 10px;
border-right: 2px solid #3B3B32;
margin: 5px;
padding: 5px;
max-width: 200px;
height: 200px;
loat: right}

.topsite{
background-color: #69634E;
border-left: 2px solid #3B3B32;
border-radius: 10px;
border-right: 2px solid #3B3B32;
margin: 5px;
padding: 5px;
max-width: 200px;
text-decoration: none !important
left:20px;
height: 200px;
loat: right}


.img{
background-color: #69634E;
border-left: 2px solid #3B3B32;
border-radius: 10px;
border-right: 2px solid #3B3B32;
padding: 5px;
max-width: 500px;
margin: 5px;}



merci

[Invité]

Bonjour,

Essayez de remplacer votre 1er code, celuiq ue vous avez mis dans le message de la page d'accueil par celui-ci :

Code:

<div class="navigation"><font size="5"><span style="font-family: Book Antiqua;">NAVIGATION </span></font><br><hr>
    <br> <div class="bouton">
      <p>
      <a href="#">Règlement</a>
    </p>
    </div><div class="bouton">
      <p>
      <a href="#">Histoire</a>
    </p></div><div class="bouton">
      <p>
      <a href="#">Présentez votre cheval</a>
    </p></div><div class="bouton">
      <p>
      <a href="#">Le Guide du RP</a>
    </p></div><div class="bouton">
      <p>
      <a href="#">Info' sur les chaleurs</a>
    </p></div></div></br></br></br>

    <div class="img"><img src="http://i42.servimg.com/u/f42/16/62/60/92/perjur13.jpg"><p></p></div>

    </br></br>
<table>
    <td><div class="infos"><div style="text-align: right;" class="fondpa2"> <font style="font-family: Book Antiqua;" size="5">INFORMATIONS </font><br><hr>
    05.05.11 : Ouverture de Training &amp; Breeding

    11.06.11 : Un petit coup de neuf, et plusieurs nouveautées ! Rendez-vous dans la partie MAJ !

    30.06.11 : Premier recensement de T&amp;B jusqu'au 07 juillet ! Les nouveaux inscrits, n'oubliez pas d'aller poster dans le suje<br><br><br></div></div></td>

    <td><div class="topsite"> <font size="5"><span style="font-family: Book Antiqua;">TOP-SITE</span></font><br><hr><br> Un clic toutes les 2 heures pour plus d'amis !<br><br> <a href="http://www.root-top.com/topsite/olinalexe/in.php?ID=2497"><img src="http://img11.hostingpics.net/pics/496436ghj.jpg"><br><span style="color: Black;">• Top Sites de Wild Horses •</span></a></div></td></br>

    <td><div class="contexte"><div style="text-align: left;"> <font style="font-family: Book Antiqua;" size="5">CONTEXTE </font><br><hr> <br>Horse-Wild est une terre sauvage, perdue au beau milieu du monde. Depuis des dizaines d'années maintenant, elle est peuplée d'équidés de toutes sortes, qui naissent et vivent sur les différentes terres du domaine. Horse-Wild est composé de quatre territoires libres, ainsi que de trois territoires dominés auquels vous pourrez vous intégrer si le dominant vous accepte. Pour nous rejoindre, inscrivez-vous au forum, puis venez vous présenter en temps que cheval. </div></div></td>

    <td><div class="partenaires"> <font size="5"><span style="font-family: Book Antiqua;">NOS AMIS</span></font><br><hr><br> <marquee behavior="scroll" <img="" src="http://i44.servimg.com/u/f44/16/04/96/67/au_pay10.jpg"> <img src="http://i44.servimg.com/u/f44/16/04/96/67/landai10.png"> <img src="http://i44.servimg.com/u/f44/16/04/96/67/protec10.png"> <img src="http://i44.servimg.com/u/f44/16/04/96/67/5d2gao10.png"> <img src="http://i41.servimg.com/u/f41/11/11/81/88/th/nirvar11.png">
    </marquee></div></td></table>



Cordialement

[caballo]

OOOOoooooo! Merci! c'est quoi le secret ??

[Invité]

En fait j'ai rajouté des

Code:

<table></tables>

et des

Code:

<td></td>

pour placer en quelque sorte vos éléments dans un tableau. Et pour que cela ne chevauche pas vos onglets de gauche, j'ai rajouté quelques sauts de lignes (</br>).

Cordialement

[caballo]

Merci beaucoup beaucoup en tout cas ça faisait deux jours que je cherchait lol merciiii !