Sujets similaires

Sujet: [Résolu] Problème de mise en forme Mer 04 Nov 2009, 16:21

Bonjour à toutes et à tous !!

Tout d'abord, je tiens à signaler que je débute en CSS et HTML : je ne m'y suis mis que dimanche xD Mais j'ai quand même beaucoup travaillé dessus =) Or, je commence à bloquer et j'ai beau chercher depuis de longues heures la solution à mon souci, je n'y parviens pas. Alors je me décide enfin à faire appel aux professionnels ;D ((Au fait, c'est pour une futur page d'accueil :O))

Mon souci est le suivant : avec les codes HTML et CSS, j'obtiens ça :

Spoiler:

Or, je souhaiterais que la catégorie "partenaires" soit au même niveau que le reste. Je vous donne donc quelques éléments : La partie en rouge, je l'ai mise en un tableau composé uniquement d'une cellule par ligne. Celle en orange est composée de deux titres et de deux paragraphes. La dernière partie, celle qui me pose problème, est composée de 3 autres divisions. Est-ce que le souci vient de là ? Je n'en sais rien.... J'aurai besoin de vos lumières !! x) S'il y a besoin d'autres infos, je suis apte à les donner !! =D

Merci de prendre le temps pour ce travail.... Dur ? =O

Sujet: Re: [Résolu] Problème de mise en forme Mer 04 Nov 2009, 19:13

Possibilité d'obtenir le code HTML et CSS de ta page d'accueil ? =)

Sujet: Re: [Résolu] Problème de mise en forme Jeu 05 Nov 2009, 14:41

