Codage css: positionnement ...

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Codage css: positionnement ...

Message par caballo le Jeu 7 Juil 2011 - 11:11

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 Very Happy

caballo
*

Messages : 48
Inscrit(e) le : 24/07/2005

caballo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage css: positionnement ...

Message par Invité le Jeu 7 Juil 2011 - 11:26

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage css: positionnement ...

Message par caballo le Jeu 7 Juil 2011 - 11:30

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

caballo
*

Messages : 48
Inscrit(e) le : 24/07/2005

caballo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage css: positionnement ...

Message par Invité le Jeu 7 Juil 2011 - 11:32

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

Cordialement

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage css: positionnement ...

Message par caballo le Jeu 7 Juil 2011 - 11:35

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

caballo
*

Messages : 48
Inscrit(e) le : 24/07/2005

caballo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum