Centrer deux tableaux

stranger98 Le 20 avril 2016 à 20:56 (Édité le 25 janvier 2019 à 17:50)

Bonjour je voulais créer un site, et j'arrive pas centrer deux tableaux cote à cote et que meme si je retrecis la page et ben ça reste au centre, ça pars pas à gauche, mais sans que le menu soit impliqué car il est de width 100%.

<body>
      <nav>
         <ul>
            <li class="menu-accueil"><a href="#">Accueil</a>
            </li>
            <li class="menu-saisons"><a href="#">menu</a>
               <ul class="submenu">
                  <li><a href="#">submenu</a></li>
                  <li><a href="#">Submenu</a></li>
                  <li><a href="#">submenu</a></li>
                  <li><a href="#">Submenu 1</a></li>
               </ul>
            </li>
         </ul>
      </nav>



      <div id="table">
      <table width="800" cellspacing="0" cellpadding="0" align="center">
      <td bgcolor="#424558" height="1800" valign="top">

      </td>
      </table>
      </div>



      <div id="table1">
      <table width="300" cellspacing="0" cellpadding="0" align="center">
      <td bgcolor="#424558" height="400" valign="top">

      </td>
      </table>
      </div>
</body

body {
   background-image: url(#);
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
   background-size: cover;
   overflow-x: hidden;
   margin: 0;
   padding: 0;
}


nav > ul {
   min-width: 1200px;
   margin: 0;
   padding: 0;
}
nav > ul > li {
   float: left;
}
nav li {
   list-style: none;
}
.submenu {
   display: none;
}
nav {
   width: 100%;
   background-color: #424558;
}
nav > ul >li {
   width: 200px;
   float: left;
   position: relative;
}
nav > ul:after {
   content: "";
   display: block;
   clear: both;
}
nav a {
   display: inline-block;
   text-decoration: none;
}
nav > ul > li > a {
   font-size: 17px;
   font-family: Cooper Black;
   padding: 20px 65px;
   color: #FFF;
}
nav li:hover .submenu {
   display: inline-block;
   position: absolute;
   top: 100%;
   left: 0px;
   padding: 0px;
   z-index: 100000;
}
.submenu li {
   border-bottom: 1px solid #CCC;
}
.submenu li a {
   font-size: 15px;
   font-family: Cooper Black;
   color: #000000;
   width: 250px;
}
.menu-accueil:hover {
   border-top: 5px solid #e44d26;
}
.menu-saisons:hover {
   border-top: 5px solid #e44d26;
}
nav > ul > li:hover a {
   padding: 15px 65px 20px 65px;
}
.menu-saisons .submenu {
   background-color: RGB(230, 100, 40);
}
.submenu li:hover a {
   color: #EEE;
   color: #000000;
}
.menu-saisons .submenu li:hover {
   background-color: #ffffff;
}


#table {
   float: left;
   margin-right: 20px;
   margin-left: 20px;
   margin-top: 20px;
}


#table1 {
   min-width: 1250px;
   margin-right: 20px;
   margin-top: 20px;
}

Clouder Le 21 avril 2016 à 11:44

C'est normal !

Il va falloir que soit tu encadres tes 2 tableaux de balises <div></div> et que tu mettes un style CSS avec un "width:50%" pour chacun comme ça ils occuperont chacun 50% de ta page et ensuite si le 2ème tableau n'est toujours pas à côté alors fait un "float:left;" pour chaque tableau et sa devrait marcher.

PS: Si sa ne marche toujours pas essaie de mettre "position:relative;" en plus 😋

Tiens moi au courant.

Centrer deux tableaux

Échange

Articles / Vidéos

Ressources