Bonjour, j'ai fait une recherche sur le forum et j'ai rien trouvé pour m'aider:
voici mon problème:
capture 1
capture 2
Selon si j'ai un <h3> ou un <p>, une partie du div s'affiche à droite ou en dessous de mon menu.
Voici mon code source de la capture 1:
Voici mon code source de la capture 2:
je suis newbie en css et je comprends pas d'où vient cette différence, j'aimerai que la 1ère page soit comme la seconde.
Merci de votre aide
Modifié par DJul (01 Mar 2007 - 19:44)
voici mon problème:
capture 1
capture 2
Selon si j'ai un <h3> ou un <p>, une partie du div s'affiche à droite ou en dessous de mon menu.
Voici mon code source de la capture 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Neuwerth Logistics: Notre gramme de balayeuses
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<script language="javascript" type="text/javascript" src="js/form.js"></script>
<script language="javascript" type="text/javascript" src="js/menu.js"></script>
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script language="javascript" type="text/javascript" src="js/lightbox.js"></script>
<link href="favicon.ico" rel="SHORTCUT ICON">
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="haut_centre"></div>
<div id="header2"></div>
<div id="menu">
<div id="dhtmlgoodies_slidedown_menu"><ul>
<li><a href="#">Entreprise</a>
<ul>
<li><a href="entreprise-accueil.html">Accueil</a></li>
<li><a href="entreprise-30ans.html">30 ans</a></li>
<li><a href="entreprise-localisation.html">Localisation</a></li>
<li><a href="entreprise-news.html">News</a></li>
<li><a href="entreprise-presse.html">Presse</a></li>
<li><a href="entreprise-show-room.html">Show-room</a></li>
<li><a href="entreprise-contact.html">Contact</a></li>
</ul>
</li>
<li><a href="elevateur-formation-cariste.html" style="color:red;">Permis de cariste</a>
<ul>
<li><a href="elevateur-formation-cariste-details.html">Présentation</a></li>
<li><a href="elevateur-formation-cariste-raisons.html">Raisons</a></li>
<li><a href="elevateur-formation-cariste-inscription.html">Inscription</a></li>
<li><a href="elevateur-formation-cariste-dates.html">Dates</a></li>
</ul>
</li>
<li><a href="#">Elévateurs</a>
<ul>
<li><a href="elevateur-komatsu.html">Komatsu</a>
<ul>
<li><a href="elevateur-komatsu-thermique.html">Thermique</a></li>
<li><a href="elevateur-komatsu-electrique.html">Electrique</a></li>
<li><a href="elevateur-komatsu-magasinage.html">Magasinage</a></li>
</ul>
</li>
<li><a href="elevateur-neslift.html">Neslift</a>
<ul>
<li><a href="elevateur-neslift-transpalette.html">Transpalettes</a></li>
<li><a href="elevateur-neslift-gerbeur.html">Gerbeurs</a></li>
</ul>
</li>
<li><a href="#">Mast 4x4</a>
<ul>
<li><a href="elevateur-4x4.html">Mast EXPLORER</a></li>
<li><a href="elevateur-4x4-flash.html">Présentation flash</a></li>
<li><a href="elevateur-4x4-applications.html">Applications</a></li>
<li><a href="elevateur-4x4-accessoires.html">Accessoires</a></li>
<li><a href="elevateur-4x4-photos.html">Galerie photos</a></li>
</ul>
</li>
<li><a href="elevateur-lateral.html">Latéraux BP</a>
<ul>
<li><a href="elevateur-lateral-diesel.html">Diesel</a>
<ul>
<li><a href="elevateur-lateral-diesel-4000.html">4000-6000 kg</a></li>
<li><a href="elevateur-lateral-diesel-7000.html">7000-12000 kg</a></li>
</ul>
</li>
<li><a href="elevateur-lateral-hydrostatique.html">Hydrostatique</a>
<ul>
<li><a href="elevateur-lateral-hydrostatique-3000.html">3000-4000 kg</a></li>
<li><a href="elevateur-lateral-hydrostatique-5000.html">5000-7000 kg</a></li>
</ul>
</li>
<li><a href="elevateur-lateral-electrique.html">Electrique</a>
<ul>
<li><a href="elevateur-lateral-electrique-2000.html">2000-2500 kg</a></li>
<li><a href="elevateur-lateral-electrique-3000.html">3000-4000 kg</a></li>
<li><a href="elevateur-lateral-electrique-5000.html">5000-7000 kg</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="elevateur-multi.html">Mulit-directionnels BP</a>
<ul>
<li><a href="elevateur-multi-electrique.html">Electrique</a></li>
<li><a href="elevateur-multi-mecanique.html">Mécanique</a></li>
</ul>
</li>
<li><a href="elevateur-occasion-photo.html">Occasions</a>
<ul>
<li><a href="elevateur-occasion-liste.html">Liste détaillée</a></li>
<li><a href="elevateur-occasion-demande.html">Demander une offre</a></li>
</ul>
</li>
<li><a href="elevateur-accessoires.html">Accessoires</a></li>
<li><a href="elevateur-executions-speciales.html">Exéctutions spéciales</a></li>
<li><a href="elevateur-demandeoffre.html">Demander une offre</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Full Service</a></li>
<li><a href="#">Réparation</a></li>
</ul>
</li>
<li><a href="etageres.html">Etagères</a>
<ul>
<li><a href="etageres-drivein.html">Drive-In</a></li>
<li><a href="#">Pal-Rack</a>
<ul>
<li><a href="etageres-palrack-applications.html">Applications</a></li>
<li><a href="etageres-palrack-caracteristiques.html">Caratéristiques</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Grillages à palettes</a></li>
<li><a href="#">Plateformes élévatrices</a></li>
<li><a href="#">Equipements de quai</a></li>
<li><a href="#">Portes industriels</a></li>
<li><a href="balayeuses.html">Balayeuses RCM</a>
<ul>
<li><a href="balayeuses-manuelles.html">Manuelles</a></li>
<li><a href="balayeuses-operateur-bord.html">Opérateur à bord</a></li>
<li><a href="balayeuses-hydrauliques.html">Hydrauliques</a></li>
<li><a href="elevateur-occasion-photo-balayeuse.html">Occasions</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contenu">
<h2>Notre gramme de balayeuses
</h2>
<h3>Balayeuses à main</h3>
<p>
<a href="balayeuses-manuelles.html"><img src="images/balayeuses/BRAVA.jpg" alt="balayeuse RCM Brava" class="gauche"></a>
Les balayeuses à opérateur à terre sont simples d'utilisation et faciles à manipuler. Elles conviennent aux secteurs classés petits à moyens, d'intérieur et extérieur, et sont cinq fois plus rapidement qu'une personne avec un balai.
</p>
<h3>Balayeuse avec opérateur à bord</h3>
<p>
<a href="balayeuses-operateur-bord.html"><img src="images/balayeuses/ATOM.jpg" alt="balayeuse RCM Atom" class="gauche"></a>
Les balayeuses à opérateur à bord conviennent aux secteurs moyens de nettoyage, d'intérieur ou extérieur: La position à l'avant du conducteur assure une visibilité maximum et une facilité d'emploi des commandes, ce qui élimine les besoins en formation des opérateurs.
</p>
<h3>Balayeuses hydrauliques</h3>
<p>
<a href="balayeuses-hydrauliques.html"><img src="images/balayeuses/MILLE.jpg" alt="balayeuse RCM Mille" class="gauche"></a>
Idéal pour de grands secteurs de nettoyage, à l 'intérieur ou extérieur. Une excellente visibilité est garantie avec la position et à l'avant du conducteur et des commandes. Ces machines sont conçues pour l'opération prolongée dans des environnements de fonctionnement difficiles. Le réservoir d'ordures peut être augmenté et hydrauliquement déchargé jusqu'à une hauteur de 135 centimètres.
</p>
<h3>Balayeuses d'occasion</h3>
<p>
<a href="elevateur-occasion-photo-balayeuse.html"><img src="images/balayeuses/BalayeuseHako_occ.jpg" alt="balayeuses d'occasion" class="gauche"></a>
Découvrez nos balayeuses d'occasion.
</p>
</div>
<p id="footer">Pied de page</p>
</div>
</body>
</html>
Voici mon code source de la capture 2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Neuwerth Logistics: Chariots élévateurs Komatsu
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<script language="javascript" type="text/javascript" src="js/form.js"></script>
<script language="javascript" type="text/javascript" src="js/menu.js"></script>
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script language="javascript" type="text/javascript" src="js/lightbox.js"></script>
<link href="favicon.ico" rel="SHORTCUT ICON">
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="haut_centre"></div>
<div id="header2"></div>
<div id="menu">
<div id="dhtmlgoodies_slidedown_menu"><ul>
<li><a href="#">Entreprise</a>
<ul>
<li><a href="entreprise-accueil.html">Accueil</a></li>
<li><a href="entreprise-30ans.html">30 ans</a></li>
<li><a href="entreprise-localisation.html">Localisation</a></li>
<li><a href="entreprise-news.html">News</a></li>
<li><a href="entreprise-presse.html">Presse</a></li>
<li><a href="entreprise-show-room.html">Show-room</a></li>
<li><a href="entreprise-contact.html">Contact</a></li>
</ul>
</li>
<li><a href="elevateur-formation-cariste.html" style="color:red;">Permis de cariste</a>
<ul>
<li><a href="elevateur-formation-cariste-details.html">Présentation</a></li>
<li><a href="elevateur-formation-cariste-raisons.html">Raisons</a></li>
<li><a href="elevateur-formation-cariste-inscription.html">Inscription</a></li>
<li><a href="elevateur-formation-cariste-dates.html">Dates</a></li>
</ul>
</li>
<li><a href="#">Elévateurs</a>
<ul>
<li><a href="elevateur-komatsu.html">Komatsu</a>
<ul>
<li><a href="elevateur-komatsu-thermique.html">Thermique</a></li>
<li><a href="elevateur-komatsu-electrique.html">Electrique</a></li>
<li><a href="elevateur-komatsu-magasinage.html">Magasinage</a></li>
</ul>
</li>
<li><a href="elevateur-neslift.html">Neslift</a>
<ul>
<li><a href="elevateur-neslift-transpalette.html">Transpalettes</a></li>
<li><a href="elevateur-neslift-gerbeur.html">Gerbeurs</a></li>
</ul>
</li>
<li><a href="#">Mast 4x4</a>
<ul>
<li><a href="elevateur-4x4.html">Mast EXPLORER</a></li>
<li><a href="elevateur-4x4-flash.html">Présentation flash</a></li>
<li><a href="elevateur-4x4-applications.html">Applications</a></li>
<li><a href="elevateur-4x4-accessoires.html">Accessoires</a></li>
<li><a href="elevateur-4x4-photos.html">Galerie photos</a></li>
</ul>
</li>
<li><a href="elevateur-lateral.html">Latéraux BP</a>
<ul>
<li><a href="elevateur-lateral-diesel.html">Diesel</a>
<ul>
<li><a href="elevateur-lateral-diesel-4000.html">4000-6000 kg</a></li>
<li><a href="elevateur-lateral-diesel-7000.html">7000-12000 kg</a></li>
</ul>
</li>
<li><a href="elevateur-lateral-hydrostatique.html">Hydrostatique</a>
<ul>
<li><a href="elevateur-lateral-hydrostatique-3000.html">3000-4000 kg</a></li>
<li><a href="elevateur-lateral-hydrostatique-5000.html">5000-7000 kg</a></li>
</ul>
</li>
<li><a href="elevateur-lateral-electrique.html">Electrique</a>
<ul>
<li><a href="elevateur-lateral-electrique-2000.html">2000-2500 kg</a></li>
<li><a href="elevateur-lateral-electrique-3000.html">3000-4000 kg</a></li>
<li><a href="elevateur-lateral-electrique-5000.html">5000-7000 kg</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="elevateur-multi.html">Mulit-directionnels BP</a>
<ul>
<li><a href="elevateur-multi-electrique.html">Electrique</a></li>
<li><a href="elevateur-multi-mecanique.html">Mécanique</a></li>
</ul>
</li>
<li><a href="elevateur-occasion-photo.html">Occasions</a>
<ul>
<li><a href="elevateur-occasion-liste.html">Liste détaillée</a></li>
<li><a href="elevateur-occasion-demande.html">Demander une offre</a></li>
</ul>
</li>
<li><a href="elevateur-accessoires.html">Accessoires</a></li>
<li><a href="elevateur-executions-speciales.html">Exéctutions spéciales</a></li>
<li><a href="elevateur-demandeoffre.html">Demander une offre</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Full Service</a></li>
<li><a href="#">Réparation</a></li>
</ul>
</li>
<li><a href="etageres.html">Etagères</a>
<ul>
<li><a href="etageres-drivein.html">Drive-In</a></li>
<li><a href="#">Pal-Rack</a>
<ul>
<li><a href="etageres-palrack-applications.html">Applications</a></li>
<li><a href="etageres-palrack-caracteristiques.html">Caratéristiques</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Grillages à palettes</a></li>
<li><a href="#">Plateformes élévatrices</a></li>
<li><a href="#">Equipements de quai</a></li>
<li><a href="#">Portes industriels</a></li>
<li><a href="balayeuses.html">Balayeuses RCM</a>
<ul>
<li><a href="balayeuses-manuelles.html">Manuelles</a></li>
<li><a href="balayeuses-operateur-bord.html">Opérateur à bord</a></li>
<li><a href="balayeuses-hydrauliques.html">Hydrauliques</a></li>
<li><a href="elevateur-occasion-photo-balayeuse.html">Occasions</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contenu">
<h2>Chariots élévateurs Komatsu
</h2>
<p>
Komatsu Forklift a toujours représenté une référence importante pour l'industrie des chariots élévateurs en terme de qualité et de respect de l'environnement.
</p>
<p>
Forklift a toujours représenté une référence importante pour l'industrie des chariots élévateurs en terme de qualité et de respect de l'environnement.
</p>
<p>Neuwerth Logistics est l'unique distributeur des élévateurs Komatsu pour la Suisse.</p>
<p>Découvrez les produits de la marque Komatsu</p>
<table>
<tr>
<td><img border="0" src="images/komatsu/BX50_ST008_150px.jpg" class="gauche" alt="élévateur komatsu bx50"></td>
<td><img border="0" src="images/komatsu/ar-3_150px.jpg" class="gauche" alt="élévateur komatsu ar-3r"></td>
<td><img border="0" src="images/komatsu/MWS14-150px.jpg" class="gauche" alt="gerbeur komatsu mws"></td>
</tr>
<tr>
<td>Thermique</td>
<td>Électrique</td>
<td>Magasinage</td>
</tr>
<tr>
<td><a href="elevateur-komatsu-ax50.html">AX 50</a></td>
<td><a href="elevateur-komatsu-am2r.html">AM-2R AE-2R</a></td>
<td><a href="elevateur-komatsu-transpalette-electrique.html">transpalette à timon</a>
</td>
</tr>
<tr>
<td><a href="elevateur-komatsu-bx50.html">BX 50</a></td>
<td><a href="elevateur-komatsu-be3r.html">BE-3R</a></td>
<td><a href="elevateur-komatsu-transpalette-electrique-plateforme.html">Transpalette avec plateforme</a></td>
</tr>
<tr>
<td><a href="elevateur-komatsu-cx.html">CX</a></td>
<td></td>
<td><a href="elevateur-komatsu-gerbeur-1tonne.html">Gerbeur à timon 10 - 12</a></td>
</tr> <tr>
<td><a href="elevateur-komatsu-dx20.html">DX 20</a></td>
<td></td>
<td><a href="elevateur-komatsu-gerbeur-2tonne.html">Gerbeur à timon 14 - 20</a></td>
</tr> <tr>
<td><a href="elevateur-komatsu-ex20.html">EX 20</a></td>
<td></td>
<td><a href="elevateur-komatsu-gerbeur-plateforme.html">Gerbeur avec plateforme</a></td>
</tr> <tr>
<td></td>
<td></td>
<td><a href="elevateur-komatsu-mat-retractable.html">Chariots à mât rétractable</a></td>
</tr> <tr>
<td></td>
<td></td>
<td><a href="elevateur-komatsu-preparateur-commande.html">Préparateur de commandes</a></td>
</tr>
</table>
</div>
<p id="footer">Pied de page</p>
</div>
</body>
</html>je suis newbie en css et je comprends pas d'où vient cette différence, j'aimerai que la 1ère page soit comme la seconde.
Merci de votre aide
Modifié par DJul (01 Mar 2007 - 19:44)