18073 sujets

Questions générales et questions de débutants

Aligner 2 tables l'une à côté de l'autre

Bonjour, c'est encore moi, j'ai décidé de continuer mon projet dans un autre sujet, car mon problème n'est plus le même, l'autre étant résolu.

Mon problème est que j'essaie d'aligner 2 tables l'une à côté de l'autre. Cela semble fonctionner sur Firefox, mais pas sur IE.

De plus, la barre verticale entre les 2 tables ne s'affiche pas

Le résultat peut être vu ici : www.kataclyst.com/V2/Test2

Le résultat attendu ici : www.Kataclyst.com/V2/FR/

Le code HTML

<body>
   <br />

   <div id="page">
   <div id="entete"></div>
   <div id="menu">
      <ul>
        <li id="kataclyst"></li>
        <li id="accueil"><a href="#a"></a></li>
        <li id="apropos"><a href="#b"></a></li>
        <li id="services"><a href="#c"></a></li>
        <li id="portfolio"><a href="#d"></a></li>

        <li id="demande"><a href="#e"></a></li>
        <li id="contact"><a href="#f"></a></li>
      </ul>
   </div>
   <div id="barrehorizontale_haut"></div> 
   
   [b]
   <div id="tables">
      <div id="gauche">
         <div id="bienvenue"></div>
         <div id="general_milieu">
            <p id="texte_general">TEXTE1</p>
         </div> 
         <div id="general_bas"></div>
      </div>
      <div id="barreverticale"></div>
      <div id="droite">
         <div id="bienvenue"></div>
         <div id="general_milieu">
            <p id="texte_general">TEXTE2</p>
         </div> 
         <div id="general_bas"></div>
      </div>
   </div>
    [/b]

    <div id="barrehorizontale_bas"></div>
    <div id="menubas">
      <ul>

        <li id="copyright"></li>
        <li id="faq"><a href="#a"></a></li>
      </ul>
   </div>
   </div>
    
</body>


Le code CSS

/*
|--------------------------------------------|
| Caractéristiques générales                          |
|--------------------------------------------|
*/
body
{
  background-color:#727878;
  text-align:center;
}

div
{
  margin:0 auto;
}

div#page
{
  overflow:auto;
  background-color:white;
  width:710px;
}

div#entete 
{
  background:url(entete.jpg) no-repeat;
  width:688px;
  height:167px;
  margin-top:10px;
}

div#barrehorizontale_haut
{
  background:url(barrehorizontale_haut.jpg) no-repeat;
  width:688px;
  height:11px;
  margin-top:3px;
  margin-bottom:5px;
}

div#barrehorizontale_bas
{
  background:url(barrehorizontale_bas.jpg) no-repeat;
  width:688px;
  height:11px;
  margin-top:5px;
  margin-bottom:3px;
}

/*
|--------------------------------------------|
| Le texte                                                  |
|--------------------------------------------|
*/
#texte_general
{
  color:#7a7a7a;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:13px;
  text-align:justify;
  padding-left:15px;
  padding-right:15px;
  margin:0px;
}

/*
|--------------------------------------------|
| Le menu                                                  |
|--------------------------------------------|
*/
div#menu ul
{
  overflow:auto;
  margin:0px;
  margin-left:10px;
  margin-top:8px;
  padding:0px;
}

div#menu ul li
{
  list-style-type:none;
  float:left;
}

div#menu a
{
  width:90px;
  height:30px;
  display:block;
}

#menu ul li#kataclyst
{

  background:url(menu/kataclyst.jpg) no-repeat;
  width:150px;
  height:39px;
}

#menu ul li#accueil
{
  background:url(menu/accueil.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#apropos
{
  background:url(menu/apropos.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#services
{
  background:url(menu/services.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#portfolio
{
  background:url(menu/portfolio.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#demande
{
  background:url(menu/demande.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#contact
{
  background:url(menu/contact.jpg) no-repeat;
  width:90px;
  height:39px;
}

div#menubas ul
{
  overflow:auto;
  margin:0px;
  margin-left:12px;
  margin-top:8px;
  margin-bottom:10px;
  padding:0px;
}

div#menubas ul li
{
  list-style-type:none;
  float:left;
}

div#menubas a
{
  width:72px;
  height:25px;
  display:block;
}


#menubas ul li#copyright 
{
  background:url(menu/copyright.jpg) no-repeat;
  width:616px;
  height:28px;
}

#menubas ul li#faq 
{
  background:url(menu/faq.jpg) no-repeat;
  width:72px;
  height:28px;
}

[b]
/*
|--------------------------------------------|
| Les tables                                               |
|--------------------------------------------|
*/
#bienvenue 
{
  background:url(tables/bienvenue.jpg) no-repeat;
  border-style:none;
  width:320px;
  height:27px;

}	

#general_milieu 
{
  border-style:none;
  background:url(tables/general_milieu.jpg);
  width:320px;
}

#general_bas 
{
  background:url(tables/general_bas.jpg) no-repeat;
  border-style:none;
  width:320px;
  height:19px;
}

div#barreverticale
{
  background:url(barreverticale.jpg.jpg) repeat-y;
  width:3px;
}

div#tables
{
  position:relative;
}

div#gauche
{
  width:320px;
  margin-left:18px;
}

div#droite
{
  width:320px;
  margin-right:18px;
  position:absolute;
  top:0;
  right:0;
}
[/b]
Bonjour, j'ai retravaillé fort sur mon site et résous quelque problèmes. Néanmoins, quelques problèmes persistent.

J'ai réussi à aligner les 2 tables l'une à côté de l'autre, mais je n'arrive pas à faire en sorte qu'il s'ajuste automatiquement au contenu (ne pas avoir de scroll-bar (voir "à propos" pour exemple de ce que je ne veux pas)). De plus, je suis arrivé à faire afficher la barre verticale entre les 2 tables, mais je ne crois pas que ce soit la meilleur solution, car quand la page est trop longue, cela ne fonctionne plus (voir la catégorie "services", elle est trop à gauche). Enfin, j'aimerais quelle s'ajustement également en hauteur par rapport à la hauteur de ma table la plus longue.

Le résultat peut être vu ici : http://www.kataclyst.com/V2/Test3/

Le code HTML :

<div id="barrehorizontale_haut"></div>
<div id="tables">
	<div id="gauche">
	<div id="services_offerts"></div>
		<div class="general_milieu">
			<p class="texte_general">Texte1</p>
		</div>
		<div class="general_bas"></div>
	</div>

        <div id="barreverticale">a</div>

        <div id="droite">
        	<div id="pourquoi_avoir_son_propre_site_web"></div>
		<div class="general_milieu">
			<p class="texte_general">Texte2</p>
		</div>
		<div class="general_bas"></div>
     	</div>
</div>    
<div id="barrehorizontale_bas"></div>


Le code CSS :

div#tables
{
  position:relative;
  overflow:auto;
}

div#gauche
{
  width:320px;
  margin-left:22px;
}

div#droite
{
  width:320px;
  margin-right:22px;
  position:absolute;
  top:0;
  right:0;
}

div#barreverticale
{
  background:url(../../images/barreverticale.jpg) repeat-y;
  width:3px;
  position:absolute;
  top:0;
  right:354px;
  overflow:auto;
}


Merci beaucoup pour votre aide!
Sujet clos
Aller à