Allignage des images + double menu

29 décembre 2005 à 11:43:55

Bonjour a tous, alors voila j aurai un probleme et une question donc je voudrais savoir comment faire un double menu (un a droite -c'est fait- et un a gauche).Merci.

et j'ai créé un site mais j'ai un probleme, les images flottantes ne sont pas alligné verticallement... : le site à la rubrique personnages :
Image utilisateur

Je vous donne mon code xHTML si ça peut vous aider :

<!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" >
<head>
<title>GTA-CJ, Astuce Soluces, Codes, Mysteres sur GTA San Andreas !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design GTA-CJ" href="design.css" />

</head>
<body>

<div id="en_tete">

<center><a href="index.html"><img src="http://img379.imageshack.us/img379/749/ban024zg8dh.gif" alt="GTA-CJ" title="GTA-CJ"/></a></center>
</div>

<div id="menu">

<div class="element_menu"> 
<h3>Le Site</h3>
   <ul>
   <li><a href="index.html">Acceuil</a></li>
   <li><a href="chat.html">T'chat</a></li>
   <li><a href="http://gta-cj.free-bb.com">Forum</a></li>
   <li><a href="contacte.html">Contacte</a></li>
   </ul>
</div>

<div class="element_menu">
<h3>Downloads</h3>
   <ul>
   <li><a href=".html">Downloads</a></li>
   </ul>
</div>

<div class="element_menu">
<h3>GTA San Andreas</h3>
   <h2>Infos :</h2>
   <ul>
   <li><a href="histoire.html">Hisoitre</a></li>
   <li><a href="persos.html">Personnages</a></li>
   <li><a href="gangs.html">Gangs</a></li>
   <li><a href="vehicules.html">Vehicules</a></li>
   <li><a href="armes.html">Armes</a></li>
   </ul>
   <h2>Astuces :</h3>
   <ul>
   <li><a href="controles.html">Controles</a></li>
   <li><a href="soluces.html">Soluces</a></li>
   <li><a href="codes.html">Cheat codes</a></li>
   <li><a href="astuces.html">Astuces</a></li>
   <h2>Divers :</h2>
   <li><a href="cartes.html">Cartes, plans</a></li>
   <li><a href="mysteres.html">Mysteres</a></li>
   <li><a href="fackes.html">Fackes</a></li>
</div>
</div>

<div id="corps">

<h1><center>Personnages :</center></h1>
<ul>
<li><a href="#CJ"> Carl Johnoson (CJ)</a></li>
<li><a href="#Sweet"> Sean Johnson (Sweet)</a></li>
<li><a href="#Ryder"> Lance Wilson (Ryder)</a></li>
<li><a href="#Smoke"> Melvin Harris (Big Smoke)</a></li>
<li><a href="#Brian"> Brian Johnson</a></li>
<li><a href="#Kendl"> Kendl Johnoson</a></li>
<li><a href="#OG Loc"> Jeffrey Martin (OG Loc)</a></li>
<li><a href="#Cesar"> Cesar Vialpando</a></li>

<img src="http://img379.imageshack.us/img379/693/cj4em.jpg" class="imageflottante" alt="CJ" title="Carl Johnson (CJ)"><h2 id="CJ">Carl Johnoson (CJ) :</h2>
<p>Carl Johnson est le héros de l'histoire. Après 5 années passées à Liberty City il revient à Los Santos. C'est un gangster qui éprouve le besoin de se venger car sa mère et son petit frère ont été tués. Il devient peu à peu un personnage important dans le gang Orange Grove Families.</p>

<img src="http://img352.imageshack.us/img352/4951/sweet4sa.jpg" class="imageflottante" alt="Sweet" title="Sean Johnson (Sweet)"><h2 id="Sweet">Sean Johnson (Sweet) :</h2>
<p>Personnage clé du gang Orange Grove Families, c'est le frère de Carl Johnson, il lui en veut pour la mort de sa mère et son petit frère il y a 5 ans. C'est lui qui va aider CJ à faire partie du gang.</p>

<img src="http://img352.imageshack.us/img352/3610/ryder8gh.jpg" class="imageflottante" alt="Ryder" title="Lance wilson (Ryder)"><h2 id="Ryder">Lance Wilson (Ryder) :</h2>
<p>Ryder un ancien ami de Carl, il fait partie du gang Orange Grove Families.</p>

<img src="http://img352.imageshack.us/img352/3182/smoke4po.jpg" class="imageflottante" alt="Smoke" title="Melvin Haris (Big Smoke)"><h2 id="Smoke">Melvin Harris (Big Smoke) :</h2>
<p>Big Smoke est un vieil ami de la famille des Johnson, il occupe lui aussi une place importante parmi les membres du gang Orange Grove Families.</p>

<img src="http://img352.imageshack.us/img352/8940/brian6vc.jpg" class="imageflottante" alt="Brian" title="Brian Johnson (Pas de photo)"><h2 id="Brian">Brian Johnson :</h2>
<p>Petit frère de CJ tué a l'âge de 10 ans dans un accident il y a 5 ans.</p>

<img src="http://img352.imageshack.us/img352/3141/kendl9rs.jpg" class="imageflottante" alt="Kendl" title="Kendl Johnson"><h2 id="Kendl">Kendl Johnson :</h2>
<p>Soeur de Sweet et CJ, elle en veut a CJ d'avoir laissé sa famille il y a 5 ans. </p>

<img src="http://img352.imageshack.us/img352/1641/ogloc5zu.jpg" class="imageflottante" alt="OG Loc" title="Jeffrey Martin (OG Loc)"><h2 id="OG Loc">Jeffrey Martin (OG Loc) :</h2>
<p>Jefferey est un rappeur gangster, il ne représente pas une réelle menace pour l'état de San Andreas. </p>

<img src="http://img352.imageshack.us/img352/4200/cesar5ma.jpg" class="imageflottante" alt="Cesar" title="Cesar Vialpando"><h2 id="Cesar">Cesar Vialpando :</h2>
<p>Très peu d'informations, on sait seulement que c'est un ami de longue date à CJ et sa soeur. Il vit a San Fierro.</p>
</div>

<div id="pied_de_page">

<p>Page créé par <a href="mailto: Nico_devilman@hotmail.fr" title="Envoyer-moi un mail">Nico165</a>. Copyright © GTA-CJ, Toute reproduction totale ou partielle est interdite sans l'accord de l'auteurs.</p>
</div>

</body>
</html>

Vous auriez la solution ?
Merci d'avance.

jp949

29 décembre 2005 à 11:49:58

il faudrait le code css deja je peux te donner 2 pistes .
1) mettre chaque image et le texte qui l'accompagne dans un paragraphe.
2) utiliser une liste ordinaire ou de definition