Bien sûr !! Les voici : ((Oulalalalalaaaaa.... Comme c'est long.... Je suis désolé de vous faire subir ça =S))

Spoiler:

Code:: <!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" >
<link rel="stylesheet" media="screen" type="text/css" title="page01" href="Page01.css" />
<body>
<div id="en_tete">
</div>
<div id="liens_rapides">
   <table><tr>
      <td><a href="http://berry-town.keuf.net/avant-tout-f1/reglement-general-t3.htm" title="Passage obligatoire !!" class="reglement">Règlement</a></td>
      <td><a href="http://berry-town.keuf.net/gallery/index.htm" title="Pour te trouver un avatar" class="galerie">Galerie</a></td>
      <td><a href="" title="Quel temps fait-il sur Berry Town ?" class="météo">Météo</a></td>
      <td><a href="http://berry-town.keuf.net/avant-tout-f1/aide-t1.htm" title="Si tu ne sais plus où aller" class="aide">Chemin à suivre</a></td>
   </tr></table>
</div>
<div id="staff">
   <table>
      <caption>Staff</caption>
      <tr><td><img src="http://nsm02.casimages.com/img/2009/11/04//091104081643720774786617.png" alt="boow"/></td></tr> 
      <tr><td><a href="http://berry-town.keuf.net/profile.forum?mode=viewprofile&u=1" title="Son profil" class="profil_boow">Profil</a></td></tr>
      <tr><td><img src="http://nsm02.casimages.com/img/2009/11/04//091104081644720774786619.png" alt="rei" /></td></tr> 
      <tr><td><a href="http://berry-town.keuf.net/profile.forum?mode=viewprofile&u=3" title="Son profil" class="profil_rei">Profil</a></td></tr>
      <tr><td><img src="http://nsm02.casimages.com/img/2009/11/04//091104081643720774786618.png" alt="kimano" /></td></tr> 
      <tr><td><a href="http://berry-town.keuf.net/profile.forum?mode=viewprofile&u=4" title="Son profil" class="profil_kimano">Profil</a></td></tr>
      <tr><td class="you"><a href="http://berry-town.keuf.net/avant-tout-f1/recherche-de-moderateurs-t35.htm"><img src="http://nsa10.casimages.com/img/2009/11/04/091104084902278594.png" alt="you" class="nocadre" /></a></td></tr> 
   </table>
</div>
<div id="centre">
   <h3>
   De quoi ça parle ?
   </h3>
   <p class="presentation">
   <strong>N</strong>ous sommes dans la grande ville de Strey, en 3009, dans le petit État des États-Unis qu'est la Caroline du Sud. Le forum s'étend uniquement sur un terrain de particulier. La bâtisse est appelée la Dark Paper et est la 23e maison du quartier Times Square. Il est absolument impossible de sortir de l'enceinte de la maison. Quand on y entre, on ne peut plus en sortir !! è_é xD<br />
   <strong>C</strong>hacun joue un adolescent entre 13 et 23 ans. Il a tenté de pénétrer dans le terrain et a escaladé le mur de pierre : c'est la seule entrée. Le seul soucis, c'est qu'à peine passe-t-il cet obstacle qu'il se retrouve immédiatement réduit de dix fois sa taille normale. Oui, tu as bien lu. La particularité de cet endroit est qu'on devient un Homme d'une quinzaine de centimètres quand on pénètre dans l'enceinte....<br />
   <strong>L</strong>es premiers jeunes à subir cela décidèrent d'appeler leur nouvel espace vital "Berry Town" pour la simple et bonne raison que le jardin est rempli de toutes sortes de baies : myrtilles, mûres, framboises et j'en passe....<br />
   <strong>O</strong>n joue donc un ado d'une quinzaine de centimètres. Et mis à part cette taille relativement originale, le personnage n'a aucune particularité. Ce n'est pas un surhumain et il doit donc tenter de vivre dans ce terrain avec des repères physiques anormalement grands pour lui.<br />
   <strong>I</strong>l y aura plusieurs niveaux : quand on se présente, on est automatiquement mis dans le groupe "Nouveaux Arrivants". Après avoir gagné des points de RP, on peut faire une demande pour passer dans le groupe supérieur et découvrir de nouveaux lieux dans la Dark Paper !!!! ;D<br />
   </p><br /> <br />
   <h3>
   News
   </h3>
   <p class="news">
   
   </p>
</div>
<div id="contact">
   <div id="part">
      <h3 class="partenaires_h3">
      Partenaires
      </h3>
      <select name="partenaires" class="partenaires_select">
         <option value="defaut" selected="selected">Viens voir</option>
         <option value="premier"><a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">More ?</a></option>
         <option value="deuxieme"><a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">More ?</a></option>
         <option value="troisieme"><a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">More ?</a></option>
         <option value="quatrieme"><a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">More ?</a></option>
         <option value="cinquieme"><a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">More ?</a></option>
         <option value="sixieme"><a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">More ?</a></option>
      </select>
   </div>
   <div id="lier">
      <h3>
      Nous lier
      </h3>
      <img src="http://nsm02.casimages.com/img/2009/11/04//091104081645720774786622.gif" alt="logo"/>
      <textarea name="code" id="code">[url=http://berry-town.keuf.net][img]http://nsa08.casimages.com/img/2009/09/04/0909041108308647.gif[/img][/url]</textarea> 
      <a href="http://berry-town.keuf.net/partenariat-f86/consignes-pour-les-partenariats-t18.htm">Plus ?</a> 
   </div>
   <div id="coup_de_coeur">
      <h3>
      Coup de coeur
      </h3>
      <a href="http://pensionnat-hana.forumactif.org/"><img src="http://nsm02.casimages.com/img/2009/11/04//091104081644720774786621.jpg" alt="hana" class="nocadre"/></a>
   </div>
</div>
</body>
</html>

Spoiler:

Code:: body
{
width: 780px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#en_tete
{
width: 600px;
height: 200px;
background-image: url("http://nsa11.casimages.com/img/2009/11/03/09110309191852519.png");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left : 90px;
}
#liens_rapides
{
width: 780px;
height: 40px;
padding-left: 120px;
padding-right: 120px;
margin-bottom: 30px;
}
#liens_rapides table
{
border-collapse: collapse;
vertical-align : middle;
}
#liens_rapides td
{
width: 150px;
height: 30px;
}
#liens_rapides a
{
font-variant : small-caps;
text-decoration: none;
}
#liens_rapides .reglement
{
color: #ff9b90;
background-color: #c01300;
border-left: 5px solid #ff9b90;
border-right: 5px solid #ff9b90;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius:10px;
}
#liens_rapides .reglement:hover
{
color: #c01300;
font-style: italic;
background-color: #ff9b90;
border-left: 5px solid #c01300;
border-right: 5px solid #c01300;
padding-left: 10px;
padding-right: 10px;
}
#liens_rapides .galerie
{
color: #ffd678;
background-color: #c88200;
border-left: 5px solid #ffd678;
border-right: 5px solid #ffd678;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius:10px;
}
#liens_rapides .galerie:hover
{
color: #c88200;
font-style: italic;
background-color: #ffd678;
border-left: 5px solid #c88200;
border-right: 5px solid #c88200;
padding-left: 10px;
padding-right: 10px;
}
#liens_rapides .météo
{
color: #99ff88;
background-color: #10a000;
border-left: 5px solid #99ff88;
border-right: 5px solid #99ff88;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius:10px;
}
#liens_rapides .météo:hover
{
color: #10a000;
font-style: italic;
background-color: #99ff88;
border-left: 5px solid #10a000;
border-right: 5px solid #10a000;
padding-left: 10px;
padding-right: 10px;
}
#liens_rapides .aide
{
color: #88b7ff;
background-color: #001e98;
border-left: 5px solid #88b7ff;
border-right: 5px solid #88b7ff;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius:10px;
}
#liens_rapides .aide:hover
{
color: #001e98;
font-style: italic;
background-color: #88b7ff;
border-left: 5px solid #001e98;
border-right: 5px solid #001e98;
padding-left: 10px;
padding-right: 10px;
}
#staff table
{
width: 100px;
height: 400px;
vertical-align : middle;
float: left;
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
padding-right: 15px;
border-right: 1px dashed black;
}

.nocadre
{
border: none;
}
#centre
{
width: 480px;
height: 400px;
float: left;
padding-left: 50px;
padding-right: 50px;
}
#centre .presentation
{
-moz-border-radius:10px;
width : 350px;
height: 120px;
overflow: auto;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
border-left: 3px solid #c01300;
margin-left: 30px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 10px;
}
#centre p strong
{
color: orange;
font-style: italic;
}
#contact
{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
border-left: 1px dashed black;
width: 200px;
float: right;
}
#part
{
padding-bottom: 30px;
border-bottom: 1px dashed black;
}
#lier
{
padding-bottom: 30px;
border-bottom: 1px dashed black;
}
#lier a, #staff a
{
font-style: normal;
text-decoration: none;
color: black;
font-variant: small-caps;
font-size: 0.8em
}
#lier a:hover, #staff a:hover
{
font-style: italic;
text-decoration: none;
border-bottom : 1px dotted #000000;
font-variant: small-caps;
font-size: 0.85em
}
#contact .partenaires_select
{
-moz-border-radius:10px;
height: 30px;
border-left: 1px dotted black;
border-right: 1px dotted black;
border-bottom: 1px dotted black;
border-top: 3px solid #c01300;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
#contact #code
{
-moz-border-radius:10px;
height: 50px;
border-left: 1px dotted black;
border-right: 1px dotted black;
border-top: 3px solid #c01300;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
#coup_de_coeur
{
padding-bottom: 10px;
}

Sujet: Re: [Résolu] Problème de mise en forme Jeu 05 Nov 2009, 20:22

Je n'ai pas encore su arranger correctement le problème, mais j'en ai trouvé la source. Cela viens tout simplement des padding right et left. Tu as défini la largeur de ton body à 780px, or, actuellement, la largeur obtenue avec toutes propriétés définies, on atteint une largeur de 910px pour contenir correctement tes tableaux.
Le navigateur va donc obligatoirement positionner au mieux. Dans ce cas-là, il l'a inséré là où tu le désirais, mais avec un saut de ligne...
Si tu utilises Mozilla Firefox, je te conseille d'ajouter le module complètement Firebug. C'est un module qui fractionne la page en deux, affichant le code HTML et CSS. Très simple d'utilisation, il indique aussi au passage de la souris sur un tableau les margins ( en jaune ) et les padding ( en bleu ).

Pour le problème, il n'y a que deux solutions. La facile ou la hard. La facile sera de définir ton body à 910px pour que ton tableau partenaire rentre correctement. La hard... modifier tous tes padding et margin qui augmentent les tailles pour le forcer à se coincer.

Après, ce sont mes solutions ^^ je ne sais pas si il existerait un moyen de forcer le partenaire à se placer correctement. Si une personne passant par là à la soluce, qu'il fasse signe ! x)
Bref, je vais voir. Mais je te ne garantis pas des résultats express, je suis un peu... occupé en ce moment x)

Sujet: Re: [Résolu] Problème de mise en forme Ven 06 Nov 2009, 16:32

Okay, merci beaucoup !! Je vais essayer la "méthode hard" xD Parce qu'elle doit sûrement être plus efficace =] Merci en tout cas !! ;D

EDIT : j'ai téléchargé ce que tu m'as conseillé mais.... Ça sert à quoi au juste ? =O

EDIT (bis) : j'ai résolu mon problème !! =D Merci mille fois en tout cas pour ton aide !! ;D

[Résolu] Problème de mise en forme

[Résolu] Problème de mise en forme

Sujets similaires

Sujets similaires

Partenaires Or