PeAcEUnItY

29 décembre 2005 à 11:53:10

J'ai essayer de mettre des paragraphes mais ce n'est toujours pas alligné
Voici quand meme mon code css :

p
{
color: black;
font-size: 15px;
}
h1
{
color: blue;
}
a
{
color: blue; /* Les liens seront en rouge au lieu de bleu */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: blue; /* Le lien sera écrit en vert quand on pointera dessus */
}
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("http://gtasa.mysteres.free.fr/site/images/pics/cartes/sa.jpg");
}
/* Le menu */

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}

.element_menu
{
background-color: yellow;
background-image: url("http://img352.imageshack.us/img352/7586/jfjfj8pq.jpg");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
/* Quelques effets sur les menus */

.element_menu h3 /* Tous les titres de menus */
{
color: red;
text-align: center;
background-image: url("http://img522.imageshack.us/img522/5294/bnfdh3fk.jpg");
}

.element_menu h2
{
color: red;
text-align: center;
font-size: 17px;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("http://img509.imageshack.us/img509/8277/kygk4ri.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: black;
text-decoration: none;

}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
color: black;
}
/* Le corps de la page */

#corps
{
margin-left: 120px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: black;
background-color: yellow; /* Une couleur de fond pour le corps */
background-image: url("http://img352.imageshack.us/img352/7586/jfjfj8pq.jpg");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */

border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;

text-align: center;

color: black;
background-color: yellow;
background-image: url("http://img352.imageshack.us/img352/7586/jfjfj8pq.jpg");
background-repeat: repeat-x;

border: 2px solid black;
}
.imageflottante
{
float: left;
}